Computer

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

2020年3月7日

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

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

ワードプレスで人気記事を表示する方法【プラグインで一発!】

ブログやウェブサイトによくある「人気記事」や「よく読まれている記事」のパーツ。実際のアクセス数を集計しているので、どのページがよく読まれているのか、管理者の方も訪問者の方にもわかりやすいランキングとい ...

続きを見る

注意

また、当記事はAFFINGER5テーマに特化した内容のため、当該テーマの使用者の方のみに向けた記事となります。あらかじめご了承ください。

期待する出力結果

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

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

blank

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

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

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

まずは管理メニューから

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

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

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

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

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

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

blank

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

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

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

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

カスタムHTMLマークアップ

タイトルの前 = <h4 class="menu_underh2"> タイトルの後 = </h4> 投稿の前 = <div class="kanren"> 投稿の後 = </div> 投稿のHTMLマークアップ =

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

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

blank

これで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の数値が一つずつ増えていきます。そして別の人気記事ウィジェットに遭遇したらそこでカウンターの値をゼロから振り直すという仕組みです。

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

blank

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

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

-Computer

Copyright© dawaan , 2020 All Rights Reserved.