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

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

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

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

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

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

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

スポンサーリンク

Jetpackの機能設定

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

有効にするには

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

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

jetpackプラグインページ最下部「デバッグ」に赤いチェックマークがついている

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

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

Jetpackデバッグセンター概要テキスト

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

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 による表示に替えるカスタマイズでした。
サーバー負荷も少なくなり高速化にも役立つと思います。

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

スポンサーリンク
レクタングル(大)広告
レクタングル(大)広告