【2024年最新】WordPress Popular Postsの使い方・カスタマイズ方法

2024/03/27

WordPress Popular Postsは、人気記事ランキングを作成できるプラグインです。

プラグインによりアクセスが多い人気記事を表示することで、ブログの回遊率や滞在時間の上昇が期待できます。

WordPress Popular Postsの基本的な使い方やおすすめのカスタマイズ方法とは？

本記事は、ブログブートキャンプのブログの始め方-WordPressのプラグインに関する内容となります。

レオ

ブログでよく見かける人気記事ランキングを作りたい！

アレックス

WordPressでは、プラグインをインストールするだけで作れるぞ。やり方を確認しよう。

ジャンプできる目次

【広告主の開示】
※当サイトは、広告主から支払われる広告収入を主な収入源として運営を行っています。
※当サイトの記事では、商品・サービスの紹介に広告主のアフィリエイト広告を利用しています。
※記事で紹介した商品・サービスを購入すると、広告主から当サイトに報酬が支払われることがあります。

WordPress Popular Postsとは

WordPress.org 日本語

WordPress Popular Posts 高度にカスタマイズ可能で、使いやすい投稿ウィジェットです。

WordPress Popular Postsは、人気記事ランキングを作成できるプラグインです。

プラグインをインストールして設定をするだけで、自動でアクセス数を集計して、直近の人気記事をランキング形式で表示してくれます。

例えば、プラグインにより作成した人気記事ランキングのサンプルは、次の通りとなります。

レオ

記事のアイキャッチ画像も表示されてて良い感じ！

アレックス

シンプルな人気記事ランキングは、5分ほどで設置できるぞ。

WordPress Popular Postsの使い方

WordPress Popular Postsの使い方は簡単で、ほとんどデフォルト設定のまま活用できます。

プラグインの新規追加ページでWordPress Popular Postsをインストール・有効化してから、人気記事ランキングを設置しましょう。

記事下やサイドバーに設置する方法

WordPress Popular Postsにより生成した人気記事ランキングを、記事下やサイドバーに設置しましょう。

やり方としては、ウィジェット機能を利用して、任意の位置に配置するだけです。

WordPressの管理画面から「外観→ウィジェット」と進み、ウィジェット編集画面を開きます。

利用できるウィジェットにWordPress Popular Postsがあるので、配置したいウィジェットエリアにドラッグ&ドロップしてください。

配置したウィジェットをクリックすると、設定項目が表示されます。設定内容は好みですが、おすすめの設定方法を紹介していきます。

基本設定

人気記事ランキングの基本的な設定です。読者の興味を惹けるように、タイトル・記事の表示数を設定しましょう。

タイトル: よく読まれている記事、人気記事
最大表示数: 5〜10件

フィルター設定

フィルターは、人気記事ランキングに表示する記事に関する設定です。好みに応じて、計測期間を変更しておきましょう。

計測期間: 過去30日間

投稿設定

投稿設定は、人気記事ランキングの見た目に関する設定です。アイキャッチ画像を表示しておくと、より目を引くようになります。

投稿設定: アイキャッチ画像を表示にチェック

統計タグの設定

統計タグの設定は、記事に関するデータの表示設定です。アクセス数は重要な情報なので、記事の閲覧数を非表示に変更しておきましょう。

統計タグの設定: 閲覧数を表示のチェックを外す

まだデータがありませんの対処法

プラグインを有効化してから人気記事を表示されるまでには、少し時間がかかります。

WordPress Popular Postsはアクセス数をカウントして記事ランキングを作るので、実際に各記事でデータの蓄積が必要となります。

現在までのアクセス状況は、設定画面トップの統計情報でデータの確認が可能です。

レオ

アクセスデータが溜まってるはずなのに、表示されないけど？

アレックス

その場合は、キャッシュの誤動作が考えられる。ツール>データ設定>データキャッシュをキャッシュしないに設定してみよう。

任意の場所にショートコードを設置

記事内にショートコードでWordPress Popular Postsを表示する方法

記事内に人気記事ランキングを表示したい場合は、次のショートコードを任意の場所に設置してください。

[wpp range='last30days' thumbnail_width=80 thumbnail_height=80 limit=5 stats_views=0]

ショートコード内の記述を変更することで、表示を自由にカスタマイズできます。

range='last30days' : 計測期間
thumbnail_width=80 : アイキャッチの幅
thumbnail_height=80 : アイキャッチの高さ
limit=5 : 表示する記事数

アレックス

好みに応じて、パラメータの太字部を変更すればOKだ！

WordPress Popular PostsのCSSカスタマイズ

WordPress Popular Postsのデザインを変更するCSSのカスタマイズを紹介します。

初期状態のデザインでも問題はありませんが、よりランキングらしい見た目にカスタマイズしてみましょう。

CSSでランキング順位を表示

人気記事のランキング順位を表示するCSSのカスタマイズ方法を解説します。

デフォルトのデザインは非常にシンプルですが、ランキング順位を追加するだけでも、華やかで読者の興味を引く見た目にできます。

WordPressの管理画面から「外観→カスタマイズ→追加CSS」と進み、以下のCSSコードをコピペで設置して保存してください。

/*ランキング順位表示*/
ul.wpp-list li {
    border-bottom: 1px dashed #77776E;
    position: relative;
    list-style: none;
}
/*記事タイトル*/
ul.wpp-list li a.wpp-post-title {
    display: block;
    text-decoration: none;
    font-size: 15px;
    color: #333;
    margin: 10px 10px 10px 0px;
}
ul.wpp-list li a.wpp-post-title:hover {
    color: #3fa3ff;
}
/*アイキャッチ*/
ul.wpp-list li img {
    margin: 10px;
}
/*ランキングカウンター*/
ul.wpp-list li:before {
    content: counter(wpp-count);
    display: block;
    position: absolute;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    background-color: #555;
    padding: 3px 10px;
    border-radius:50%;
    z-index: 1;
}
/*カウント数*/
ul.wpp-list li {
    counter-increment: wpp-count;
}
/*ランキング1〜3の色変更*/
ul.wpp-list li:nth-child(1):before{
    background-color: #EFAF00;
}
ul.wpp-list li:nth-child(2):before{
    background-color: #9EACB4;
}
ul.wpp-list li:nth-child(3):before{
    background-color: #BA6E40;
}

カスタマイズ後の人気記事ランキングは、次のようなデザインになります。