人気記事 WordPress Popular Posts の画像に順位を付ける

LIONの人気記事は、導入後からのトータルPV数で順位を表示しますが、Popular Postsは、集計期間を設定することが出来ます。私もPopular Postsを入れてみたのですが、順位の表示は無く画像の左上に「・」が付くだけでした。デザインも今ひとつしっくりこないのでカスタマイズしてみました。

プラグインを導入後の設定

「外観」の「ウィジェット」からWordPress Popular Postsをウイジェットエリアに置き、設定画面を開きます。順番に設定していきますが、スマホで見やすいように

アイキャッチ画像を大きく設定

１６：９に設定します。

幅 : ３２０px　高さ : １８０ px

HTML マークアップ設定

「カスタム HTML マークアップを使う」にチェックを入れ、一旦保存します。

投稿の前 / 後

以下のように、左右両方の ul を ol に変更します。
<ul class=”wpp-list”> ⇒ <ol class=”wpp-list”>　</ul> ⇒ </ol>

子テーマのstyle css に以下を追加

.wpp-list {
	list-style-type: none;
	counter-reset:number;
}
.wpp-list li{
	margin-top: 10px;
	margin-bottom: 2em;
}
.wpp-list li:before{
	position:absolute;
	counter-increment: number;
	content: counter(number);
	display:block;
	width:30px;
	height:30px;
	line-height:30px;
	text-align:center;
	background:#bfbfbf;
	color:#FFF;
}
.wpp-list li:nth-child(1):before{background:#ecd357 ;}
.wpp-list li:nth-child(2):before{background:#a9c6d5 ;}
.wpp-list li:nth-child(3):before{background:#c58459 ;}
.wpp-list li img{
	width:100%;
	height: auto;
	margin-bottom:10px;
}
.wpp-post-title{
	font-size:1.3rem;
	font-weight:900;
	line-height:1.5;
}
.wpp-meta, .post-stats {
	display: block;
	font-size: 1.2rem ;
	font-weight: bold;
	margin-top:8px;
}

以上でサムネイル記事一覧と同じような人気記事になりました。日付の表示と日付＆カテゴリーの前にマークを付ければ完璧ですがね…今はどうすれば良いか分かりません。