今表示している記事のカテゴリの人気記事を簡単に表示できるプラグイン【WPP Plus Widget】

人気記事を表示できるWordPressにプラグイン【WordPress Popular Posts】をご利用されている方、多いと思います。【WPP Plus Widget】は【WordPress Popular Posts】ではできないカテゴリ別での人気記事の表示を、ウィジェットで簡単に管理できる拡張機能的なプラグインです。
【WPP Plus Widget】が優れているのは表示するカテゴリーの階層も簡単に設定でき、現在表示されている記事は人気記事からは排除することも簡単にできるのです。そしてさらに！複数カテゴリを選択していた場合にはどれか一つを選んで表示させるのです。すごい便利！
今回はランキングを表示するcss部分もあわせてご紹介します。

こちらの記事は公開時より年月が経過しており内容が古くなっている可能性があります。この記事で紹介しているソースコードの使用や、phpコードの書き換えは自己責任でお願いします。

人気記事を設定するプラグインの用意

人気記事を表示するには【WordPress Popular Posts】が必要ですので、ダッシュボード【プラグイン】→【新規追加】からインストールしておいてください。有効化を忘れずに。【WordPress Popular Posts】はインストール後からのアクセスを収集しますのでログがたまるまで少し時間が必要です。

【WPP Plus Widget】のインストール

【WPP Plus Widget】は公式プラグインではないので作者様のサイトからダウンロードさせていただきましょう！くわしい説明も作者様のサイトにで確認してください。

プラグインをダウンロードしましたら、Ｚｉｐファイルを解凍せずにダッシュボードの【プラグイン】→【プラグインのアップロード】から【ファイルを選択】→【今すぐインストール】でインストールさせてください。
インストール完了後、ウィジェットに【WPP Plus Widget】が追加されています。

【WPP Plus Widget】の設定

まずは、WPP Plus Widgetをウィジェットの任意の箇所に設置します。次にWPP Plus Widgetの設定をしていくのですが後で説明するＣＳＳに合うように設定します。

①タイトル

ここは見出しになります。ここはお好みのタイトルで構いません。
たとえば『人気記事』と入力したとすると、【「–カテゴリ名–」カテゴリの人気記事】と出力され、トップページには【人気記事】とタイトルが表示されます。

②深さ

こちらはカテゴリの階層の深さになります。深さを1に設定したとして、親カテゴリー→子カテゴリー→孫カテゴリーとあった場合、現在表示されている孫カテゴリーの記事でも人気記事には親カテゴリーでの人気記事が表示されます。
カテゴリーの記事数が少ない場合にはこの機能は画期的ですよね！

④パラメータ

こちらは元のプラグイン【WordPress Popular Posts】のパラメーターを入れるところです。細かな条件指定はいろいろありますが、ざっくりとご紹介します。わたしが設定しているのはこんな感じ。

limit=5　
range=weekly　　
order_by=views
thumbnail_width=100
thumbnail_height=100

limit=

表示件数。5なら最大で5記事まで。

range=

いつまでのデータを利用するか。
monthly（1か月間）、weekly（1週間分）、daily（1日分）、all（プラグインWordPress Popular Postsをインストールしてからすべての期間）があります。

order_by=

人気記事一覧を何の順番でならべるか。
views（アクセス数）、comments（コメント数）、avg（1日の平均アクセス数）があります。

thumbnail_width=、thumbnail_height=

アイキャッチの画像のサイズです。

excerpt_length=

わたしは設定していないのですが、excerpt_lengthは抜粋文です。excerpt_length=【文字数】で表示させます。

④表示記事を除外する

ここにチェックを入れると現在表示している記事は人気記事ランキングから除外されます。
この機能はわたしが作者様におねがいして付けていただいた機能です！本当にありがとうございます！！！

⑤記事一覧の前後

前　　<div id="popular-post"> <ul>

後　　</ul></div>

⑥記事フォーマット

<li>{thumb} {title}</li>

{stats}は抜粋文です。必要な場合は＜/li＞の前に入れてください。

これでウィジェットの設定はおわりです。このままでもそれなりに表示されていると思いますが、アイキャッチ部分にランキングを入れるスタイルをご紹介します。

人気記事一覧にランキングを表示するcss

ランキングを表示する方法は色々あるようですがわたしはJsを使った方法をご紹介します。キャリコ（@calicocatxyz）さんの記事を参考にさせていただきました！

外部Jsファイルに以下を記述

※STINGER5ではbase.jsの一番下にコピペです。

/*---------------------------
人気記事ナンバリング
------------------------------*/
$(function(){
    $('#popular-post ul li').each(function(i){
        $(this).attr('class','number' + (i+1));
    });
});

WordPress Popular Postsのスタイルシートの適応を外す

人気記事のスタイルはWordPress Popular Postsのスタイルシートが適応されますので、こっちを使用しない設定にします。プラグインのスタイルシートに直接cssを書き込んでしまうとプラグインアップデートですべて消えてしまうので、cssはテーマに書き込んでしまったほうが楽です。
ダッシュボードの【設定】→【WordPress Popular Posts】→【Tools】→【Use plugin’s stylesheet:】を【Disabled】に。そして【Apply】

Style.cssに記述

.wpp-list li {
    float: none;
    clear: left;
}
.wpp-thumbnail {
    display: inline;
    float: left;
    margin: 0 10px 0 0;
    border: none;
}
#popular-post a {
    font-size: 14px;
    text-decoration : none;
}
#popular-post li {
    padding : 20px 10px;
    border-bottom: #d2d7e6 1px solid;
    line-height: 1.5;
    overflow: hidden;
    text-align: left;
}
#popular-post li:hover { background-color: rgba(238,238,238,0.3) }
#popular-post ul li { position : relative }
#popular-post li:last-child { border-bottom: none }
#popular-post { counter-reset : wpp-ranking }
#popular-post ul li::before {
    position : absolute;
    top : 15px;
    left : 5px;
    color : #ffffff;
    counter-increment : wpp-ranking;
    text-align : center;
    z-index : 9999;
    float : left;
    line-height : 25px;
    width : 25px;
    height : 25px;
    border-radius : 2px;
}
#popular-post ul li.number1::before,
#popular-post ul li.number2::before,
#popular-post ul li.number3::before,
#popular-post ul li.number4::before,
#popular-post ul li.number5::before {
    content : counter(wpp-ranking, decimal);
    background-color : #f09696;
}

うまくいくとこのような感じでアイキャッチ左上にランキングが表示されます。スタイルはお好みで変更してくださいね！

まとめ

カテゴリ別に人気記事を表示したいと考えている方には【WPP Plus Widget】は本当に便利ですね！ぜひお試しください！！