Jetpackの人気記事のサムネイルサイズを自由に変更する方法

今回は、WordPressの有名なプラグインであるJetpack（ジェットパック）の機能にある「人気の投稿とページ」ウィジェットのサムネイル画像を好きなサイズに設定する方法を紹介します。

注意

※今回紹介する方法はPHPを少し弄ります。基本的にコピペで実装出来るように書いていきますが、テーマによってはバグや表示崩れが起きてくる可能性もあります。そのため実際の作業はバックアップをとってからにするようして下さい。

人気記事の設定場所
サムネイルに使用する画像サイズを指定
サムネイル画像のサイズ調整

サムネイルに使用する画像サイズを指定

上記でONにした「人気の投稿とページウィジェット」は、デフォルト状態では下記写真の様にサムネイルサイズが40×40pxの極小サイズが使用されています。これだとあまりにも小さすぎて正直ダサい印象です。
しかもサムネイル画像のサイズ設定などの欄は無いため、知識のない方はこの極小サムネイルのままでしか使用するしかないです。。

今回紹介する方法は、WordPressのfunction.phpに下記のコードを記載して、人気の投稿とページウィジェットの読み込む画像サイズを別のサイズに書き換えます。（コピペでOKです）

add_filter( 'jetpack_implode_frontend_css', '__return_false' );
function jeherve_custom_thumb_size( $get_image_options ) {
        $get_image_options['avatar_size'] = 150;
 
        return $get_image_options;
}
add_filter( 'jetpack_top_posts_widget_image_options', 'jeherve_custom_thumb_size' );

3行目の「150」の部分が読み込む画像のサイズです。
この場合は150×150pxのサイズの画像が呼び込まれます。

function.phpは上写真の辺りにあるかと思います。ただし子テーマを作成してそこに追記していくことをおすすめします。

サムネイル画像のサイズ調整

続いては、読み込んだ150×150pxの画像が実際に表示されるサイズの調整を行います。
この部分はCSSで調整します。（コピペOKです。）

「人気の投稿とページウィジェット」のサムネイル画像のCSSクラスは「.widget_top-posts .widgets-list-layout img.widgets-list-layout-blavatar」です。このクラスに対してプロパティ、値を付けていきます。

/* Jetpack人気記事サムネサイズ */
.widget_top-posts .widgets-list-layout img.widgets-list-layout-blavatar {
 max-width: 150px;
 width: 100%;
 margin-bottom: 10px;
}
.widgets-list-layout-links a {
 font-weight: bolder;
}
.widget_top-posts .widgets-list-layout li {
 border-bottom: 1px dotted #ccc;
 margin-bottom: 10px!important;
}

4行目の「max-width: 150px;」で先述のphpで呼び込む画像を最大の大きさとします。これを300とかにするとボヤけてしまいます。大きくしたい場合は先述のphpに記述した数値も大きくしてからにします。
9行目以降はおまけです。フォントサイズと下線を付けています。