こんにちは、ももおやじ(@Oyaji_Momo)です。
今回はTHE THORでの記事のランキング表示設定についてご説明します。
- TOPページに記事のランキングを表示したい
- 読者にオススメ記事を紹介したい
- ランキング表示って何?
この記事はこんな方にオススメです。
簡単な設定なので読めばすぐに設定できますよ。
ランキング表示とは
たまに記事のランキングを表示してるブログを見かけるけど、あれって私にもできるかな?
こういうの!
どうやってやるの?
こんにちは、ももおやじ(@Oyaji_Momo)です。 今回はTHE THORでのピックアップ記事の表示設定についてご説明します。 オススメの記事を紹介したい 記事を目立たせたい ピックアップ記事って何? […]
ランキング表示設定
- 記事ランキング設定
- ランキング機能設定
Step1.記事ランキング設定
- WordPressの管理画面「外観」→「カスタマイズ」
- 「TOPページ設定【THE】」→記事ランキング設定
- 記事ランキング設定
WordPress管理画面「外観」→「カスタマイズ」
TOPページ設定【THE】→記事ランキング設定
記事ランキング設定
- 記事ランキングを表示するか選択
- ランキングの対象期間を選択
- 表示件数を指定(5〜10件)
- 表示条件を選択
- セクションの見出しを入力
- 見出しの左に表示するアイコンを入力
- 見出しの右に表示する補足情報を入力
- 画像アスペクト比を選択
- カラー系マスク利用時の色を指定
①記事ランキングを表示するか選択
「表示する」を選択します。
②ランキングの対象期間を選択
「全期間ランキング(default)」「月ランキング」「週ランキング」「日ランキング」から選択できますが、今回は「全期間ランキング(default)」を選択します。
そのため対策方法についてに後ほど詳しく説明します。

それでは一旦先に進みましょう。
③表示件数を指定(5〜10件)
お好みの件数を指定します。
ここでは一旦「5件」と設定します。
④表示条件を選択
ここで条件を指定し、次の項目「指定するIDを入力」にIDを入力することで、ランキングに表示させる記事を絞り込むことができます。
ここでは一旦「無し(default)」と設定します。
⑤セクションの見出しを入力
これは必須項目なのでお好みの見出しを入力します。
僕の場合は「RANKING」と入力しています。
⑥見出しの左に表示するアイコンを入力
「アイコン一覧」を押すとアイコン一覧が表示されます。
この中から好きなアイコンを選択しコードをコピーし貼り付けます。
⑦見出し右に表示する補足情報を入力
お好みの補足情報を入力します。
僕の場合は「ランキング TOP5」と入力しています。
⑧画像アスペクト比を選択
ここでは一旦「16 : 9(default)」で問題ありません。
⑨カラー系マスク利用時の色を指定
お好みで設定しましょう。
これでランキングの表示設定は完了です。
次に不具合の対策を行います。
Step2.ランキング機能設定
- WordPressの管理画面「外観」→「カスタマイズ」
- 基本設定【THE】→アクセスランキングの設定
- ランキング機能の設定
- 表示確認
ここでは「ランキングの対象期間を選択」で「全期間ランキング(default)」を選択した場合に発生する「記事が1件しか表示されない」という不具合の対策を行います。
WordPressの管理画面「外観」→「カスタマイズ」
基本設定【THE】→アクセスランキングの設定
ランキング機能の設定
- ランキングの集計機能を有効にする
- リアルタイムで集計を行う
①ランキングの集計機能を有効にする
こちらをチェックします。
②リアルタイム集計で行う
こちらをチェックします。
これで設定は完了なので「公開」を押します。
④表示確認
TOPページを確認し、記事ランキングが表示されているか確認しましょう。
「リアルタイムで集計を行う」をチェックするとページの表示速度が遅くなる可能性があるようですが、今のところ僕は遅いと感じたことはありません。
どうしても気になるようであればPageSpeed Insightsで表示速度を調べたり、「リアルタイムで集計を行う」のチェックを外し「ランキングの対象期間を選択」で「全期間ランキング(default)」以外を選択しても良いと思います。
最後に
今回は記事のランキング表示設定についてお話ししました。
TOPページに設定することで読者に人気の記事を紹介することができます。
ぜひ設定してみましょう。