伝えたい想いを自分らしく・・・

Kanamii

スポンサーリンク

STINGER・AFFINGERカスタマイズ

【AFFINGER4】前の記事・次の記事へのページナビゲーションをサムネイル付きにする方法

投稿日:2017年8月31日 更新日:

WordPressテーマ「AFFINGER4」の前の記事と次の記事へのページナビゲーションをサムネイル付きの表示に変更する方法をご紹介します。

kanamii-2150-3

こちらのカスタマイズは、参考サイト様のコードをほぼそのまま使用させていただいていますので、タイトルをつけた個別ページは作成せず、以前はアドセンスの横並びの記事の最後に追記という形で掲載していたものですが、「どこに載っているのか見つけられない」といったお問い合わせを度々頂戴することもあり、新規ページとしてまるっとこちらに移動することにしました。

参考にさせていただいたのはこちらのページです。
ありがとうございます。

参考【WordPress】前の記事・次の記事にサムネイル画像を表示する - shufulife

スタイルをほんの一部ですが変更させていただいていますので、当ブログでの表示例としてstyle.cssに追加したCSSコードと「NEXT」「PREV」のテキストをFont Awesomeの矢印アイコンに変更する方法のみを掲載させていただきます。

※テーマファイル(single-type1.php)に追加するコードは、参考サイト様にてご確認ください。

スポンサーリンク

子テーマの作成

AFFINGER4をお使いの場合、こちらのカスタマイズは「single-type1.php」と「style.css」、さらに必要に応じ「single.php」を編集します。

style.cssは、あらかじめ子テーマが用意されていますが、テーマのアップデートによってカスタマイズ内容が消えてしまわないように、必ず「single-type1.php」と「single.php」の子テーマを作成してください。
「single.php」は、初回カスタマイズのみ編集が必要になります。
どちらも他のカスタマイズで既に作成済みの場合は、新たに作成する必要はありません。

AFFINGER4で初めて「single-type1.php」の編集をされる方はこちらの項目をご確認の上、必ず「single.php」の「TEMPLATEPATH」を「STYLESHEETPATH」に修正してください。
WordPressのカスタマイズ ~子テーマ利用のメリットとデメリット・各テーマファイルの子テーマ作成方法~ - ゼロからのWordPress入門【18】

前ページでは、WordPressのファイルとデータベースのバックアップ方法をご紹介しました。 もしものトラブルに備えてバックアップ方法をマスターしたら、次のステップはテーマのカスタマイズです。 ご自身 ...

続きを見る

検索エンジンに表示される記事タイトルに「NEXT」「PREV」が表示されてしまう

サムネイル付きページナビゲーションを設置後、検索エンジンに表示される記事タイトルの先頭に「NEXT」または「PREV」の文字が表示されてしまう現象が見られました。

対応策としてテキスト部分をFont Awesomeの矢印アイコンに変更し、現在はこのような表示となっています。

検索エンジンでの表示を伝えてくださった、はまさん(@hakata_no_onago)いつもお世話になりありがとうございます。

コードの編集方法

single-type1.phpに追加したコードの編集方法です。

パソコンの「Ctrlキー」+「F」で表示される検索欄に「PREV」と入力してマークされる文字を削除→以下のコードに書き換えます。

同じく、 パソコンの「Ctrlキー」+「F」で表示される検索欄に「NEXT」と入力してマークされる文字を削除→以下のコードに書き換えます。

下記、赤線部分の2か所です。

コードの追加箇所

当ブログでは、sinle-type1.phpの下記<!--ページナビ-->以下、<!--/post-->直前までのコードを<?php /**/ ?>で囲んでコメントアウト。その直後に新しいコードを入れています。

style.cssの記載例

以下、当ブログでstyle.cssに追加しているコードです。

全体のスタイル

ホームへのアイコンフォントの背景色とマウスホバー時の背景色を変更しました。

端末ごとのスタイル

スマホ表示時のサムネイルを左右寄せにしてタイトルの文字の回り込みを解除、余白を調整しました。

子テーマのstyle.cssに追加したコードが反映されない場合は、キャッシュをクリア及び、追加場所を先に入力しているコードの前に変更して再度お試しください。

以上、AFFINGER4の前の記事と次の記事へのページナビゲーションをサムネイル付きの表示に変更する方法をご紹介しました。

最後までお付き合いくださりありがとうございます。

この記事が気に入ったら
いいね!しよう

Twitter で

Facebook・Twitterへ最新記事をお届けします

-STINGER・AFFINGERカスタマイズ

スポンサーリンク

Copyright© Kanamii , 2017 All Rights Reserved Powered by AFFINGER4.