ボクアフィ

ボクのアフィリエイト日記

AFFINGER5

AFFINGER5でカテゴリ別に「おすすめ記事一覧」を表示する方法

投稿日:

この記事は約4分で読めます。

WordPressテーマ「AFFINGER5(WING)」で、そのカテゴリに合った「おすすめ記事一覧」をそれぞれ作成、表示する方法をご紹介します。

「おすすめ記事一覧」とは?

AFFINGER5の「おすすめ記事一覧」とは

AFFINGER5の「おすすめ記事一覧」の表示例

AFFINGER5の「おすすめ記事一覧」とは、自分の見せたい記事一覧を作れる機能です。おすすめ記事一覧は、サイドバーに追尾させたり、記事下に一括表示できます。設定は、テーマ管理の「おすすめ記事一覧の作成」でできます。

基本的な設定方法は、「WINGマニュアル」を参考にしてください。

カテゴリ別に表示する方法

デフォルトでは、「おすすめ記事一覧」は1つしか作成することができず、表示場所もある程度限られています。

ですが、そのカテゴリに合ったおすすめ記事を表示したいので、以下の方法で実装しました。

  1. 「おすすめ記事一覧」を自作する
  2. ウィジェット「STINGERカテゴリ別ボックス」にコードを貼る

たったの2ステップです。

「おすすめ記事一覧」を自作する

まずは、おすすめ記事一覧を自作します。

おすすめ記事一覧を自作するには、「記事一覧ショートコード」を利用します。

以下のコードを参考に、好きな記事一覧を作ってください。

<div class="kanren pop-box">
<p class="p-entry-t">
<span class="p-entry">
ここにタイトル</span></p>
<p>[ st-postgroup id="記事ID,記事ID" rank="on"]</p>
</div>

※ショートコードの「半角スペース」と「改行」は削除してください。

上記のコードで、おすすめ記事一覧の土台ができました。

こんな感じで作ってみても良いかもしれません。

<div class="kanren pop-box">
<p class="p-entry-t">
<span class="p-entry">
<span class="fa faa-pulse animated st-animate">
<i class="fa fa-heart" aria-hidden="true"></i>
</span>人気の記事</span></p>
<p>[ st-postgroup id="記事ID,記事ID" rank="on"]</p>
</div>

※ショートコードの「半角スペース」と「改行」は削除してください。

ウィジェット「STINGERカテゴリ別ボックス」にコードを貼る

次に、自作したおすすめ記事一覧を、ウィジェット「STINGERカテゴリ別ボックス」を使って、カテゴリ別に表示させます。

「WordPress管理画面」>「外観」>「ウィジェット」>「STINGERカテゴリ別ボックス」を表示させたい場所にドラッグ&ドロップさせます。

おすすめの表示場所は、「投稿記事の下に一括表示」や「スクロール広告用」です。

AFFINGER5「おすすめ記事一覧」のサンプル

おすすめ記事一覧の表示場所

さいごに、「STINGERカテゴリ別ボックス」に自作したおすすめ記事一覧を貼って完了です。

完了したら、表示確認をしてみてください。

まとめ

AFFINGER5は、デフォルトだと「おすすめ記事一覧」は1つしか作成することができず、表示場所もある程度限られています。

なので、上記の方法でそのカテゴリに合った「おすすめ記事一覧」をそれぞれ作成、表示ができます。

「全然関係ないカテゴリに、おすすめ記事一覧が一括表示されて困っている!」という方は実装してみてください。

おすすめ記事

EWWW Image Optimizerの設定画面

WordPress

画像を「EWWW Image Optimizer」でWebPに変換する方法

2018/11/26  

WordPressプラグイン「EWWW Image Optimizer」を使い、次世代画像フォーマット「WebP(ウェッピー)」に変換する方法を解説します。

AdSenseの「ページビュー」と「表示回数」の違い

AdSense

AdSenseの「ページビュー」と「表示回数」の違い

2018/06/30  

AdSenseのレポートでよく見る「ページビュー」と「表示回数」の意味の違いを解説します。

プラグイン不要!Googleフォームでお問い合わせフォームを作る方法

Google WordPress プラグイン

プラグイン不要!Googleフォームでお問い合わせフォームを作る方法

2018/06/08  

WordPressで人気のプラグイン「Contact Form7」を利用せずに、Googleが提供する「Googleフォーム」を使ったお問い合わせフォームの作り方をご紹介します。

-AFFINGER5

Copyright© ボクアフィ , 2019 All Rights Reserved.