コピペで一発！ページナビゲーション（前の記事Prev・次の記事Next）にサムネイル画像を表示してサイトを可愛くしよう【キャッシュをクリアの正しいやり方】参考サイトのご紹介

相変わらず「ページの読み込み速度の改善」について、「私が自分で簡単にやれる方法」を朝から晩までググりまくっているのですけどね…

ちょいちょい「このサイト可愛くない？」っていうページナビゲーションの仕様を見かけるのです。

困った時の「Kanamii.jp」って事で見てみたらば…

なってるーーーーーーー！！

でも、おっかしいなあ…

そんなカスタマイズの記事は無いはず。

言っときますけど私、そこらのクローラーより、Kanamii.jpを徘徊してますからね。

サイトマップは頭に入ってるんです。

その私が知らないって事は、テーマのバージョンアップかなんかで出来るようになったんじゃないか？と踏んでバージョンアップをしてみました。

AFFINGER4公式ガイド←公式ゆえ随時更新されているのでここからで心配ご無用（現段階での最新はver20170820）

…なるほど。

全然なってない。

みたいな事でですね、必死こいて探して

上載のスクショのページ【2016年7月5日投稿】に「追加のカスタマイズ」って2017年6月の更新で、ちゃんと追記してくれてあるのを見付けました。→現在は新しい「記事」として更新して下さっています（下記参照）

んもうっ。記事タイトルに見付けられなくて、はなこクローラーったらうっかり見逃がしちゃってました。てへ

ページナビゲーション（前の記事・次の記事）も可愛いくしよう（仕様）！

この方法では「アイキャッチを設定していない記事では画像は表示されません」

ふふふっ！全記事、その都度、心を込めて選りすぐりの1枚を厳選して貼ってきた私、勝ち組！

どのページも可愛いんだからっ♡

エルちゃん、ワサビ君、その他いっぱいのカワユスニョロリン達、待っててね！そこでもジャーンとお披露目できるようにするからね！

皆、可愛さジャンジャン振りまいてね！！

よし、さっそくやってみよう。

先ずは、その記事でKanamiiの中の方が「こちらを参考にさせて頂きました。」って教えて下さっているサイトを見に行きました。

⇒Shufulifeさん：【WordPress】前の記事・次の記事にサムネイル画像を表示する

ドーン！！

みたいに、かなり気前の良い、太っ腹な記事がありました。

ありがたい事です。

ちなみに私はAFFINGER4なので、

single-type1.phpに丸っとコピペ

するのはここ

ってKanamiiさんが教えてくれている通りの場所に

そのままだと、検索エンジンに表示される記事タイトルの先頭に「NEXT」または「PREV」の文字が表示されてしまうそうなので、Font Awesomeの矢印アイコンに変更するように少しコードをいじりました。

※私はやっぱり文字を入れました（理由は後述してあります）

「いじった」とか言ったって、それも丸っとコピーさせてもらっただけです。

やり方もその説明も全部こちら（Kanamiiさん：【AFFINGER4】前の記事・次の記事へのページナビゲーションをサムネイル付きにする方法）に載っています。

で、出来上がったのが、こちら

※こちらは3枚目の画像のコードになります【矢印の向き】【文字】は独り言で説明の通りです。それぞれで変更して下さい※

<div id="prev_next" class="clearfix">
<?php
$prevpost = get_adjacent_post(false, '', true); //前の記事
$nextpost = get_adjacent_post(false, '', false); //次の記事
if( $prevpost or $nextpost ){ //前の記事、次の記事いずれか存在しているとき
?>
<?php
if ( $prevpost ) { //前の記事が存在しているとき
echo '<a href="' . get_permalink($prevpost->ID) . '" title="' . get_the_title($prevpost->ID) . '" id="prev" class="clearfix">
<div id="prev_title">前の記事<i class="fa fa-arrow-right fa-2x" aria-hidden="true"></i></div>
' . get_the_post_thumbnail($prevpost->ID, array(100,100)) . '
<p>' . get_the_title($prevpost->ID) . '</p></a>';
} else { //前の記事が存在しないとき
echo '<div id="prev_no"><a href="' .home_url('/'). '"><div id="prev_next_home"><i class="fa fa-home"></i>
</div></a></div>';
}
if ( $nextpost ) { //次の記事が存在しているとき
echo '<a href="' . get_permalink($nextpost->ID) . '" title="'. get_the_title($nextpost->ID) . '" id="next" class="clearfix">
<div id="next_title"><i class="fa fa-arrow-left fa-2x" aria-hidden="true"></i></div>
' . get_the_post_thumbnail($nextpost->ID, array(100,100)) . '
<p>'. get_the_title($nextpost->ID) . '</p></a>';
} else { //次の記事が存在しないとき
echo '<div id="next_no"><a href="' .home_url('/'). '"><div id="prev_next_home"><i class="fa fa-home"></i>
</div></a></div>';
}
?>
<?php } ?>
</div>

お次は

style.cssにCSSコードを追加する

見た目を整えなきゃいけませんからね。

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

Kanamiiさんと同じように可愛くしたいから、これもそのまま全部パクっと♡

/*サムネイル付きページナビゲーション　ここから*/
#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;
}

端末ごとのスタイル

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

よし！出来た！！

----これ以下、しばらく「私の経緯」が独り言のように続きます----

なんか違う…

あっれーーーーー？？

どこを間違えたのかな(。´･ω･)?

----解決済です一番下へ----

「その通り」ならなかったなりの結果オーライ！（まだ独り言です）

上記のコードをきちんと実装済の当サイト

左「prev」：「Next」右

になるはずと踏んでのそれでしたが、どうしても上下でしかお知らせ出来ません。

上「prev」
下「Next」

なので「矢印」の向きがどうしても気持ち悪い※ので、PREV（前の記事）が右矢印になるように変更しています。

※私は昭和の人間なので、右閉じの本（右側のページが若い数字）で育ちました。

だから、こっちの方が落ち着くのです。

まっ、負け惜しみじゃないからね！！

ちゃんと知ってるんですよ。サイトでは

左「前の記事」：「次の記事」右

がデフォって。だから、右と左で表示できるようになったら、きちんとそのルールに従うから、それまでの策としてこうしておきます。って事ですからね、これ。

ただ、いくら私が「こっちの方が落ち着く」とか言ったって、初めていたちのおうちに来てくれた方には結局それでは「どっちがどっちか分からない状態」になってしまうかもしれないなあ…って思ったので、一晩悩んで「前の記事」だけ言葉を入れる事にしました。

上記のコード時

「そもそも」の話し

「じゃあ、ややこしいだけの矢印要らないじゃん」って最もなご意見を頂いたので

<i class="fa fa-arrow-right fa-2x" aria-hidden="true"></i>

と

<i class="fa fa-arrow-left fa-2x" aria-hidden="true">

を削除して「次の記事」を書き足しました。

出来てますから！

っとワーワー騒いでいましたが、「私の」パソコンでは上記のような現象だったというだけです。

「えっ？ちゃんとなってるよ」って数人の方から、スクショ付きでご連絡頂きました。

だから、本当に

上記のコードで全然問題ありませんからね！！

要するに、私の個人的な問題でした。

編集中なんですけども

間違いを正してきちんとするか、「無かった事にするか」しなきゃいけないのは百も承知なのですが、

こんな日に限って、私、これからちょっと所用が入ってまして…

どこまで巻き戻れば良いのかも分からない状態でいったん離れなきゃいけないんですorz

参考にさせて頂いたサイトさんは絶対、間違ってないはずなんです！！！

私がどこかを間違えてるだけなんです。

きちんとやり直したら、また改めてご紹介させて頂きます。

本当すみません

きちんと教えてくれているのに…

丸っとパクっとさせて頂いてるはずなのですが、どこかをパクり間違えてるのか…いや、パクるだけじゃダメなのか…

帰ってきたら、もう一度きちんと見直します！！！

キャッシュをクリア「正式なやり方」

私、GoogleChromeを使ってるんですけどね

拡張機能に「キャッシュクリーナー」を入れてるんです。

それで「全部出来る」って思い込んでいたのです。調べていたら、それは（何だか難しい事が書いてあったけど）要するに「軽いキャッシュを軽くクリアにする物」だそうで、

ブログのHTML・CSSの変更をした時には「ガッツリ消さなきゃダメだよ」って初めて知りました。

ガッツリ消す方法

表示更新（通常読込）

PCのキーボードの【 F5 】を何度か押してください。

サイト表示が更新されます。

スーパーリロード(強制読込)

ですが、最近はブラウザのキャッシュが強烈で【 F5 】では更新されないときがあります。

スーパーリロード という方法をお試しください。

「Ctrl」＋「F5」か

「Shift」＋「F5」で出来ます。

ブラウザ毎に方法が違うそうなので、その詳細はこちら

⇒みんなの知識ちょっと便利帳 Webページを最新の状態で見る（ブラウザーのフルリロード、スーパーリロード）

GoogleChrome キャッシュの消去とハード再読込

私は上の「Ctrl+F5」で出来ちゃいましたけど、

GoogleChrome はスーパーリロードでも更新されないときがあります。

キャッシュの消去とハード再読込 という方法もありますのでお試しください。って事もかいてあったので、そんな時にはこちらをどうぞ

⇒AIOS CMSマニュアルサイト Chromブラウザの頑固なキャッシュを完全に削除するスーパーキャッシュクリア方法

お陰様で晴れて問題解決です！

やったー！！！！

参考にさせて頂いた多くのサイト運営者さま、ありがとうございました。