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

Last modified on:

typographyimages / Pixabay

 

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

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

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

WordPress Popular Posts 導入

まず導入します。

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

 

導入した画面がこちら。

 

 

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

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

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

①追加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を編集をします

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

 

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

 

カスタマイズが完了しました!

 

参考サイト

https://github.com/cabrerahector/wordpress-popular-posts/wiki/6.-Styling-the-list


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です