ライフハック

【AFFINGER5】フッターへ人気記事を表示する方法

たお

AFFINGER5でフッターに人気記事のランキングを表示させたい。

本記事では、このような疑問に答えていきます。

本記事の内容

今回は、WordPressのテーマとして、AFFINGER5のWINGを利用している方に向けて、フッターへ人気記事のランキングを表示させる方法を解説します。

サイドバーへ表示させる方法については、別記事にて解説しておりますので、ぜひご覧ください。

本記事の信頼性

本記事は、筆者が実際にWordPressのテーマとしてAFFINGER5 WINGを利用しており、そのときに設定した経験に基づいて執筆しています。

結論

結論としては、AFFINGER5ではできないため、「WordPress Popular Posts」というプラグインを利用します。

というのも、AFFINGER5には、下記の様に、おすすめ記事一覧の作成という項目がありますが、これは自分で表示させる記事を指定する必要があり、自動でランキングを作ってくれるものではないからです。

そのため、今回は「WordPress Popular Posts」というプラグインを利用した方法をご紹介します。

設定方法

手順①:WordPress Popular Postsプラグインをインストールする

WordPressへログインし、下記手順で操作をします。

  1. プラグインの新規追加をクリックする。
  2. 「WordPress Popular Posts」で検索する。
  3. 「WordPress Popular Posts」を今すぐインストールする。

インストールが終わったら、「有効化」をクリックします。

手順②:ウィジェットを追加する

左側のメニューから、外観→ウィジェットを開きます。

「WordPress Popular Posts」を、「投稿記事の下に一括表示」へドラッグ&ドロップします。

手順③:ウィジェットを一旦保存する

下記の項目にチェックを入れて、一旦保存します。

  • 抜粋を表示
  • アイキャッチ画像を表示
  • タクソノミーを表示
  • カスタムHTMLマークアップを使う

というのも、一旦保存することで、詳細設定ができるようになるからです。

手順④:ウィジェットの設定を行う

詳細設定を行っていきます。自分のブログの設定例を示します。

入力項目が見当たらない場合は、その項目にチェックを入れて、一旦Saveすると、詳細設定が表示されるようになります。

タイトル

  • タイトル:サイドバーの項目名で、「人気記事」と入力します。
  • 最大表示数:何位まで表示させるかを指定する項目で、5と入力します。
  • ソート順:何のランキングとするかを指定する項目で、総閲覧数を選びます。

フィルター

  • 計測期間:全期間とします。
  • すべてチェックを外します。

投稿設定

  • 抜粋を表示:チェックを入れます。
  • 抜粋の長さ:文字を選択し、100とします。
  • アイキャッチ画像を表示:チェックを入れます。
  • サイズを手動で指定:幅75px、高さ75pxとします。

統計タグの設定

  • タクソノミーを表示:チェックを入れます。
  • カテゴリー:選択します。

HTMLマークアップ設定

  • カスタムHTMLマークアップを使う:チェックを入れます。
  • タイトルの前:下記を入力します。

<h4 class="point"><span class="point-in">

  • タイトルの後:下記を入力します。

</span></h4>

  • 投稿の前:下記を入力します。

<div class="kanren">

  • 投稿の後:下記を入力します。

</div>

  • 投稿のHTMLマークアップ:下記を入力します。

<dl class="clearfix number">
<dt>{thumb}</dt>
<dd>
<p class="st-catgroup itiran-category">
<span class="catname st-catid10">{category}</span>
</p>
<h5 class="kanren-t">{title}</h5>
<div class="st-excerpt smanone">
<p>{summary}<p>
</div>
</dd>
</dl>

最後に、「Save」をクリックします。

手順⑤:順位を表示するCSSを追加する

メニューから、外観のカスタマイズ→追加CSSをクリックします。

そして、下記のコードを追加し、「公開」します。

.kanren .number {
position:relative;
}

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

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

h4 {
counter-reset: ranking;
}

dawaan様のサイトのコードを参考に、色を変更させて頂きました。

手順⑥:表示を確認する

最後に、ブログを表示させ、うまく表示されたかを確認します。

-ライフハック

© 2021 たおさんのMyanmar Life