私が他の方のブログで気にいった記事を見つけたとき、そのブログの人気記事のカテゴリーがあると他の記事も見たりします。
なので、このサイトでも、分かりやすくサイト内の人気記事を表示したい！と思い立ち、設定してみることにしました。
調べたところ、人気がありそうなプラグイン「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>
修正したのは以下の画像の黄色マーカー部分です。
カスタマイズが完了しました！
参考サイト
https://github.com/cabrerahector/wordpress-popular-posts/wiki/6.-Styling-the-list
