【WordPress】最近の投稿にサムネイルをつける

WordPressでサイトを運営していて『最近の投稿』にサムネイルを付けたいと思う方は多いと思います。

しかし残念な事に『最近の投稿』ウィジェットにサムネイル画像を表示するオプションはありません（2024年2月時点）。
でも大丈夫、この記事ではfunctions.phpへ数行のコード追加するだけで、最近の投稿にサムネイルを付ける方法について共有します。

最近の投稿にサムネイルをつける
最近の投稿を出力している場所
CSSで見た目を整える
プラグインを使用する方法
Cocoonを使用している場合

最近の投稿にサムネイルをつける

早速ですが、WordPressの最近の投稿にサムネイル画像をつけるためのPHPコードを共有します。
こちらはfunctions.phpに記述してください。
※PHPファイルを触るのが不安という方は、後に紹介する『プラグインを使う方法』を利用する事をおすすめします。

// 最近の投稿を画像付きにする
function custom_recent_posts_title($title, $id){
    if( preg_grep('/class-wp-widget-recent-posts.php/', array_column(debug_backtrace(), 'file')) ){
        $thumb = get_the_post_thumbnail($id) ? : '<img src="'.get_template_directory_uri().'/lib/images/noimage.png">';
        $title = "<figure>$thumb</figure><p>$title</p>";
    }
    return $title;
}
add_filter('the_title', 'custom_recent_posts_title', 10, 2);

4行目でサムネイルがなければ代わりの『No Image』画像を使用するようにしているのですが、この画像はご自身で用意いただく必要があります。

最近の投稿を出力している場所

上記のコードは『class-wp-widget-recent-posts.phpでthe_title（またはget_the_titile）が呼び出されたら、元のタイトルにimgタグをつけて返す』というシンプルなものです。
class-wp-widget-recent-posts.phpは/wp-includes/widgets/配下にあります。

wp-includes配下は直接書き換えるべきではないので、add_filter関数を使ってfunctions.phpから書き換えているというわけになります。

CSSで見た目を整える

後はCSSで見た目をよしなに整えれば完了です。
こちらのスタイル例では、タイトルとサムネイルを横並びにしてサムネイルに枠線をつけています。

.widget_recent_entries a{
  display:flex;
  gap: 0 4%;
}
.widget_recent_entries figure{
  width: 38%;
  height: 65px;
  border: 2px solid #e3ddd7;
  border-radius: 5px;
  overflow: hidden;
}
.widget_recent_entries img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.widget_recent_entries p{
  width:58%;
}