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

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

その表示は美しく設定も簡単です。何かとお世話になる方も多いのではないでしょうか。
特に Simplicity2 テーマでは人気記事・新着記事を表示させるためには欠かせません。

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

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

今回はこの WPP による人気記事の表示を Jetpack の統計情報を利用したものに替えてみます。
Simplicity2 の人気記事リストに近づけたデザインで作成してみました。

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

Jetpackの機能設定

Jetpack による人気記事の表示を行うためには、まず Jetpack の「サイト統計情報」と「追加サイドバーウィジェット」機能を有効にする必要があります。

有効にするには

ダッシュボード＞ Jetpack ＞設定

プラグインページに移動したら、ページの一番下「デバッグ」をクリックします。

Jetpack デバッグセンターページから

「お使いのサイトで使用可能な Jetpack モジュールの全一覧にアクセスします。」リンクをクリック。

移動先のページで Jetpack プラグイン機能の ON / OFF を切り替えることができます。
ここで「サイト統計情報」と「追加サイドバーウィジェット」が有効になっていることを確認します。

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 は入れても入れなくてもお好みで。

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