wordpressで人気記事一覧を表示する方法

WEBサイトでよく見かけるのが人気記事一覧ですが、人気記事一覧はプラグインの「WordPress Popular Posts」を使えば簡単に設置できます。WordPress Popular Postsでは、表示する人気記事の期間や記事の数、カテゴリー、画像の大きさなどの細かい設定もできます。

今回は、WordPress Popular Postsで人気記事一覧をサイドバーや固定ページに表示させる方法を解説します。

「WordPress Popular Posts」をインストールして有効化にする

管理画面の左側のメニューにある「プラグイン」→「新規追加」をクリックします。

そして検索窓に「WordPress Popular Posts」と記入して、「WordPress Popular Posts」

をインストールしましょう。インストールした後は有効化してください。

「WordPress Popular Posts」の基本設定をする

次に基本設定を行います。「設定」→「WordPress Popular Posts」をクリックしてください。すると「統計情報」というページに映ります。この画面では各ページのアクセス数が掲載されています。設定画面は「ツール」から開くことができます。

設定画面では「アイキャッチ画像」「データ」「その他」「キャッシュの設定」が可能です。では以下にてこれらの設定方法を説明します。

「アイキャッチ画像」の設定

アイキャッチ画像の設定では、人気記事の一覧で表示される、記事の画像を設定できます。

画像の取得元では「アイキャッチ画像」「本文内の最初の画像」「最初の添付ファイル」「カスタムフィールド」の4パターンで画像を表示できます。今回は表示させる画像をアイキャッチ画像にしたいので、アイキャッチ画像に設定しています。

「データ」の設定

データの設定では、閲覧を記憶する対象者やログ上限などを設定できます。

閲覧を記録する対象者は「訪問者のみ」「ログイン中のユーザーのみ」「全員」の3パターンで設定できます。

「ログイン中のユーザーのみ」や「全員」にすると、管理者のアクセスでも閲覧数がカウントされてしまいます。ユーザー側だけの正確な閲覧数を表示させたいなら、「訪問者のみ」で設定しましょう。

またログ上限といったデータの保存期間の設定もできます。「無効」に設定すると、際限なくデータの保存はできますが、それではデータが貯まってしまいサーバーに負荷がかかるので注意です。

「データのキャッシュ」では、「キャッシュをする」を選択すると、指定された時間の間の人気リストのキャッシュをしてくれます。大きい規模やトラフィックの多いサイトでは使用が推奨されています。

「その他」の設定

「その他」では記事のリンクをクリックした際に、現在のウィンドウで表示するか、新しいタブやウィンドウで設定できるかを選択できます。

またプラグインで用意されているCSSファイルか、自分で作成したCSSファイルのどちらを適用するかの設定もできます。

キャッシュの設定

ページの下部ではキャッシュを空にしたり、データを削除できたりできます。

CSSでデザインを調整する

WordPress Popular Postsはテーマがあり、それを設定すると、デザインを整えられます。

ただそれだけだと自由度が狭いと思う人もいるでしょう。デザインはcssで自分で調整できます。今回は下記の画像のように、デザインを調整してみました。

上記の表示は以下のCSSで行いましたので、参考にしてみてください。

 .widget {
            .wpp-list {
                li:before {
                    content: counter(wpp-count);
                    display: block;
                    position: absolute;
                    font-size: 16px;
                    font-weight: bold;
                    color: #fff;
                    background-color: #555;
                    padding: 10px 17px;
                    border-radius:50%;
                    z-index: 1;
                }
                li {
                    border-bottom: 3px dotted #dedede;
                    padding-bottom: 20px;
                    position: relative;
                    counter-increment: wpp-count;
                    .wpp-post-title {
                        color          : #000000;
                        text-decoration: none;
                        font-size      : 24px;
                    }
                    .wpp-meta {
                        margin-top: 10px;
                        .wpp-views {
                            font-size: 16px;
                        }
                        .wpp-category {
                            font-size: 16px;
                        }
                    }
                }
                li:nth-child(1):before{
                    background-color: #EFAF00;
                }
                li:nth-child(2):before{
                    background-color: #9EACB4;
                }
                li:nth-child(3):before{
                    background-color: #BA6E40;
                }
 
                li:nth-child(4):before{
                    background-color: #51ace0;
                }
                li:nth-child(5):before{
                    background-color: #f73a3a;
                }
                li:nth-child(6):before{
                    background-color: #f52efc;
                }
                li:nth-child(7):before{
                    background-color: #713af1;
                }
                li:nth-child(8):before{
                    background-color: #f7fa47;
                }
                li:nth-child(9):before{
                    background-color: #25dfa1;
                }
                li:nth-child(10):before{
                    background-color: #166ae7;
                }
            }
        }

ランキング形式で数字を画像の上に載せていますが、これは「content: counter(wpp-count);」を使って実装できます。

GIV株式会社は、埼玉県川越市にあるWEB（ホームページ）制作会社です。お困りごと、ご相談、お気軽にご連絡ください。お問い合わせは、こちらから。