WordPress

AFFINGER5のおすすめ記事一覧をサイドバーのもっと上に表示する方法

投稿日:2018年7月25日 更新日:

AFFINGER5では任意の記事IDを指定し一覧として表示する「おすすめ記事一覧の作成」機能があります。

これをサイドバーに表示する場合、デフォルトでは最下段にしか表示できません。それをサイドバーの上部に表示するカスタマイズ方法をご紹介します。

2018年7月30日追記:

この記事はパソコンでの表示について解説しています。スマホでは表示されないのでご注意ください。

スマホに表示したい方は、以下に解説する「おすすめ記事一覧」に選んだ記事で、さらに新しいカテゴリーを作成し「カテゴリースライダー」をご利用ください。

affingerslider
AFFINGER5(WING)のスライダーの設置方法!読込・表示速度も比べてみた!

続きを見る

この記事はAFFINGER5(WING)ver20180621で解説しています。
変更は親テーマからファイルをコピーし、子テーマにアップロードして行います。子テーマの設置は完了しているものとします。
ここではFTPクライアントソフトとテキストエディタを使いファイルごとカスタマイズする方法を解説します。基本操作はこちらをご参照ください。
また変更後は確認作業のためブラウザのキャッシュのクリアを推奨します。Googleクロームの操作はこちらをご参照ください。

 

おすすめ記事一覧の作成方法

「おすすめ記事一覧」の作成はダッシュボード「AFFINGER5管理」>「おすすめ記事一覧」で行います。

osusumepost01

[1]任意のタイトルを入力します。

[2]一覧にしたい任意の投稿記事、固定記事の記事IDを入力します。複数の記事IDは半角英字「,」で区切ります。たとえば「12,345,456,7891」などのようなスタイルです。

記事IDは当該記事の「投稿の編集」画面を表示し、ブラウザ上部アドレスバーで確認できます。URLに含まれる「~.php?post=」の直後の数字が記事IDです。AFFINGER5の場合「投稿一覧」画面でも確認することができます。

[3]「おすすめ記事一覧」を表示する位置を指定します。サイドバー、記事下、トップ、カテゴリーに表示することが可能です。

[4]設定が完了したら「save」で確定します。

 

サイドバーへの表示は最下段

今回は「おすすめ記事一覧」のサイドバーへの表示がテーマですから前項[3]の「サイドのスクロールに表示にする」にフォーカスします。

サイドバーに表示できるのはここ1ヵ所のみで、これを選択した場合、サイドバーの最下段の表示となります。

ダッシュボード「外観」>「ウィジェット」画面で確認すると

osusumepost02

[3]「スクロール広告用」の中。しかも広告を配置してある場合、さらにその下の表示となります。

これではせっかくの「おすすめ記事」がもったいない気がしませんか。

そこでIT-SORAYORIは[1]の上[1]と[2]の間[2]と[3]の間に表示する方法を探ってみました。

 

サイドバーのもっと上に表示する方法

 

step
1

 

AFFINGER5の親テーマから「sidebar.php」ファイルをコピーします。

 

step
2

 

いったんデスクトップに保存します。そしてこのファイルのコードを変更します

 

step
3

 

デスクトップに保存した「sidebar.php」ファイルをテキストエディタ「サクラエディタ」で開いてみます。

すると下段につぎの記述があります。

osusumepost03-2

 

赤枠の部分「任意のエントリ」と記された1行をカットし、別の場所にコードを変えてペーストします。

じつはこの記述が「AFFINGER5管理」で「サイドのスクロールに表示にする」をチェックした際、自動的にリンクし「おすすめ記事一覧」を表示するための部分です。

現在は「スクロール・アド(<div id="scrollad">)」の中に配置されるようコードが置かれています。

2018年7月30日追記:

この操作はパソコンでのみ有効です。スマホでは表示されないのでご注意ください。

 

step
4

 

前項のコードをつぎのように変えます。

単純に前後に1行ずつ加えたただけです。

そして元の場所からは削除しておきます。

osusumepost04-2

2018年7月30日追記:

この操作はパソコンでのみ有効です。スマホでは表示されなくなるのでご注意ください。

 

step
5

 

ステップ4で作成したコードをつぎのいずれかの場所に挿入します。

osusumepost05-2

Aはサイドバーのトップの位置です。

Bはダッシュボード「AFFINGER5管理」>「トップページ」>「新着記事一覧」を設定した場合の一覧の上の位置です。

Cは同「新着記事一覧」を設定した場合の一覧の下、かつサイドバーウィジェットの上の位置です。

Dはサイドバーウィジェットの下、かつスクロールの上の位置です。

前述の「ウィジェット」に照らし合わせると

osusumepost06

このようになります。

コードの配置が完了したら、変更を保存します。

 

step
6

 

ステップ5で変更しデスクトップに保存した「sidebar.php」ファイルを子テーマに移します。

 

step
7

 

ステップ6までの作業を実施した後、「AFFINGER5管理」で「サイドのスクロールに表示にする」をチェックしていると、サイドバーの「スクロール広告用」の中ではなく、設定した場所に「おすすめ記事一覧」が表示されるようになります。

 

以上で「おすすめ記事一覧」の表示場所のカスタマイズは完了です。どうぞ、お好みの位置に配置してください。

AFFINGER5の最新版の詳しい情報はこちら(スポンサーリンク)からどうぞ。

 

「おすすめ記事一覧」に選んだ記事で新しいカテゴリーを作成すれば「カテゴリースライダー」が活用できます。さらに目立つスタイルで、さらに自由な位置に! 読込速度への影響も思いのほか軽微でした。

affingerslider
AFFINGER5(WING)のスライダーの設置方法!読込・表示速度も比べてみた!

続きを見る

-WordPress
-

Copyright© IT-SORAYORI , 2018 All Rights Reserved.