お勧めプラグイン WordPress Popular Postsカスタマイズ方法

私が他の方のブログで気にいった記事を見つけたとき、そのブログの人気記事のカテゴリーがあると他の記事も見たりします。

なので、このサイトでも、分かりやすくサイト内の人気記事を表示したい！と思い立ち、設定してみることにしました。

調べたところ、人気がありそうなプラグイン「WordPress Popular Posts」を設定してみました。

この記事の内容

WordPress Popular Posts 導入

まず導入します。

プラグインをインストール
インストール済みプラグインの設定から、集計対象や集計期間を必要に応じて設定
外観のウィジェットからサイドバーに追加

導入した画面がこちら。

各エントリー毎の隙間がないのが気になったので、間隔をあけるためにカスタマイズしてみることにしました。

ついでに、ランキング順序も表示してみることにします。

ランキングウィジェットをカスタマイズ

①追加CSSに以下を追加

カスタマイズから追加CSSに以下を追加します

ol.wpp-list {
list-style-type: none;
list-style-type: decimal;
margin: 0;
margin-left: 0;
padding: 0;
counter-reset: li-counter;
}
 
ol.wpp-list > li{
position: relative;
margin-bottom: 20px;
padding-left: 0.5em;
min-height: 3em;
border-left: 2px solid #CCCCCC;
}
 
ol.wpp-list > li:before {
position: absolute;
top: 0;
left: 0em;
width: 0.3em;
font-size: 3em;
line-height: 1;
font-weight: bold;
text-align: right;
color: #CCCCCC;
content: counter(li-counter);
counter-increment: li-counter;
}
 
ol.wpp-list li span.wpp-stats { display:block; }

②ウィジットのWordPress Popular Postsを編集をします

「カスタムHTMLマークアップを使う」にチェック
投稿の前／後を、それぞれ<ol class="wpp-list">　</ol>　に変更
投稿のHTMLマークアップに下記を記入
<li>{thumb} {title} <span class="wpp-stats">{stats}</span></li>

修正したのは以下の画像の黄色マーカー部分です。