CrystalSnowman.com

あなたの時間節約につながる情報を提供します

WordPress サイドバーに最近の記事と人気の記事を表示する方法

sidebar

ブログのサイドバーに最近の記事とアクセスが多かった記事をウィジェットを使わずに表示しました。見た目を自由に変更でき、メンテがしやすくなるのでお勧めです。簡単なので方法を紹介します。

サイドバーとウィジェットについて

サイドバーに記事を表示するのはウィジェットを使えば簡単に追加できます。しかしレイアウト変更や表示項目の変更ができません。そこでサイドバーのテーマを修正することにしました。

ちなみにウィジェットを使ってサイドバーに追加するのは以下の方法でできます。

「function.php」に「register_sidebar();」を追記します。

そうするとこんな感じでWordPress管理画面の外観メニューに「ウィジェット」が追加されます。

ウィジェット

クリックすると「ウィジェット」画面が表示されます。
「サイドバー1」に表示させたい項目をドラッグアンドドロップします。

ウィジェット 画面

「sidebar.php」に「dynamic_sidebar();」を記述します。

これで「ウィジェット」画面で設定した内容がサイドバーに表示されます。

今回はこの方法ではなく、「sidebar.php」のみを編集することで「最近の記事」と「アクセスが多かった記事」を表示します。

方法

sidebar.phpを編集します。

「最近の記事」の表示

「WP_Query()」を使用して記事の情報を取得します。「WP_Query()」は記事情報が集まったオブジェクトのようなものです。

関数リファレンス/WP Query – WordPress Codex 日本語版

サイドバー全体をリスト形式で表示するので「ul」を使用しています。

6行目」で「WP_Query()」用の設定を「$lat_args」変数に格納します。配列型にすることで、複数の設定を可能にします。ここでは一つの設定のみですが。

7行目」で「$lat_args」変数に表示件数を設定します。「’posts_per_page’」によって表示件数を設定できます。今回は5件にしました。

9行目」で「WP_Query()」クラスのオブジェクト(インスタンス)を作成し、「$lat_query」という変数に代入します。オブジェクトは「new」で作成します。オブジェクト指向でお馴染みですね。

11行目」で「最近の記事」をリストの一部として表示するため「li」を使用しています。

14行目」で「最近の記事」内の記事をリストとして表示するので「ul」を使用しています。

15行目」でループを使用して記事を表示します。「$lat_query」変数の記事がある限り、記事をループで表示し続けます。

16行目」で具体的な記事の表示を行いますが、この部分はソースが長くなることと、「アクセスが多かった記事」と同じ内容となるため別ファイルに分離しました。
分離した部分は「sidebarposts.php」という別ファイルにし、「get_template_part()」で読み込むようにしました。

19行目」の「wp_reset_postdata()」で「WP_Query()」で作成したオブジェクトをリセットします。

sidebarposts.phpの内容

記事のタイトル、サムネール、投稿日を表示しています。

「アクセスが多かった記事」の表示

これも「WP_Query()」を使用して記事の情報を取得します。「post__in」を使用して表示する記事を指定します。アクセス数はGoogle Analyticsのランディングページで調べました。

4行目」の「post__in」で表示する記事をページidで指定します。

5行目」の「orderby」で記事の並び順を指定します。「post__in」を指定することで、記述した順番で記事がソートされます。本当はテーマに固定的な値を記述したくありませんが、アクセス数などはWordPressでは取得できないので仕方ありません。

14行目」で「最近の記事」と同様、「sidebarposts.php」を「get_template_part()」で読み込むようにしました。

参考資料

参考図書

今回参考にした本は以下です。

基礎からのWordPress 改訂版 (BASIC LESSON For Web Engineers)
基礎からのWordPress 改訂版 (BASIC LESSON For Web Engineers)

以前も紹介した本です。共通部分を別ファイルにする部分はこの本を参考にしています。いろいろな実践的なテクニックやtipsが豊富で、お勧めです。

まとめ

ウィジェットを使用せずに、sidebar.phpのみでサイドバーをカスタマイズする方法を紹介しました。いろいろカスタマイズができるので、あなたもチャレンジしてみてはいかがでしょうか。


Top