【AFFINGER5】WordPress Popular Postsの表示をキレイにする方法

先日の記事で、WordPressブログに人気の記事を表示させる方法を紹介したのですが、今回はさらに一歩進んで、WING (AFFINGER5)テーマで人気記事の表示を綺麗にする方法を紹介しようと思います。

人気記事を表示するにはWordPress Popular Postsの設定が必要です。まだの方はこちらの記事をご覧ください。

期待する出力結果

今回目指すのは、以下のような出力結果です。

AFFINGERテーマと統一感のあるスタイル、そして記事のアイコンの左上にランキングの順位を表示させています。

人気記事ウィジェットのデザインをカスタマイズする

ではさっそく行きましょう。

人気記事ウィジェットのデザインをAFFINGER5と同じにする

まずは管理メニューから

[外観] → [カスタマイズ]と選択してカスタマイザーを開きます。

カスタマイザーが開いたら、[ウィジェット]を選択します。

ウィジェットは好きなところに配置できますが、今回は[サイドバーウィジェット]エリアに追加します。

ここで[ウィジェットを追加]ボタンを押し、[WordPress Popular Posts]というウィジェットを選択します。

選択したら、設定オプションがズラリと表示されるので順番に埋めていきます。設定オプションは豊富にあり、かなり自由にカスタマイズできるので、各自お好みの設定をしてください。

ここでは、上のデザインを表示させるために必要な設定だけを行います。

この辺りは好みで調整しても大丈夫ですが、重要なのは以下の設定です。

HTMLマークアップ設定で、必ず[カスタムHTMLマークアップを使う]にチェックを入れます。

チェックを入れたら一度[適用]ボタンを押してください。すると以下のようなHTMLを入力するフォームが出てきます。

そのフォームに以下の通りにHTMLをコピー&ペーストしましょう。

<dl class="clearfix number">
<dt >{thumb}</dt>
<dd>
<h5>{title}</h5>
<div class="smanone2"><p>{summary}</p></div>
</dd>
</dl>

ちょうど以下のような感じです。

これでAFFINGERテーマと統一感のあるスタイルに更新されたはずです。

人気記事の順位を表示させる

続いて、人気記事の順位を表示させましょう。

カスタマイザーから[追加CSS]を選択します。

続いて、以下のCSSスタイルを設定します。

.kanren .number {
  position:relative;
}

.kanren dl.number:before {
  content: counter(ranking);
  position: absolute;
  top:0;
  left:0;
  padding: 2px 8px;
  background: #1e73be;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
}

.kanren dl.number {
  counter-increment:ranking;
}

h4 {
  counter-reset: ranking;
}

counter関連のCSSは見慣れない属性ですが、人気記事を一つ表示するごとにrankingの数値が一つずつ増えていきます。そして別の人気記事ウィジェットに遭遇したらそこでカウンターの値をゼロから振り直すという仕組みです。

ここまでの設定を行うと、以下のようなウィジェットのスタイルに変更ができたと思います。

スタイルはお好みで編集できますが、重要なところは「background」の色と「color: #fff」のところでしょうか。ここを変更するとお好みの色に変更できます。

ここまでできたら、お好みの色やウィジェットの設定に変更して、自分好みの人気記事ウィジェットを完成させましょう！