WordPressテーマ「AFFINGER4」の前の記事と次の記事へのページナビゲーションをサムネイル付きの表示に変更する方法をご紹介します。
こちらのカスタマイズは、参考サイト様のコードをほぼそのまま使用させていただいていますので、タイトルをつけた個別ページは作成せず、以前はアドセンスの横並びの記事の最後に追記という形で掲載していたものですが、「どこに載っているのか見つけられない」といったお問い合わせを度々頂戴することもあり、新規ページとしてまるっとこちらに移動することにしました。
参考にさせていただいたのはこちらのページです。
ありがとうございます。
参考【WordPress】前の記事・次の記事にサムネイル画像を表示する - shufulife
スタイルをほんの一部ですが変更させていただいていますので、当ブログでの表示例としてstyle.cssに追加したCSSコードと「NEXT」「PREV」のテキストをFont Awesomeの矢印アイコンに変更する方法のみを掲載させていただきます。
※テーマファイル（single-type1.php）に追加するコードは、参考サイト様にてご確認ください。
スポンサーリンク
Contents
子テーマの作成
AFFINGER4をお使いの場合、こちらのカスタマイズは「single-type1.php」と「style.css」、さらに必要に応じ「single.php」を編集します。
style.cssは、あらかじめ子テーマが用意されていますが、テーマのアップデートによってカスタマイズ内容が消えてしまわないように、必ず「single-type1.php」と「single.php」の子テーマを作成してください。
「single.php」は、初回カスタマイズのみ編集が必要になります。
どちらも他のカスタマイズで既に作成済みの場合は、新たに作成する必要はありません。
-
-
WordPressのカスタマイズ ～子テーマ利用のメリットとデメリット・各テーマファイルの子テーマ作成方法～ - ゼロからのWordPress入門【18】
前ページでは、WordPressのファイルとデータベースのバックアップ方法をご紹介しました。 もしものトラブルに備えてバックアップ方法をマスターしたら、次のステップはテーマのカスタマイズです。 ご自身 ...
検索エンジンに表示される記事タイトルに「NEXT」「PREV」が表示されてしまう
サムネイル付きページナビゲーションを設置後、検索エンジンに表示される記事タイトルの先頭に「NEXT」または「PREV」の文字が表示されてしまう現象が見られました。
対応策としてテキスト部分をFont Awesomeの矢印アイコンに変更し、現在はこのような表示となっています。
検索エンジンでの表示を伝えてくださった、はまさん（@hakata_no_onago）いつもお世話になりありがとうございます。
コードの編集方法
single-type1.phpに追加したコードの編集方法です。
パソコンの「Ctrlキー」+「F」で表示される検索欄に「PREV」と入力してマークされる文字を削除→以下のコードに書き換えます。
|
1 |
<i class="fa fa-arrow-left fa-2x" aria-hidden="true"></i> |
同じく、 パソコンの「Ctrlキー」+「F」で表示される検索欄に「NEXT」と入力してマークされる文字を削除→以下のコードに書き換えます。
|
1 |
<i class="fa fa-arrow-right fa-2x" aria-hidden="true"></i> |
下記、赤線部分の2か所です。
コードの追加箇所
当ブログでは、sinle-type1.phpの下記<!--ページナビ-->以下、<!--/post-->直前までのコードを<?php /**/ ?>で囲んでコメントアウト。その直後に新しいコードを入れています。
style.cssの記載例
以下、当ブログでstyle.cssに追加しているコードです。
全体のスタイル
ホームへのアイコンフォントの背景色とマウスホバー時の背景色を変更しました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
/*サムネイル付きページナビゲーション ここから*/ #prev_next { width:100%; margin: 36px 0 24px; padding:0; display: table; } #prev_next #prev, #prev_next #next { width: 50%; padding:30px 10px 10px; border-top:#ccc 1px solid; border-bottom:#ccc 1px solid; display: table-cell; position:relative; text-decoration:none; } #prev_next #prev p, #prev_next #next p { font-size:90%; line-height:1.5; } #prev_next #prev:hover, #prev_next #next:hover { background-color: rgba(238,238,238,0.7); } #prev_next #prev { border-right:#ccc 1px solid; } #prev_next #prev_title, #prev_next #next_title { font-size:90%; top:-1em; position:absolute; border: 1px #ccc solid; background:#fff; text-align: center; padding:3px; color:#666; } #prev_next #next_title { right:10px; } #prev_next #prev img, #prev_next #next img { margin:0 auto; } #prev_next #prev_no, #prev_next #next_no { width: 50%; height:140px; padding:0 10px; display: table-cell; } #prev_next #prev_no { border-right:#ccc 1px solid; } #prev_next_home { margin:0 auto; background-color: #ccc; border: solid 9px #fff; width: 100px; height:100px; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; box-shadow: 0 0 0 3px #ccc; -webkit-box-shadow: 0 0 0 3px #ccc; -moz-box-shadow: 0 0 0 3px #ccc; text-align:center; } #prev_next_home:hover { background-color: #ddd; } #prev_next_home i { color:#fff; margin:10px auto ; font-size:60px; } |
端末ごとのスタイル
スマホ表示時のサムネイルを左右寄せにしてタイトルの文字の回り込みを解除、余白を調整しました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
/*PC・タブレット表示*/ @media print, screen and (min-width: 768px) { #prev_next #prev, #prev_next #prev::before, #prev_next #prev::after, #prev_next #next, #prev_next #next::before, #prev_next #next::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all .3s; transition: all .3s; } #prev_next #prev_title, #prev_next #next_title { padding:3px 10px; } #prev_next #next_title { right:10px; } #prev_next #prev img { float:left; margin-right:10px } #prev_next #next img { float:right; margin-left: 10px; } } /*スマホ表示*/ @media print, screen and (max-width: 767px) { #prev_next #prev img { float:left; } #prev_next #next img { float:right; } #prev_next #prev p, #prev_next #next p { clear: both; padding-top:10px; } #prev_next #next p { margin-left:10px; } } |
以上、AFFINGER4の前の記事と次の記事へのページナビゲーションをサムネイル付きの表示に変更する方法をご紹介しました。
最後までお付き合いくださりありがとうございます。