2021年版：WordPressで人気記事を表示する方法【WordPress Popular Posts】

主にブログなどで見かけることの多い「人気記事一覧」ですが、WordPressならプラグインを使って簡単に表示することができます。

今回は、WordPress Popular Postsを使ってサイドバーや固定ページに人気記事一覧を表示する方法をご紹介したいと思います。

INDEX

WordPressで人気記事を表示する方法
WordPress Popular Postsをインストールする
WordPress Popular Postsの基本設定
サイドバーに人気記事一覧を表示する
固定ページに人気記事一覧を表示する
- WordPress Popular Postsのブロックを利用する方法
- WordPress Popular Postsのショートコードを利用する方法
WordPress Popular Postsのパラメータ一覧
CSSでデザインをカスタマイズする
「まだデータがありません」と表示される場合
その他のWordPressのおすすめ情報

WordPressで人気記事を表示する方法

WordPressには、標準で人気記事を表示する機能が用意されていません。そのため、テーマファイルを編集するか、プラグインを使って人気記事を表示するなどの選択肢がありますが、初心者の方はプラグインを使う方法がおすすめです。

WordPressで人気記事を表示するプラグインはいくつかありますが、おすすめのプラグインは「WordPress Popular Posts」というプラグインです。

WordPress Popular Postsは、定期的にメンテナンスされていて最新のWordPressでも対応しており、利用者数も多いのでWeb上にドキュメントがたくさん公開されています。

下記に、WordPress Popular Postsを使って「サイドバー」と「固定ページ」に人気記事ランキングを表示する方法をご説明していきます。

WordPress Popular Postsをインストールする

まずは、プラグインの新規追加から、「WordPress Popular Posts」をインストール、有効化してください。

似たような名称のプラグインも公開されているので、間違えないようにしましょう。

WordPress Popular Postsの基本設定

WordPress Popular Postsを有効化すると、設定画面に項目が追加されます。

「設定」→「WordPress Popular Posts」→「ツール」

を選択すると、下記のような設定画面が表示されます。

ここでは、画像の取得元やキャッシュの設定、データ収集の対象を設定したり、データのクリアなどを行うことができます。

基本的には初期設定のままで問題ありませんが、必要に応じて変更する場合はここで設定するようにしましょう。

サイドバーに人気記事一覧を表示する

サイドバーに人気記事一覧を表示する場合は、WordPress Popular Postsのウィジェットを利用して表示しましょう。

まず、WordPressの設定画面から

「外観」→「ウィジェット」

を選択してください。

ウィジェット設定画面が表示されるので、「サイドバー」のフィールドの中に、「WordPress Popular Posts」というウィジェットを追加します。（テーマによってはサイドバーの設定が複数あったり、名称が異なる場合があります。）

すると、下記のようにウィジェットが追加され、パラメータの設定が表示されます。

それぞれのパラメータを入力し、ウィジェットの設定を更新すると下記のようにウィジェットに人気記事が表示されるようになります。

パラメータの内容や設定方法については、下記にご紹介しているので参考にしてみてください。

固定ページに人気記事一覧を表示する

固定ページに人気記事一覧を表示する場合は、ブロックエディタかクラシックエディタかによって方法が異なります。お使いのWordPressのエディタに合わせた方法を利用するようにしてください。

WordPress Popular Postsのブロックを利用する方法

ブロックエディタ（Guternberg）を利用している方は、WordPress Popular Postsのブロックを使って人気記事一覧を表示することができます。

まずは固定ページの作成画面へ移動し、新規ブロックの追加から、「WordPress Popular Posts」のブロックを固定ページに追加しましょう。

ブロックを追加すると、ウィジェットの場合と同様にパラメータの設定が表示されるので、任意の値を設定してください。

あとは、固定ページを公開すると下記のような人気記事一覧ページを作成することができます。

デザインをカスタマイズしたい場合は、下記でご紹介しているCSSでのスタイリングに関する説明を参考にしてみてください。

WordPress Popular Postsのショートコードを利用する方法

クラシックエディタを利用している場合は、ショートコードを使って人気記事一覧を表示するようにしましょう。

ショートコードを利用する場合は、固定ページ編集画面の中でモードを「テキストエディタ」に切り替えて、下記のように記述します。





 【2023】おしゃれな配色パターンが見つかる！カラーパレット人気ツール28個まとめ 26件のビュー
 【2023】無料で使えるフリーアイコン素材サイト25個まとめ【商用利用OK】 6件のビュー
 【2023】無料で商用利用可能！フリー画像・写真素材サイトのおすすめ12選 5件のビュー
 【2023】ほんとに無料？フリーイラスト素材サイト33個まとめ【商用利用OK】 4件のビュー
 流体シェイプを使ったWebデザインの魅力と参考になるサイト 2件のビュー
 2022年版：おすすめのWebアイコンフォントサービス10選 2件のビュー
 初心者が独学でWebデザインを勉強するための学習ガイド 2件のビュー
 Web制作者必見！VSCodeのおすすめ拡張機能15個まとめ 1件のビュー
 無料で使える！Font Awesome 6 の導入手順まとめ 1件のビュー
 SketchとInVisionを使って爆速でプロトタイプを作成する方法 1件のビュー

これだけで人気記事を表示することはできるのですが、次のようにパラメータを指定してブロックエディタの場合と同様に表示内容をカスタマイズすることができます。





 【2023】おしゃれな配色パターンが見つかる！カラーパレット人気ツール28個まとめ 
 【2023】無料で使えるフリーアイコン素材サイト25個まとめ【商用利用OK】 
 【2023】無料で商用利用可能！フリー画像・写真素材サイトのおすすめ12選 
 【2023】ほんとに無料？フリーイラスト素材サイト33個まとめ【商用利用OK】 
 流体シェイプを使ったWebデザインの魅力と参考になるサイト

上記のほかにも、ブロックエディタと同様のオプションが用意されていて、それぞれ使い方や例などは下記のページで紹介されています。

WordPress Popular Postsのパラメータ一覧

WordPress Popular Postsのウィジェットやブロック、ショートコードで利用可能なパラメータについてご説明していきます。

Limit

人気記事をリストに表示する件数を設定します。画面サイズに限りがあるので、10件程度を上限に設定しておくといいと思います。

Time Range

Time Rangeは、人気記事の集計期間を設定する項目です。例えば、「Last 7 days」を選択すると、過去7日間の人気記事ランキングが表示されます。

選択肢は下記の通り。

Last 24 Hours（24時間）
Last 7 days（7日間）
Last 30 days（30日間）
All Time（全期間）
Custom（指定の期間）

Post Type

人気記事に表示する投稿タイプを選択します。通常の投稿だけであれば、「post」と入力されていれば問題ありません。カスタム投稿タイプを含める場合や、カスタム投稿タイプのみを表示させたい場合はここを編集しましょう。

Post ID(s) to exclude

ランキングから除外したい投稿がある場合は、ここにIDを入力します。複数ある場合は、カンマ区切りで入力することができます。

Author ID(s)

投稿者を限定して人気記事を表示したい場合は、ここにIDを入力します。

カテゴリー

カテゴリーを限定して人気記事を表示したい場合は、ここにIDを入力します。

タグ

タグを限定して人気記事を表示したい場合は、ここにIDを入力します。

Shorten title

チェックを入れると、タイトルが長い場合に省略することができます。

Display post excerpt

チェックを入れると、投稿の抜粋を表示することができます。ここは見づらくなってしまうため、チェックは外しておいた方が良いでしょう。

Display post thumbnail

チェックを入れると、リストに投稿のサムネイルを表示することができます。サムネイルがあると、見た目が華やかになるのでチェックを入れておくのがおすすめです。

サイズを指定することができ、テーマにもよりますが75px程度に設定しておくと良いでしょう。

Display comments count

チェックを入れると、コメント数を表示することができます。

Display views

チェックを入れると、閲覧数を表示することができます。

Display author

チェックを入れると、投稿者名を表示することができます。

Display date

チェックを入れると、投稿日を表示することができます。

Display taxonomy

チェックを入れると、カテゴリーやタグを表示することができます。

Use custom HTML Markup

チェックを入れると、HTMLタグを自分で指定することができます。自分でCSSを書いてスタイリングしたい場合などは、この機能を利用すると良いでしょう。

Theme

ここでテーマを選択すると、人気記事の表示方法を変更することができます。いくつかテーマが用意されているので、自分でCSSを記述してスタイリングしない場合は、ここで好きなものを選択するようにしましょう。

CSSでデザインをカスタマイズする

WordPress Popular Postsにはいくつかテーマが用意されていて、それらを利用するだけでもある程度デザインを整えることはできますが、自分でカスタマイズしたい場合はCSSでスタイルを記述することができます。

例えば、下記のように番号を付けてランキング形式で表示することもできます。

上記のデザインにする場合のCSSのサンプルコードは下記のとおりです。

.wpp-list {
    counter-reset: wpp;
    padding: 0;
}

.wpp-list li {
    list-style-type: none;
    position: relative;
    padding: 32px 16px 16px 16px;
    margin: 1rem 0;
    display: flex;
    align-items: center;
}

.wpp-list li::before {
    counter-increment: wpp;
    content: counter(wpp);
    position: absolute;
    top: 16px;
    left: 0;
    width: 32px;
    height: 32px;
    background: #d43370;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ffffff;
}

.wpp-list li + li {
    border-top: 1px solid #e8e8e8;
}

テーマのstyle.cssなどにコードを追記して設定してください。また、WordPress Popular Postsの設定からデフォルトで適用されているCSSを無効化することができるので、必要に応じて変更するようにしましょう。

適用しているテーマによって見た目が変わったり表示崩れが発生する場合があります。必要に応じてCSSのコードをカスタマイズしてください。