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

白いシーツの上に並べられたレモン。輪切りにカットされたものも

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

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

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

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

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

スポンサーリンク

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

Jetpackの人気記事ウィジェットをサイドバーウィジェットに追加

ダッシュボード > 外観 > ウィジェット に移動。

利用できるウィジェットの一覧から人気の投稿とページ(Jetpack)ウィジェットを選択。
任意の場所に追加します。

WordPress Popular Posts を使っている場合は同プラグインを停止します。

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

Jetpack人気記事ウィジェットの設定が書かれている

タイトル

人気記事リストのタイトルを入力します。(例 人気記事)

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

半角数字を入力して表示する投稿の数を指定します。

統計情報は過去 24~48 時間以内のアクセス情報をもとに算出されています。デフォルトの設定では AMP ページからの流入は除外されています。
参考AMPページでもJetpackの統計情報を有効にする方法。ワードプレスでアクセス解析。

表示するページの種類

人気記事リストに含めたいページの種類を選択します。
投稿・固定ページ・メディアの3種類から選択することができます。

表示形式

リストの表示形式です。それぞれ以下のように表示されます。

テキストリスト

Jetpack人気記事ウィジェット。テキストリスト

画像リスト

Jetpack人気記事ウィジェット。画像リスト

画像グリッド

Jetpack人気記事ウィジェット。画像グリッド

私の場合はデザインを Simplicity × WPP による表示に近づけたかったため、ここでは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表示

人気記事リストが表示されている。PC表示

モバイル表示

人気記事リストが表示されているモバイル表示

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

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

スポンサーリンク
レクタングル大
レクタングル大