WordPress

WordPressで画像入り「最近の投稿」ウィジェットを作る

「最近の投稿」を画像入りにしたいんですよ

せっかくアイキャッチ画像設定してるので、最近の投稿一覧も画像入りにできればなと。
プラグインで実現する方法もありますが、大した手間じゃないので自作ウィジェットでやります。

この記事はWordPressバージョン3.8.1の時点で書いています。
将来のバージョンではファイルや行番号などが変わっているかもしれません。

ウィジェット作成の流れ

概要

WordPressに標準で入っているウィジェットと同じような機能のを作るなら、そのコードを流用したほうが早いです。
今回は画像を追加で表示させたいので、既定の「最近の投稿を表示」ウィジェットを改造して対応します。

作成手順

1.既定のウィジェットから改造するコードを入手

まずは既定のウィジェットが格納されている[WPのルート/wp-includes/default-widgets.php]を開き、533~628行の「WP_Widget_Recent_Posts」クラスのコードをコピー。
編集する必要があるので、一旦空のテキストエディタに貼り付け。

2.オブジェクト名を新しいものに修正

新しいウィジェットとするため、クラス名やキャッシュ名などを下記のように単語単位で置換。

  • 「WP_Widget_Recent_Posts」を「Monodamono_Recent_Posts」に置換
  • 「recent-posts」を「monodamono-recent-posts」に置換
  • 「widget_recent_entries」を「monodamono_recent_entries」に置換
  • 「widget_recent_posts」を「monodamono-recent-posts」に置換

3.ウィジェット名の設定

コンストラクタの2行目にあるウィジェット名のところを「ものだもの : 画像付き最近の投稿」に書き変え。
多言語対応するわけじゃないんで「__()」は外した。

4.画像表示コードの追加

アイキャッチ画像出力は[get_the_post_thumbnail]関数で出力できる。
サイズは160px矩形に収まるように設定。第1引数は自動的に投稿IDが参照されるnullでOK。

これを投稿リンクを表示しているところに追記。

5.ウィジェット登録処理の追加

コードの一番最後にウィジェットを登録するコードを追加。

これでコードは出来上がりです。

適用方法

修正したコードを子テーマの[functions.php]に追加して終了。
追加するコードの全体はこうなりました。

ウィジェット設定

子テーマに追記した時点でウィジェット一覧に追加されているので、それを設定するだけ。

image

設定は「最近の投稿」と同じです。
これでアイキャッチ画像入りでリンクが表示されるようになります。

後記

同じようなウィジェットを提供するプラグインもあるんですが、以前カスタマイズだけで実現したこともあるのでコードを書いてみました。
こうして記事化することで修正パターンの覚書を残すという意味もあります。

画像サイズを設定で変えられるようにしたり、ランダム表示などの機能を追加すればより汎用性は増すかと思います。
画像とリンク文字の間も改行ではなくCSSを適用しやすい形に変えるのも良いかもしれません。どちらもspanで囲ってCSSで配置を設定するとか。

とりあえず目的のものができたのでここまでとします。