人気記事の表示をJetpackの統計情報を利用したものへ変更してみる

WordPress Popular Posts(WPP) はサイトに人気記事リストを表示させるためのプラグインです。

その表示は美しく、設定も簡単です。
Simplicity2 テーマでは人気記事・新着記事を表示させるためには欠かせません。

しかしながらこのプラグインはサーバーに重い負荷を与えることでも有名みたいです。

また、WPP で作られた画像が WordPress で生成している画像とかぶってしまったりすると PageSpeedInsights などに指摘されることもあります。
参考：WordPress Popular Postでオリジナルのサムネイル画像を使う方法

今回はこの WordPress Popular Posts による人気記事の表示を Jetpack の統計情報を利用したものに替えてみようと思います。

1 人気の投稿とページ(Jetpack)の使い方
2 人気の投稿とページ(Jetpack)の設定
3 function.phpへの記述
4 画像リストのCSS
- 4.1 PC表示
- 4.2 モバイル表示

function.phpへの記述

画像リスト形式でそのまま表示すると画像がちっさくて可愛らしすぎです。
なのでまずは子テーマの function.php に下を記述して画像のサイズ出力を調整します。

//Jetpack人気記事リストの画像サイズ
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' );

コードの数字部分が画像サイズです。
WPP で出力させていたサムネイルサイズは 75px 。そのまま 75px を指定しても良いと思いますが、その場合少々画像が荒くなりました。

一度ちょっと大き目のサイズを指定してから CSS で整えると画質が良く仕上がります。
ですのでここでは 150px に指定してみました。

画像リストのCSS

次に CSS で見た目を整えます。
目的が代替なのでここでは Simplicity × WPP の見た目そっくりにしてみます。

下のコードを子テーマの style.css に貼り付けます。

/*---------------------------------
Jetpack人気記事(画像リスト)のデザイン
--------------------------------*/
.widgets-list-layout .widgets-list-layout-blavatar {
  border-radius: 1px;
  height: 75px !important;
  margin-bottom: 10px;
  margin-top: 3px;
  max-width: 75px !important;
  overflow: hidden;
  width: 75px !important;
}

.widgets-list-layout-links {
  float: none !important;
  overflow: hidden;
  width: auto !important;
}

.widgets-list-layout-links a {
  color: #555;
  display: inline-block;
  line-height: 130%;
  margin-left: 5px;
}

画像に角の丸みを指定しているborder-radius は入れても入れなくてもお好みで。

出来たものが下になります。

PC表示

モバイル表示

以上、人気記事リストを WPP から Jetpack による表示に替えるカスタマイズでした。
サーバー負荷も少なくなり高速化にも役立つと思います。

ご覧頂き、ありがとうございました。

人気記事の表示をJetpackの統計情報を利用したものへ変更してみる

人気の投稿とページ(Jetpack)の使い方

人気の投稿とページ(Jetpack)の設定

タイトル

表示する投稿の上限数( 10 件まで)

表示するページの種類

表示形式

テキストリスト

画像リスト

画像グリッド

function.phpへの記述

画像リストのCSS

PC表示

モバイル表示