アフィンガーでおすすめ記事をサイドバーの好きな場所に設置する方法｜プラグイン使用なし！

多くのブロガーが設置しているサイドバーの人気記事。

おすすめ記事の表示がある事で、ユーザーに興味を持ってもらい、別記事へのアクセスやブログの滞在時間を伸ばしてもらう事に繋がります。

それを可能にしてくれる、人気なプラグインは「WordPress Popular Posts」です。アフィンガー利用者でも、このプラグインをおすすめしている方は多くおられますが、このプラグインはとにかく重いのです。

管理人もWordPress Popular Postsを一時期利用していましたが、設定いじって対策してもサイトは重くなるし、きちんと表示されないこともあり、大変ストレスでしたので削除しました。

そして現在は、アフィンガーの機能を使って、人気記事をサイドバーに表示させています。

今回はその方法をご伝授します。AFFINGER（アフィンガー）はせっかくの有料テーマですので、フルに活用していきましょう。

このブログは「AFFINGER」を使用しています

おすすめ記事サイドバーへの表示方法(追尾させない)

ダッシュボードの「AFFINGER管理」＞「ヘッダー下/おすすめ」＞「おすすめ記事一覧」

「任意の人気記事を指定（投稿又は固定記事ID）」に、表示させたい投稿記事のIDを記入してください。複数指定する場合は半角カンマ「,」で区切ってください。

投稿記事IDはダッシュボードの「投稿」＞「投稿一覧」から確認できます。

AFFINGERには人気記事(おすすめ記事)の自動作成機能はありません。このように、手動で作成しなければなりません。

アクセスが多いページは、Googleサーチコンソールなどにて確認できますし、手動であることで本当に読んでほしい記事を表示させることができるメリットがあります。

手間と思われる方もおられるかもしれませんが、利点もしっかりと生かしておすすめ記事を作成していきましょう。

表示させたい投稿記事のIDを記入しましたら、「save」のクリックをお忘れなく。

続いて、ダッシュボードの「外観」＞「ウィジェット」を開いてください。

「STINGER　カスタムHTML」を、サイドバーウィジェットに追加してください。

該当ウィジェットを開き、「タイトル:」には「人気記事」「アクセスランキング」などと記載したら分かりやすいです。

「内容:」には以下のコードを入力してください。

[st-osusume]

このコードは、AFFINGERのおすすめ記事表示用のショートコードです。こちらを使うことで、おすすめ記事ランキングを任意の場所に表示させることができるのです。

最後に「保存」をクリックしてください。

以上でサイドバーに人気記事がランキング形式で表示されるようになります。確認されてみてください。

※ランキング形式ではない、番号無しで表示させる方法は後述します。

おすすめ記事をサイドバーで追尾させる方法

当サイトでは、サイドバーのスクロール追尾箇所には記事の目次を表示しているので、上記のようにおすすめ記事をただサイドバーに置く方法をご伝授しました。

中にはおすすめ記事を追尾させたい方もおられると思いますので、その方法をご説明します。

ダッシュボードの「AFFINGER管理」＞「ヘッダー下/おすすめ」＞「おすすめ記事一覧」

• 「おすすめ記事一覧に表示する文字」にタイトルを記入します。(「人気記事」「よく読まれる記事」など)
• 表示させる投稿記事のIDを記入
• 「 サイドのスクロールに表示にする（抜粋非表示）」にチェックを入れてください。

これだけで、スクロールしても追尾するおすすめ記事が反映されるのです。

おすすめ記事の見出しについて

追尾させないでサイドバーに置く設定の際、おすすめ記事のタイトルを、ウィジェットのほうに設定しましたが、これは他のサイドバータイトルと統一感を出すためです。

AFFINGER管理でタイトルを設定しますと、以下のような装飾のタイトルになります。

こちらも可愛くて素敵なので、どちらが良いかはお好みで設定されてください。

おすすめ記事のカラー変更方法

ダッシュボードの「外観」＞「カスタマイズ」＞「オプション(その他)」＞「おすすめ記事」

こちらから6カ所のカラーを経変更することができます。

①見出し文字色
②見出し背景色
③コンテンツ背景色
④記事の文字色
⑤ナンバーの色
⑥ナンバー背景色

一番下の「ナンバーを非表示」にチェックをいれると、番号無しの表示になります。

ランキング形式にしたくない場合は、こちらにチェックを入れてください。

完了しましたら上部の「公開」をクリックして保存してください。

アフィンガーでおすすめ記事をサイドバーの好きな場所に設置する方法　まとめ

今回、アフィンガーでおすすめ記事を表示させる方法を、ご紹介しました。

• 方法１．サイドバーの任意の場所に置く
• 方法２．サイドバーで追尾させる
• カラーの変更や番号の有無を決める。

プラグインを使用しない分、サイトに負担がかからないので、お勧めな方法です。ぜひ設定されてください。

サイドバーを整えよう！

サイドバーは、ブログの顔といっても過言ではない重要なスペースです。サイドバーを整頓することで、見た目の良さだけでなく、利便性も変わってきます。

現在管理人は、ユーザビリティ向上を第一に、以下の項目をサイドバーに置いています。

• 検索ウィジェット
• おすすめ記事
• プロフィール
• カテゴリー
• タグ
• 目次
• 最新記事

• プロフカードを設置する→こちらの記事でご紹介
• デフォルトの新着記事を非表示にする→こちら記事でご紹介
• おすすめ記事を置く(当記事)
• 追尾する目次を置く→TOC＋の場合・RTOCの場合
• カテゴリーやタグ、最新記事を置く→こちらの記事でご紹介
• ウィジェットのタイトルカラー変更方法→こちらの記事でご紹介