ワードプレスサイトでウィジェットや記事下などに、人気記事ランキングを表示する事が可能なプラグイン、WordPress Popular Postsの導入方法やサイトが重くなりすぎないように軽量化をする設定方法、クラシックエディタで警告が出ないようにショートコードで埋め込む方法をご紹介します。
記事内の目次
ワードプレスで人気記事ランキングを表示するプラグイン WordPress Popular Posts
WordPress Popular Postsのダウンロード
ワードプレスサイトに人気記事を表示するプラグインは、有料無料含めて数種類ありますが、最も設定が分かりやすくて最も表示が美しいプラグインが、WordPress Popular Postsだと思います。
導入時はウェブページのウィジェットや記事下に導入する事が多いと思いますが、ページに溶け込みながら人気記事を目立たせてサイト全体の回遊率を上げる事が出来るデザインであると感じております。
プラグインのダウンロードはWordPress.orgプラグインページからもダウンロードが可能ですが、新規プラグインを追加からも「WordPress popular posts」で検索をして、ワードプレスサイトにインストールをする事が出来ます。
似たようなプラグインの名前もありますが、作者がHector Cabreraになっているのが今回紹介するWordPress Popular postsになっておりますのでお間違いのないように。
インストールが完了したら有効化にして、設定をしておきましょう！
WordPress Popular Postsが軽量になる設定
人気記事ランキングを表示するプラグインは数種類ある事を前述しておりましたが、その中でも動作が重いと言われたWPPは、PageSpeed insightsのスコアが下がってSEO的にも良くないプラグインと言われていた時期もありました。
見切りをつけたサイト管理者はSimple GA Rankingなどの、より軽量なプラグインの導入に踏み切っていたと思いますが、デザインの良さやカスタマイズ性の良さから継続して使用しています。
最近のバージョンアップまでは動作が重いと言われていたWordPress Popular Postsですが、設定次第ではより軽量なプラグインと変わらないような動作をするようになりましたので、その設定方法についてご紹介します。
アイキャッチ画像の設定
- デフォルトのアイキャッチ画像 | 公開しているウェブページにアイキャッチ画像を表示していない時に、代替えとなるデフォルトの画像を設定する項目です。 全てのページでアイキャッチ画像を掲載しているので何も表示しない設定のままにしました。
- 画像の取得元 | 本文中の最初の画像や最初の添付ファイルからも取得できるような選択が可能ですが、ほとんどの方はデフォルト設定のアイキャッチ画像を取得する設定が望ましいと思います。
- Lazy Load | WordPress Popular Postsで表示している画像を遅延読み込み(lazy load)にする設定ですので、ページのファーストビューに表示している時以外は「はい」に設定しておくと、読み込みが早くなります。
データの設定
- 閲覧を記録する対象者 | 訪問者のみ・ログイン中のユーザーのみ・全員から設定が可能ですが、全員にしてしまうとアクセスがあった全てを記録してしまう事になりますので、訪問者のみに設定しておくと良いでしょう。
- ログ上限 | アクセスログを保存する期間を設定する項目になっていますが、設定した日数を超えたデータは全て自動的に削除される項目です。 特に変化は無かったので30日に設定をしておきました。
- Load Popular posts list via AJAX | WordPressの表示をを高速化するキャッシュプラグインを導入している場合は、キャッシュ済みデータから読み込みを行う設定です。 プラグインを導入していなければ無効化されますが、Xサーバーのキャッシュ機能でも効果があるかもしれないので有効に設定しています。
- データキャッシュ | 記事の人気リストをキャッシュする設定なので、ページ数が多かったりアクセスが多いサイトは「キャッシュする」に設定をすると表示の高速化が見込めます。
- キャッシュ更新間隔 | キャッシュの更新間隔を長くしすぎてしまうと、最新のランキングがなかなか反映されなくなってしまいますので、1時間から数時間に設定をしておくのが良いでしょう。
- データサンプリング | デフォルトでは、WordPress Popular Posts はすべてのサイト訪問を毎回データベースへ保存します。一般的な小〜中規模サイトでは問題はありませんが、大規模またはアクセスが多いサイトではデータベース書き込みの連続によりパフォーマンスに影響が出る可能性があります。データサンプリングを有効化すると、WordPress Popular Posts はアクセスの一部のみを保存し、そこから見られる傾向をレポートします。
- サンプル率 | データサンプリングと併せて設定する項目で、このサイトでは10に設定しています。 115PVのアクセスがあったとすると、アクセス数の表示は110PVのままで120PVのアクセスに達したら、表示が120PVになるような設定です。 アクセス数が少ないうちは、1や2でも良いですが、1つのページへのアクセスが3桁以上に増えたら、数字の値を増やして、更新頻度を減らす事によりウェブサイトの動作を軽くすることが可能です。
その他
- リンクの開き方 | ブラウザで開いているページを更新して人気記事でリンクしているページを表示するか、現在のページはそのままで、別のウィンドウや新しいタブで表示するかを設定変更できる項目です。
- プラグインのスタイルシートを使う | プラグインにはデフォルトで wpp.css という名称のスタイルシートが含まれており、人気の投稿をリスト表示するために使えます。もし自分のスタイルシートを使いたい場合や、サイトの head セクションにデフォルトスタイルシートを含めたくない場合はこちらを使ってください。
- Enable experimental features | 実験的な機能を使うかどうかの設定ですので、チェックは外しておきましょう
ウィジェットや記事下への貼り方
以前はウィジェットなどにWprdPress Popular Postsをのウィジェットをドラッグ&ドロップして、設定をするだけで使用が出来ていましたが、ブロックエディターの登場により設定の仕方が変わり、クラシックエディターでは警告文の下に今までの人気記事が表示されるようになりました。
その警告文の全文がこちら！
Important notice for administrators: The WordPress Popular Posts “classic” widget is going away!
This widget has been deprecated and will be removed in version 7.0 to be released sometime around June 2024. Please use either the WordPress Popular Posts block or the wpp shortcode instead.
これを翻訳してみました。
管理者への重要なお知らせ: WordPress Popular Posts の「クラシック」ウィジェットは廃止されます。
このウィジェットは非推奨となり、2024 年 6 月頃にリリースされるバージョン 7.0 で削除される予定です。代わりに WordPress Popular Posts ブロックまたは wpp ショートコードを使用してください。
WordPress本体は、現在もクラシックエディタで記事を更新する事は可能なのですが、WordPress Popular Postsはクラシックエディタに非対応となりましたので、ショートコードを貼って表示のカスタマイズをしなくてはいけなくなりました。
このウェブサイトで表示しているWordPress Popular postsのショートコードはウィジェットでブロックを選択し、以下のショートコードを貼って表示しています。
[wpp header='よく読まれている人気記事ランキング' limit='15' title_length=40 range=’last7days’ order_by=’views’ thumbnail_width='120' thumbnail_height='115' stats_views=0 stats_category=1 ]
[wpp]だけでも、表示はされるのですが、サムネイルの表示や表示数などをカスタマイズしないと、綺麗な表示にはなりませんのでご注意下さい。
WordPress popular Postsでよく使うパラメーター一覧
| パラメータ | 内容 | 入れる事が出来る値 | デフォルト設定値 | 使用例 |
| ajaxify | AJAX 読み込みを有効/無効にする | 1 (有効)、0 (無効) | 1 | [wpp ajaxify=0] |
| header | リストの見出しを設定します | テキスト文字列 | None | [wpp header=’見出し’] |
| header_start | リストの見出しの開始タグを設定します | テキスト文字列 | <h2> | [wpp header='Popular Posts' header_start='<h3>' header_end='</h3>'] |
| header_end | リストの見出しの終了タグを設定します | テキスト文字列 | </h2> | [wpp header='Popular Posts' header_start='<h3>' header_end='</h3>'] |
| limit | リストに表示される人気投稿の最大数を設定します | 正の整数 | 10 | [wpp limit=3] |
| range | WordPress Popular Postsに、指定した時間範囲内で最も人気のある投稿を取得するように指示します。 | last24hours, last7days, last30days, all, custom | last24hours | [wpp range=’last7days’] |
| time_quantity | カスタム時間範囲の時間単位数を指定します | 正の整数 | 24 | [wpp range='custom' time_quantity=1 time_unit='hour'] |
| time_unit | カスタム時間範囲の時間単位を指定します | minute, hour, day, week, month | hour | [wpp range='custom' time_quantity=1 time_unit='hour'] |
| freshness | WordPress Popular Postsに、指定した時間範囲内で公開された最も人気のある投稿を取得するように指示します。 | 1 (true), 0 (false) | 0 | [wpp range=’last7days’ freshness=1] |
| order_by | 人気投稿の並び替えオプションを設定します | comments, views, avg (for average views per day) | views | [wpp order_by=’comments’] |
| post_type | リストに表示する投稿の種類を定義します | テキスト文字列 | post | [wpp post_type=’post, page, my-custom-post-type’] |
| pid | 設定されている場合、WordPress の人気投稿は指定された投稿 ID をリストから除外します。 | テキスト文字列 | None | [wpp pid='60, 25, 31'] |
| cat | 設定されている場合、WordPress の人気投稿は指定されたカテゴリ ID に属するすべてのエントリを取得します。マイナス記号を使用すると、代わりにカテゴリに関連付けられたエントリが除外されます。 | テキスト文字列 | None | [wpp cat='1, 55, -74'] |
| taxonomy | 設定すると、WordPress Popular Posts は特定の分類法で投稿をフィルタリングします。複数の分類法でフィルタリングする場合は、セミコロン (;) を使用して複数の分類法とその用語 ID を区切ります。 | テキスト文字列 | None | [wpp taxonomy='post_tag' term_id='118, 75, 15']
[wpp taxonomy='category; post_tag' term_id='1, 55, -74; 118, 75, 15'] |
| term_id | 設定すると、WordPress の人気投稿は指定された用語 ID に属するすべてのエントリを取得します。マイナス記号を使用すると、代わりに用語に関連付けられたエントリが除外されます。 | テキスト文字列 | None | [wpp taxonomy='category' term_id='1, 55, -74'] |
| author | 設定すると、WordPress Popular Posts は指定された著者 ID によって作成されたすべてのエントリを取得します。 | テキスト文字列 | None | [wpp author='1, 7'] |
| title_length | WordPress Popular Postsを設定すると、投稿タイトルの長さが最大N文字に制限されます。 | 正の整数 | 25 | [wpp title_length=35] |
| title_by_words | 1に設定すると、 WordPress Popular Postsは投稿タイトルの長さを文字数ではなくN語までに制限します。 | 1 (true), 0 (false) | 0 | [wpp title_length=10 title_by_words=1] |
| excerpt_length | 設定すると、WordPressの人気投稿は最大N文字の抜粋を表示します。 | 正の整数 | 0 | [wpp excerpt_length=55 post_html='<li>{title} <div class="wpp-excerpt">{excerpt}</div></li>'] |
| excerpt_by_words | 1に設定すると、WordPress Popular Postsは抜粋をN語（文字数ではなく）に短縮します。 | 1 (true), 0 (false) | 0 | [wpp excerpt_length=25 excerpt_by_words=1 post_html='<li>{title} <div class="wpp-excerpt">{excerpt}</div></li>'] |
| excerpt_format | WordPress Popular Postsを設定すると、抜粋にあるすべてのスタイルタグ（太字、斜体など）とハイパーリンクが維持されます。 | 1 (true), 0 (false) | 0 | [wpp excerpt_length=55 excerpt_format=1 post_html='<li>{title} <div class="wpp-excerpt">{excerpt}</div></li>'] |
| thumbnail_width | 設定され、現在のサーバー構成で許可されている場合、投稿のサムネイルを表示できるようになります。この属性はサムネイルの幅を設定します。 | 正の整数 | 0 | [wpp thumbnail_width=100 thumbnail_height=75] |
| thumbnail_height | 設定され、現在のサーバー構成で許可されている場合、投稿のサムネイルを表示できるようになります。この属性はサムネイルの高さを設定します。 | 正の整数 | 0 | [wpp thumbnail_width=100 thumbnail_height=75] |
| rating | WP-PostRatingsプラグインがブログにインストールされ有効になっている場合、WordPress Popular Postsは訪問者があなたの投稿をどのように評価しているかを表示します | 1 (true), 0 (false) | 0 | [wpp rating=1 post_html='<li>{title} <div class="wpp-rating">{rating}</div></li>'] |
| stats_comments | WordPress Popular Postsを設定すると、指定された期間内に各人気投稿に寄せられたコメント数が表示されます。 | 1 (true), 0 (false) | 0 | [wpp stats_comments=1] |
| stats_views | WordPressの人気投稿を設定すると、指定された期間内に各人気投稿が何回閲覧されたかが表示されます。 | 1 (true), 0 (false) | 1 | [wpp stats_views=0] |
| stats_author | WordPress Popular Postsを設定すると、各投稿の下に著者名が表示されます。 | 1 (true), 0 (false) | 0 | [wpp stats_author=1] |
| stats_date | WordPressの人気投稿を設定すると、各投稿の公開日が表示されます。 | 1 (true), 0 (false) | 0 | [wpp stats_date=1] |
| stats_date_format | 日付の形式を設定します | テキスト文字列 | ‘F j, Y’ | [wpp stats_date=1 stats_date_format='Y-m-d'] |
| stats_category | 設定すると、WordPressの人気投稿は各エントリに関連付けられたカテゴリを表示します。 | 1 (true), 0 (false) | 0 | [wpp stats_category=1 post_html='<li>{title} {category}</li>'] |
| stats_taxonomy | 設定すると、WordPressの人気の投稿は各エントリに関連付けられた分類を表示します。 | 1 (true), 0 (false) | 0 | [wpp taxonomy='post_tag' stats_taxonomy=1 post_html='<li>{title} {taxonomy}</li>'] |
| wpp_start | リストの開始タグを設定します | テキスト文字列 | <ul> | [wpp wpp_start='<ol>' wpp_end='</ol>'] |
| wpp_end | リストの終了タグを設定します | テキスト文字列 | </ul> | [wpp wpp_start='<div>' wpp_end='</div>'] |
| post_html | 各投稿のHTML構造を設定します | テキスト文字列 | <li>{thumb} {title} <span class=”wpp-meta post-stats”>{stats}</span></li> | [Wpp thumbnail_width=100 thumbnail_height=75 post_html='<li>{thumb} <a href=”{url}”>{text_title}</a></li>’] |
当ウェブサイトではTCD標準の新着記事表示のサムネイル画像との統一感を出すために、サムネイルの幅と高さも指定していますが、何かと統一したいサイズがあればサムネイルサイズを指定するのが良いでしょう。
タイトルを「よく読まれている人気記事ランキング」とし、7日間の閲覧回数で集計した上位15記事を、タイトル文字数40文字以内サムネイルサイズ120×115で指定してカテゴリも表示したWP Popular Postsのショートコードは以下のようになります。
よく読まれている人気記事ランキング
軽量で綺麗に表示されるWordpress popular Postsのオススメ設定ですので、是非利用してみて下さい！
Youtubeチャンネルでは、日本国内各地の美しい四季の風景、ネイチャービデオ、花火大会やイベント・お祭り等、クリスマスイルミネーションや夜景、星景タイムラプス映像、Vlog、飛行機や新幹線などの乗り物等の映像をライブラリー化し、世界各地に発信しております。
また、不定期で花火大会やイベントのライブ配信も実施中！
下のYouTubeアイコンからチャンネルを表示していただき、チャンネル登録後に通知をオンにしていただくとライブ配信の通知が受け取れます！
もちろん動画URLや埋め込みタグを使用したウェブサイトへの埋め込みやSNSでのシェアもOKです！
この記事へのコメントはありません。