WordPress Popular Postsは、WordPressサイトに導入することで、訪問者にとって興味深いコンテンツを素早く発見できるようにするための便利なプラグインです。この記事では、WordPress Popular Postsプラグインの概要、機能、そして導入方法について詳しく説明します。
WordPress Popular Postsとは？
WordPress Popular Postsは、WordPressサイトの投稿やページの中から最も人気のあるコンテンツを自動的に抽出し、サイドバーに表示することができるプラグインです。このプラグインを使用することで、訪問者はサイト内で最も注目されているコンテンツに簡単にアクセスすることができます。また、人気のあるコンテンツを把握することで、今後のコンテンツ戦略の参考にもなります。
主な機能
カスタマイズ可能なウィジェット
WordPress Popular Postsプラグインは、サイドバーに表示されるウィジェットとして導入できます。ウィジェットの外観や表示する投稿の条件など、さまざまなカスタマイズが可能です。
集計期間の設定
集計期間を指定することで、過去24時間や過去1週間などの時間枠で最も人気のあるコンテンツを表示することができます。
カスタマイズ可能な出力
プラグインは、人気のある投稿を表示する際の出力形式をカスタマイズできる機能も提供しています。タイトルの長さや表示されるサムネイルのサイズなどを調整できます。
WordPress Popular Postsの導入方法
WordPress Popular Postsプラグインの導入は非常に簡単です。
WordPressの管理画面にログインし、「プラグイン」→「新規追加」をクリックしてください。
検索バーに「WordPress Popular Posts」と入力し、プラグインを検索。
表示後、「インストール」をクリックしてインストール完了後に「有効化」を行います。
プラグインが有効化されたら、「外観」→「ウィジェット」に移動し、WordPress Popular Postsをサイドバーなどに追加します。
ウィジェットの設定画面で、表示条件や出力形式などをカスタマイズし、変更を保存します。
各項目に関しての情報は下記の表を参照ください。
| タイトル | 人気記事一覧リストの上に表示されるタイトルを設定できる。 |
|---|---|
| 最大表示数 | 最大表示数を設定できる。 |
| ソート順 | ソート順を設定できる。（「コメント」「総閲覧数」「1日の平均閲覧数」の中から選択が可能。） |
| 時間の範囲 | 選択期間内に公開された投稿のみを表示できる。（「過去24時間」「過去1週間」「過去30日間」「全期間」「カスタム」の中から選択が可能。） |
| 投稿タイプ | 表示したい投稿タイプを指定できる。 |
| 除外する投稿 ID | 除外したい投稿のIDを入れることで、投稿一覧から除外することができる。（コンマ区切りにすることで複数の投稿の除外も可能。） |
| カテゴリー | カテゴリーIDを入れることで、そのカテゴリーの投稿のみを表示することができる。（コンマ区切りにすることで複数のカテゴリーの投稿を表示することが可能。また、IDの前にマイナス記号を付けてあげることで、そのカテゴリーの投稿を全て除外することができます。） |
| タグ | タグIDを入れることで、そのタグが付いた投稿のみを表示することができる。（コンマ区切りにすることで複数のタグの投稿を表示することが可能。また、IDの前にマイナス記号を付けてあげることで、そのタグの投稿を全て除外することができます。） |
| 投稿者 ID | 投稿者IDを入れることで、その投稿者が書いた投稿のみを表示することができる。 |
| タイトルを短縮 | タイトルを短縮することができる。 |
| 抜粋を表示 | 投稿記事の抜粋を表示できる。 |
| アイキャッチ画像を表示 | アイキャッチ画像を表示できる。 |
| コメント数を表示 | コメント数を表示することができる。 |
| 閲覧数を表示 | 閲覧数を表示できる。 |
| 投稿者を表示 | 投稿者を表示できる。 |
| 日付を表示 | 記事の公開日を表示できる。 |
| タクソノミーを表示 | カテゴリーかタグのどちらかを表示することができる。 |
| HTML マークアップ設定 | WordPress Popular Postsで出力されるタイトル前後のタグ（デフォルトではdivタグ）やリストタグ（デフォルトではulタグ）などを好きなタグに変更すること可能です。 |
| テーマ | あらかじめプラグインで準備されたスタイルを使って表示させることができます。 |
上記設定をお好みにカスタムし、SavedをクリックすればOKです。
動作確認
今回は下記画像の様に設定してみました。
| ①タイトル | タイトルを入力 |
|---|---|
| ②時間の範囲 | 過去1週間を選択 |
| タイトルを短縮 | タイトルを短縮にチェック（長さ上限はデフォルトのまま） |
| アイキャッチ画像を表示 | アイキャッチ画像を表示にチェック（規定サイズから選ぶから「thumbnail120」を選択） |
| 日付を表示 | 日付を表示にチェック（日付形式を「2024/04/17」を選択） |
それでは、実際にウィジェットの方で設定したものを見てみましょう。
下記の画像の様に問題なく表示されていればOKです。
ウィジェットの違いについて
お使いのテーマやプラグインの設定で「ブロックウィジェット」か「クラシックウィジェット」かの違いになります。
当ブログで利用しているテーマ「Cocoon」の場合は「クラシックウィジェット」ですね。
ちなみにですが、ブロックウィジェットですと下記画像の様に表示されますし、注意文は表示されませんでした。
基本設定
それで基本設定を確認していきましょう。
とは言え、複雑な設定はありません。
WordPressの管理画面から「設定 → WordPress Popular Posts」に進み、「ツール」をクリックします。
アイキャッチ画像
アイキャッチ画像の設定では、デフォルト画像や画像の取得元などの設定をすることができますが、特に設定する必要はありません。
ご自分の運営スタイルに合わせて設定していきましょう。
特にアイキャッチ画像を設定していない場合は、①のデフォルトのアイキャッチ画像にサムネイルを変更することをオススメします。
設定が完了した場合は「適用」をクリックしてください。
データの設定
データの設定では、アクセス数をどのように記録・保存するかかを設定できますが、ここもアイキャッチ画像の設定と同様にデフォルトのままでも問題ありません。
ただし、サイトのアクセス数や環境によってはサイトパフォーマンスにも影響することがあるので注意しましょう。
私の場合は「閲覧を記録する対象者」を「訪問者のみ」に変更し、「ログ上限」を「無効」から「データ保存期間にし日数を30日」に設定。
その他
リンクの開き方やプラグインのスタイルシートを使うかの設定ができます。
こちらも同様にデフォルトのままでも問題ありません。
参考
設定に関してはWEBST8様の方で細かく紹介されておりますので是非ご参照ください！
ショートコードでの設定
前にクラシックウィジェットは2024年6月頃に行われるアップデートで廃止させる旨を書きましたが、ではクラシックウィジェットをメインとして利用してるテーマの場合はどうしたら良いでしょうか？
答えは簡単で、ショートコードを利用すれば、同様にランキングを掲載することが可能になります。
実際当ブログの右カラムにあるランキングはショートコードを利用して表示させています。
ざっくりとコードを書くとこんな感じです。
[wpp range="weekly" limit=5 title_length=35 stats_views=0 thumbnail_width='120' thumbnail_height='65']range=”weekly” は 「過去1週間」で、limit=5は「表示件数」、title_length=35は「タイトルの文字」数、stats_views=0は「ビュー数を非表示」、そして最後のthumbnail_width=’120′ thumbnail_height=’65’は「サムネイル（アイキャッチ）を幅120px、高さ65ピクセルで表示」という意味になります。
その他に利用できるパラメータはGitHubの方に詳しく掲載されておりますので、そちらをご確認ください。
参照 2. Template tags · cabrerahector/wordpress-popular-posts Wiki · GitHub
ショートコードの設置方法
外観→ウィジェットに移動し「ブロック」を選択。掲載したい箇所を選んで「ウィジェットを追加」をクリック。
追加した「ブロック」にショートコードを入力し「Save」をクリックすれば完了です。
CSSでの調整
WordPress Popular PostsはCSS(スタイルシート)でもランキングのデザインを調整することが可能です。
当ブログではほんの少し調整することで、順位数を表示させたりデザインを整えたりしています。
以下、参考のCSSとなります。
/* ランキング */
ul.wpp-list li {
position:relative;
counter-increment: popular-post-counter;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
ul.wpp-list li::before {
content: counter(popular-post-counter) ;
position: absolute;
margin-right: 5px;
width: 30px;
height: 30px;
display: block;
background-color: cadetblue;
text-align: center;
color: white;
}
/* 順位による背景色の変更 */
ul.wpp-list li:nth-of-type(1)::before { // 1位の場合
background-color:#c3a127;
}
ul.wpp-list li:nth-of-type(2)::before { // 2位の場合
background-color:#9daaaf;
}
ul.wpp-list li:nth-of-type(3)::before { // 3位の場合
background-color:#7a7150;
}
ul.wpp-list li:nth-of-type(n+4)::before { // それ以降の順位の場合
background-color:#dce1e2;
color: #333;
}
/* 以下レイアウトの調整 */
ul.wpp-list li a {
padding: 0px;
width: 35%;
color:#69788a;
}
.wpp-thumbnail {
margin: 0 ;
}
ul.wpp-list li a:hover {
background-color:transparent;
text-decoration:underline;
}
.wpp-post-title {
width: 60%!important;
line-height: 1.3;
font-size: 90%;
}サンプル
紹介したショートコードとCSSを利用すると下記画像の様になります。
文字数が設定した数字よりも多い場合は「…」と表示ます。
また、アイキャッチの左上に順位が掲載され、順位毎の背景色（金・銀・銅・グレー）にななります。
まとめ
今回は人気記事を表示することができるプラグイン「WordPress Popular Post」を紹介させて頂きました。
人気の記事を表示することで訪問されたユーザーは表示された人気のある投稿やページに簡単にアクセスできるようになりますし、サイトの訪問者がより興味深いコンテンツを見つけやすくなり、サイトの利便性が向上するかと思いますので、検討してみてはいかがでしょうか？
今回は以上となります。
ご覧いただきありがとうございました。また次回！
追記
サイドバー以外にも固定ページや記事にもランキングを追加することも出来ます。
この場合は、投稿画面の「ブロック」から「人気記事」を選択すると良いでしょう。
下記にサンプルとして掲載しましたのでご確認ください！
人気記事ランキング！
