サイトに人気記事リストを表示させるためのプラグインに WordPress Popular Posts(WPP) があります。
その表示は美しく設定も簡単です。何かとお世話になる方も多いのではないでしょうか。
特に Simplicity2 テーマでは人気記事・新着記事を表示させるためには欠かせません。
しかし、このプラグインはサーバーに重い負荷を与えることでも有名みたいです。
また、WPP で作られた画像が WordPress で生成している画像とかぶってしまったりすると PageSpeedInsights などに指摘されることもあります。
参考:WordPress Popular Postでオリジナルのサムネイル画像を使う方法
今回はこの WPP による人気記事の表示を Jetpack の統計情報を利用したものに替えてみます。
Simplicity2 の人気記事リストに近づけたデザインで作成してみました。
目次
Jetpackの機能設定
Jetpack による人気記事の表示を行うためには、まず Jetpack の「サイト統計情報」と「追加サイドバーウィジェット」機能を有効にする必要があります。
有効にするには
ダッシュボード > Jetpack > 設定
プラグインページに移動したら、ページの一番下「デバッグ」をクリックします。
Jetpack デバッグセンターページから
「お使いのサイトで使用可能な Jetpack モジュールの全一覧にアクセスします。」リンクをクリック。
移動先のページで Jetpack プラグイン機能の ON / OFF を切り替えることができます。
ここで「サイト統計情報」と「追加サイドバーウィジェット」が有効になっていることを確認します。
人気の投稿とページ(Jetpack)の使い方
ダッシュボード > 外観 > ウィジェット に移動。
「利用できるウィジェット」覧から人気の投稿とページ(Jetpack)ウィジェットを選択。
任意のウィジェットエリアに追加します。
WordPress Popular Posts を使っている場合は同プラグインを停止します。
人気の投稿とページ(Jetpack)の設定
タイトル
人気記事リストのタイトルを入力します。(例 人気記事)
表示する投稿の上限数( 10 件まで)
半角数字を入力して表示する投稿の数を指定します。
統計情報は過去 24~48 時間以内のアクセス情報をもとに算出されています。デフォルトの設定では AMP ページからの流入は除外されています。
参考:AMPページでもJetpackの統計情報を有効にする方法。ワードプレスでアクセス解析。
表示するページの種類
人気記事リストに含めたいページの種類を選択します。
投稿・固定ページ・メディアの3種類から選択することができます。
表示形式
リストの表示形式です。それぞれ以下のように表示されます。
テキストリスト
画像リスト
画像グリッド
私の場合はデザインを 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表示
モバイル表示
以上、人気記事リストを WPP から Jetpack による表示に替えるカスタマイズでした。
サーバー負荷も少なくなり高速化にも役立つと思います。
ご覧頂き、ありがとうございました。