AFFINGER5でおすすめ記事（人気記事）を好きな場所に設置する方法。スクロール追尾なしでサイドバーに設置したい！

2021-03-16

有料テーマAFFINGER5でおすすめ記事（人気記事）を設置する方法です。

テーマの機能を使えば簡単におすすめ記事を記事下やトップ上部、サイドのスクロールに表示することができます。

ただサイドバーのスクロールに追尾しないタイプのおすすめ記事が設定だけでは設置できなかったので今回設置してみます。

サイドにおすすめ記事を設置したいけど、スクロール追尾する箇所には目次などのおすすめ記事以外のウィジェットを設置したい場合に役立つかと思います。

今回紹介する方法を使えばAFFINGER5で任意の場所におすすめ記事を設置することができますので、サイドバー以外にもお試しください！
AFFINGER5おすすめ記事を設置する1

サイドバーに設置した追尾しないおすすめ記事

実際に設置してみた画面はこんな感じ。

AFFINGER5の標準機能でサイドのスクロールにおすすめ記事を設置すると、サイドバーにあるウィジェットの最下部におすすめ記事が表示され、追尾してしまいます。

AFFINGER5_おすすめ記事（人気記事）を設置する

はじめに留意点として、AFFINGER5には人気記事の自動作成機能はありません。
AFFINGER5ではおすすめ記事（人気記事）を手動で作成することになります。

手動作成ですが人気ページ＝アクセスが多いページは、Googleサーチコンソールやその他のツールで容易に確認できますので手動作成でも問題ありません。

「WordPress Popular Posts」という有名なプラグインを使用すれば、アクセスが多いページを自動的にランキング作成して表示してくれますが、このプラグイン最大のデメリットは非常に重たいことです。

サイト速度が重視されるSEOにおいてサイトが重たいというのは結構致命傷です。
検索エンジンメインに集客を狙うならこのプラグインは極力使わない方が吉です。

AFFINGER5_最新記事を表示する

まず人気記事とセットで使用されることが多い、最新の投稿を表示する機能。

AFFINGER5おすすめ記事を設置する2

最新の投稿ウィジェットは標準で備わっている

こちらはAFFINGER5の標準ウィジェットとして搭載されていますので、任意の場所にこのウィジェットを設置すればすぐに表示できます。

AFFINGER5_おすすめ記事を表示する

おすすめ記事の表示も簡単にできます。

AFFINGER5管理 ＞ おすすめ記事一覧
AFFINGER5おすすめ記事を設置する3

AFFINGER5管理 ＞ おすすめ記事一覧

こちらの「おすすめ記事一覧の作成」に見出しタイトルと表示したい投稿ページや固定ページの記事IDをカンマ区切りで入力し、表示したい箇所のチェックマークを入れればOKです。

その下にある「おすすめヘッダーカード」を利用すれば、サイトトップページの上部に任意の記事をタイル状に表示できますが今回は割愛します。

投稿や固定ページの記事IDの調べ方

カンマ区切りで入力する記事IDを確認する方法を一応おさらいします。
AFFINGER5おすすめ記事を設置する4AFFINGER5では投稿一覧ページにIDが表示されています。
また、IDを確認したい記事タイトルにマウスをのせてURLを確認することでも記事IDを調べることができます。
「post=○○」というところが記事IDです。固定ページも全く同じ方法でOK！

サイドバーに追尾しないおすすめ記事を設置する方法

ここからが本記事の本題。

AFFINGER5おすすめ記事を設置する5

AFFINGER5で選べるおすすめ記事の表示箇所

AFFINGER5の「おすすめ記事一覧の作成」メニューでは表示箇所が選べますが、表示できる箇所に限りがあります。

また「サイドのスクロールに表示にする」にチェックしてサイドバーに埋め込んだ場合、ページをスクロールするとサイドバーにおすすめ記事が追尾してしまいます。

AFFINGER5おすすめ記事を設置する6

サイドスクロール追尾に設置している目次

当サイトでは執筆時、サイドバーのスクロール追尾箇所には記事の目次を表示しているので、おすすめ記事は追尾しないでほしいのです！
これを解決します。

答え：AFFINGER5のおすすめ記事表示用のショートコードを使う。

よ～く見ると、投稿を編集する画面で選べるレイアウトの中に

タグ ＞ 記事一覧/カード ＞ おすすめ記事一覧

というのがありました。これを押すとショートコードが入力されるのですが、これをウィジェットで使用したところうまくいきました！

AFFINGER5おすすめ記事を設置する7

サイドバーに追尾しないおすすめ記事を設置する

外観 ＞ ウィジェット

に進み「サイドバートップ」に「00_STINGERカスタムHTML」か「カスタムHTML」をドラッグアンドドロップで設置し、タイトルを入力します。

続いて内容にAFFINGER5でおすすめ記事を表示するショートコードを書き込む。

[st-osusume]

こんな便利なコードがあったのですね！！

このショートコードを使えば、AFFINGER5で作成したおすすめ記事を好きなところに設置できます。
記事内にも設置できます！

おすすめ記事の見出し装飾の補足

少し気になったので一応。
AFFINGER5おすすめ記事を設置する8先ほどおすすめに表示する記事IDを指定したこちらの画面で見出しが入力できます。

AFFINGER5おすすめ記事を設置する9

「おすすめ記事一覧の作成」で見出しを入力した場合の装飾

この画面に見出しを入力すると、画像のような吹き出し風の装飾になりました。

サイト内の他のウィジェットと少し違うデザインなので、他のウィジェットとデザインを統一したい場合があります。

そんな時はAFFINGER5管理の方での見出しは空白にしておき、サイドバーに設置した「カスタムHTML」の方におすすめ記事の見出しタイトルを入力すると良いです。

おすすめ記事のCSS調整

他のサイドバーウィジェットとデザインを統一しましたが、まだ違和感があります。

AFFINGER5おすすめ記事を設置する10

見出しとおすすめ記事の間に空いた余白

見出しとおすすめ記事一覧の間に40pxのマージンと30pxのパディング、合計70pxの余白ができており、見た目がよろしくありませんので調整します。

※AFFINGER5でもともと指定してあるCSSを上書きします。
このまま使用する場合は念のためレイアウトに不具合が出ないか確認してください。

以下のコードを子テーマのstyle.cssに追加する。

/*おすすめ記事の上部パディング調整*/
.pop-box:not(.st-wpp-views-widgets), #side aside .kanren.pop-box:not(.st-wpp-views-widgets) {
padding-top: 0 !important;
}
.pop-box.kanren {
margin-top: 0;
}

padding-top:を0に指定しても他のスタイルが適用されてしまってうまくいかなかったので、!important;を付けて最優先にしました。

もっと良いやり方があるかも…時間がないのでうちはこれでいきます←

AFFINGER5おすすめ記事を設置する11随分見やすくなりました！

画像や文字を触りだすとキリがないので、またおすすめ記事のスタイルを改良したら別記事のリンクをこちらに付けて追記します。

まとめ

AFFINGER5テーマを使っている方に知っておいていただくと便利かも？
おすすめ記事（人気記事）の作成方法とサイドバーで追尾させない方法、その他＋αでした。

サイドバーのスクロール追尾スペースにおすすめ記事以外のウィジェットを設置したい方には良いかもしれません。

有料テーマはワンクリックで表示箇所を設定できるようにしてある分、こういう融通を利かせた利用には少し工夫が必要ですね。

-Wordpress
-

© 2021 ソロ学