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

WordPress

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

注意

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

人気記事の設定場所

Jetpack(ジェットパック)の人気記事のウィジェットの表示はJetpack(ジェットパック)の設定執筆の部分にあります。

執筆の部分のウィジェットの欄にある「購買フォームやTwitterストリームなどの追加ウィジェットがサイトで使用可能に」のチェックをONにします。

WordPressのウィジェットに「人気の投稿とページ」が現れます。これがJetpack(ジェットパック)の人気記事ウィジェットです。

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

上記で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行目以降はおまけです。フォントサイズと下線を付けています。

上記の写真が、変更後の実際のサムネイル画像の見え方です。


以上が「Jetpackの人気記事のサムネイルサイズを自由に変更する方法」でした。

Jetpack(ジェットパック)の数々ある機能の中でも使用者も多く有能な機能かと思います。ただし画像サイズが極端に小さくて使い勝手はイマイチと思ってました。今回紹介した方法を使えば、その短所も拭えるでしょう。

2020年4月26日WordPressPlugin,WEB,WP

Posted by KT