エス技研

WordPress、CakePHP、PHP、baserCMSなどの Web系システムを中心に情報を提供します!


ショートコード+ウィジェットでサイドバーに人気記事を表示させる方法

      2017/03/12

サイドバーに人気記事を表示させる方法

 

ショートコードで人気記事を編集するソースコード

 
ウィジェットに表示する「人気記事」をショートコードで自由な記事を指定して編集出来る関数を作成しました。
 
ソースコードは、以下の通りです。
 

 
このソースコードは、functions.phpに記載します。
ファイルの場所は以下の場所です。
/wp-contents/theme/{テーマのフォルダ}/functions.php
 
functions.phpについては、下記に詳しい記事を書いていますので合わせて参考にしてください。
 「WordPressの functions.phpがある場所
 
 

ウィジェットに編集するショートコード

 
ウィジェットの「内容」のところに編集するショートコードは以下のような感じです。
投稿は、POST IDで指定をします。複数指定する場合は、「,(カンマ)」で区切ります。数の制限はありません。

 
 


 

ウィジェットの見え方

 
編集すると、下記の様に表示されます。
まさに、右側のサイドナビゲーションに表示されている「最近の読み物」です(笑)。
 
20150925_wp_01
 
 

「人気記事」の編集の際の注意点

 
基本的な処理はこのままで問題ありませんが、HTMLを出力する部分は、あなたのサイトのテーマに合わせて改変してください。
このブログは、Stinger5を利用させていただいていますので、同じテーマであればそのままでも大丈夫な場合もあるでしょう。
 
 
また、23行目の「$post_array->post_excerpt」は「抜粋」を出力する設定になっています。ここも違うものにしたい場合が多いのではないかと思いますので、必要に応じて変更してください。
 
組み込む際の項目をどう指定すればいいかについては、「get_post()」関数についての下記オフィシャルサイトが参照になるでしょう。
 https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/get_post
 
 
また、このエス技研ブログではサムネイルは必ずありますので、サムネイルがない場合を想定していませんが、サムネイルの画像がない場合を想定するならば、16行目を下記の処理に変更するといいでしょう。
 

 
 
また、一番最後の行の「add_filter(‘widget_text’, ‘do_shortcode’ );」は、ウィジェットにショートコードを編集する際のコマンドですので、テンプレートに組み込む場合などは不要です。
 
ショートコードについては下記に記事を書いていますので参考にしてみてください。
 「WordPress投稿にPHPを記述するショートコードの使い方add_shortcode
 「WordPressのウィジェットでショートコードを使う方法add_filter
 
 

「人気記事」のショートコードのプログラムを作った経緯

 
このブログの右ナビゲーションにある「最近の読み物」は、アナログ的に手作業で更新していました。
Google Search Console(旧 Google WebMaster Tool)や Googleアナリティクスを参考に、人気があるコンテンツを中心に掲載をしていました。
 
実際にアクセスが多い記事もあれば、「いいね!」が多い記事もあり、コメントが多い記事、読んで欲しい記事など複合的に判断して掲載していました。
単なるアクセスランキングにはしたくなかったので。
 
 
でも、これ、単純に HTMLのソースを手書きしてウィジェットに貼り付けるという、かなりアナログな方法を採っていましたので更新がかなーり面倒だったのです。
 
そんなわけで、定期的な更新というわけにはいきませんでした。
 
でも、「最近の読み物」というコーナーが最近のものを更新されていないのでは役に立たないので、簡単に更新できる方法を考えたワケです。
 
分かっている方にとっては非常に簡単な内容で、純粋な処理の部分は 10行にも満たないわけですので、「もっと早くに作っておけばよかった」という感じはするのですが、知らないことは作れないわけで、ということですね。
 
カスタムフィールドを管理するプラグインの「Advanced Custom Fields」の使い方を調べているうちに投稿情報を取り出す方法をいろいろ知りまして、「なんだ簡単じゃないか」と思ったわけです。
そんな「Advanced Custom Fields」の使い方については、下記に記事を書いています。
 「カスタムフィールド決定版!Advanced Custom Fields全項目完全解説・管理画面編
 「Advanced Custom Fieldsの全項目解説・公開側表示編集編
 
 
ソース自体は大したものではないですが、せっかく作りましたので同じようなことを望まれている方は参考にしてみてください!

 - WordPress

GoogleAdwords

GoogleAdwords

最後までお読みいただきましてありがとうございます。
この記事が参考になったと思いましたらソーシャルメディアで共有していただけると嬉しいです!

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

下記の空欄を埋めてください。 * Time limit is exhausted. Please reload CAPTCHA.

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

※入力いただいたコメントは管理者の承認後に掲載されます。

  関連記事

WordPress 任意のファイルを読み込むショートコードの処理

投稿ページにショートコードを利用して任意のファイルを読み込む処理の解説です。

WordPress投稿にPHPを記述するショートコードの使い方add_shortcode

WordPressの投稿ページで PHPの処理を行うには add_shortcode関数を使ったショートコードという機能を利用します。

WordPressの記事編集で文字が自動変換される要注意な文字列

記事を編集する際、入力した文字とは違う表示のされ方をする文字、アポストロフィ、ダブルクォート、円マーク、三点リーダ(…)など、その解説と対応方法です。

WP Customer ReviewsでWordPressにオリジナルの口コミサイトを構築

口コミサイトを構築するためのプラグイン。独自フォームによるレビュー、評価点を投稿でき、入力項目の追加もできます。

BackWPupでバックアップ・機能の基本設定 Settings

BackWPupその5。バックアップ設定のベースになるBackWPup自体の設定解説です。

BizVektor環境の引越しでメニュー、バナーが消える不具合の対応方法解説

BizVektor環境の引越し方法と不具合が発生しやすい箇所の解説です。引っ越し作業をする際にURLやファイルのパスを置換する際の手順解説と対応方法についての解説です。

WordPress管理画面のメニューに項目を追加する方法解説

WordPressの管理画面のメニューに項目を追加する方法をサンプルソースを交えて解説します。

ロリポップでWordPress+Basic認証で不具合発生!回避方法解説

ロリポップサーバでWordPressを使いBasic認証を設定する際には注意しないとWordPressが動かなくなる場合も!その回避方法を解説します。

WordPress データベースを管理するための強い味方のプラグイン WP-DBMANAGER

データベースを管理するための強い見方のプラグイン「WP-DBMANAGER」の使い方の説明です。

WordPressの 外観のテーマのための関数の並び順

WordPressのカスタマイズの際にテーマのテンプレートを編集しますが、そのテーマファイルの並び順の解説です。