ブログでよく見かけるアレ。皆さんもやりたいですよね。
ブログの人気記事ランキングをサイドバーなどに表示するアレです。
今回はWordPressにデフォルトでインストールされているプラグイン「Jetpack」を使って、簡単に人気記事ランキングを追加する方法について解説します。
また、Jetpackでは通常「1位」や「2位」などの順位表示ができないのですが、CSSを使って追加する方法についても触れていきます。
ブログの人気記事ランキングを追加する方法
Jetpackのウィジェットを有効化
[Jetpack] – [設定] – [執筆] – [ウィジェット] から以下の2つを有効化しましょう。
- 購読フォームなどの追加ウィジェットがサイトで使用可能に
- ウィジェット表示のコントロール機能を有効化して、特定の投稿やページだけにウィジェットを表示させる
ウィジェットの設定を開き追加する場所を選ぶ
[外観] – [ウィジェット] からウィジェットの設定画面を開きましょう。
ウィジェットの設定ページからランキングを表示させたい場所を選んで追加していきます。僕の場合はサイドバーを選びました。テーマによって表示されるものが変わると思います。
「人気の投稿とページ」ウィジェットを追加
ウィジェットの追加ボタン「+」を押して、出てきた検索欄に「人気」と入力すると、「人気の投稿とページ」というウィジェットが表示されます。これを選択しましょう。
サイドバーに追加する場合、表示は縦に並べたいので「リスト表示」を選びましょう。
設定項目の確認と変更
「項目数」がランキングを何位まで表示するか、になります。僕は5位までとしました。
「統計の期間」がどの期間の順位を取得するか、になります。個人的には変化があった方が楽しいので「過去1週間」としました。表示されるランキングはリアルタイムのものではなく、若干の遅延が生じる可能性があることを理解しておきましょう。
「表示するアイテム」は何のランキングを取得したいか、になります。もちろん記事のランキングだけ欲しいので「投稿を表示」のみ有効化しました。
「メタデータの設定」では表示する項目を選択できます。「日付」「投稿者」「サムネイル」など、表示したいものを選んで有効化しましょう。僕は日付とサムネイルのみ有効化しました。
記事タイトルに順位を追加する（CSSのみ）
ここまではJetpackプラグインの「人気の投稿とページ」ウィジェットの追加と設定変更をしてきましたが、順位を表示する機能がないことにお気づきでしょうか（2025年3月時点）。
Jetpackでは視聴の多い順で並べてくれるだけで、記事の順位は表示できないのです。
別のプラグインを利用する方法もありますが、プラグインの数を増やしたくないのでこのままCSSだけで追加していきましょう。
外観のカスタマイズを開く
[外観] – [カスタマイズ]
ランキングが表示されるページを開く
カスタマイズが開けたらプレビュー画面の中でランキングを表示したいページを開きます。僕の場合はシングルページなので、どれでもいいので記事を開きました。
サイドバーにちゃんとランキングが表示されていますね。
メニューから「追加CSS」を開き、CSSを追加
このようにランキングが表示されている状態で左メニューから「追加 CSS」を選択します。
追加するCSSは以下からコピペでOKです（サイドバーなら）。
/*=====================*/
/* サイドバーランキング */
/*=====================*/
.sidebar .jetpack-top-posts {
counter-reset: posts-rank;
}
.sidebar .jetpack-top-posts-title:before {
counter-increment: posts-rank 1;
content: counter(posts-rank) "位｜";
}表示を確認する
以上で記事タイトルに順位を追加することができたはずです。最後に、実際に表示できているか確認してみましょう。
このように記事タイトルの前に「1位、2位、3位・・」と順位の表示を追加することができました。
まとめ
いかがだったでしょうか。プラグインは便利ですが、追加すればするほどサイトが重くなる諸刃の剣でもあります。デフォルトのJetpackプラグインはこれだけで色々な追加機能が可能です。ランキングについてもプラグインを追加せず実現できるので、Jetpackで記事ランキングを作っている方は今回の方法も試してみてください。
コメントを残す