ページナビにサムネイルを表示

投稿日:

トップページの本文表示にコメント欄カスタマイズと、いろいろと中途半端な状態ですが、今回は前回からの続きで、ページナビのカスタマイズをやっていきます。

今回やりたいのは、記事の下部にあるページナビゲーション――前後の記事へのリンクですね、ここに各記事毎に設定してあるサムネイル画像を表示させ、ビジュアル的に分かりやすくしよう、というものです。

 

今回の作業にあたり、予備知識が一切無いので、まずはネットで情報収集。

私が今まで見かけたサムネ付きページナビはほとんど同じデザインだったので、そういうプラグインでもあるのかな、と思っていましたが、どうやらそうではない様子。
コードを書き加える方法しか見つかりませんでした。

あと出てきたのは、『WP-Page Navi』というページ送りを挿入できるようにするプラグインの情報ばかり。
ページネーションはAFFINGER4にはデフォルトで付いていますので、デザインを変更したいとかでない場合には必要なさそうです。

 
調べた複数のサイトに書かれているカスタマイズ用のコードを見てみると、どれもこれもとんでもなく長ーいコードばかり。
しかも、画像の表示にはsingle.phpへの追加・変更が必要で、その後デザインを整えるために「スタイルシート」――「css」とかいうヤツへもコードを書かなくてはいけないようです。
このcssへの追記分のコードだけでなんと100行以上(!)
…10行くらいでもうオエッてなってるのにもうね…

 
とりあえず、cssってのはいったん忘れて、まずは今の私の技術でもできそうな、phpへの編集をやってみます。

サムネイル画像を読み込むには、どうやら
"<?php echo get_the_post_thumbnail($prevpost->ID); ?>"
"<?php echo get_the_post_thumbnail($nextpost->ID); ?>"
というのを一文ずつ付け足せばいいだけらしい。

お決まりとなったsingle-type1.phpの中の、"<!--ページナビ-->"と書かれたところから、似たような文面があったので、その間にテキトーに挟み込んでみる。

表示確認してみると、なんとこれだけでページナビにサムネイルが表示されるようになっていた!
…が、なんかサムネがでかすぎる

しかし情報元のサイトにはちゃんとサムネサイズの変更方法も書かれていて、上記の( )内を、
"($prevpost->ID, 'thumbnail')"
"($nextpost->ID, 'thumbnail')"
とすればいいらしい。

それではもう一度表示確認!
サムネイルはほどほどの大きさになってくれました。
PREV(NEXT)の文字、サムネイル、リンク先の記事タイトルの配置がちょっとバラバラですが、現時点ではそんなもんなんじゃないですかね。

表示確認のため、他のページへと移ってみたのですが、なんかおかしい…
サムネ画像が、前後の記事とも同じのが表示されちゃってます!

何ページか見てみると、前の記事のサムネが2つだったり、次の記事の方のサムネが2つになったりと、よくわからない挙動をしておられます。

もうこの時点で私はパニックなんですが、どうすればいいかも分からんので、見なかったことにして、cssに手を出してみることにしました。

 

上記のカスタマイズ記事の書かれていたサイトには、cssへの編集法は無かったので、cssへの記述分は別のサイトから持ってくる事にしました。
私にはコードの良し悪しは判断つかないので、画像付きページナビの完成形の画面から、一番自分好みの物を載せていたサイトのコードを使わせてもらうことにしました。

このコードこそが100行超えのなんかすごいヤツ。
たぶんスマホ・タブレットで表示を変えてるからなんだと思います。

cssってのは全然分からないのですが、他のphpファイルと同じところで編集できるみたいだし、やり方も一緒なんじゃねえの?といつも通りに最初は直感でいじってみる。
なんか最初から子テーマに用意されてたし、すぐに直せるだろうと。

んで100行のを「style.css」の末尾に足してみたんですが、表示に変化は無し
以前phpに初めて手を出した時、挿入場所が重要だった事を思い出し、上の方に挿し込んでみたけども、やっぱり何も変化無し。

 
こりゃcssってのは今までのとはなんか違うのかもよ?って感じになったので今さら情報収集。
「wordpress css」で検索かけると、候補に「css 反映されない」という何やら不吉なワードが…

これの検索結果を見てみると、まーー出るわ出るわ、cssが反映されなかったという情弱どもの嘆きの声が!!
…ハイ、私もその1人ですぅ…

で、パパッと目を通してみたんですが…

キャッシュを消せ
styleタグより優先度を上げろ
!importantを付けろ
CSSセレクタを指定しろ

だとかなんとか… 日本語でお願いしますよ…

あ、キャッシュっくらいは分かるかな、ブラウザの閲覧履歴とかそんな感じでしょ?たぶん、おそらく。

んで、ブラウザのキャッシュを削除して、三度サイトの表示確認!
結果は変化無し。
うん、なんとなくそんな気はしてた。

 
なんかもーどうしていいか分からずに検索結果にザーッと目を通していくと、「カスタムCSS」って言葉が目に留まる。
そういえば、Jetpackを入れた時に、そんなような機能が追加されてた、みたいな記事を書いた記憶がある。

ほんで[外観]メニュー内[CSS編集]を押してみると、カスタマイザーが立ち上がり、「追加CSS」なる画面に辿り着いた。
ここは先のstyle.cssと違い、中身には何も入っていないようだ。カスタマイズ専用っぽいね。

これはいいですね。100行とか突っ込むと、元々書いてあったコードと、追加分の区別がつきにくくなるんですよね。
ここなら全部を追加分だけで埋めてよさそうなので、さっきのコードをこっちに移してみる。
四度目となる表示確認、結果はハイ、変化無し

 
なんかもーこりゃムリだなーと思ったので、別のことしてみる。

あ、その前にちょっと自分用のメモ。
style.cssに手を加え、結局元に戻したんだけど、その際親テーマのstyle.cssのコードを見て戻せばいいやーと思ってたんですが、このstyle.cssってのは親と子で中身が全然違うのですね。
さっきの「反映されない」の検索結果を見ても、なんだか子テーマのスタイルシートをいじる場合とで対処法が違うっぽいし。
なので、元のコードが見れなくなってしまい、追加分だけは消したんだけど、ちゃんとAFFINGER4の元の通りになっているのかちょっと不安…

 

さて、ここまでで全くと言っていいほど進展がなく、正直だいぶやる気も落ちてきた。
仕方が無いので、個人的には避けたかったカスタマイズ法に手を出してみる。

それは、single.phpへのサムネ付きページナビ実装の際のコードを、今回最初にやった(そして現在表示がおかしくなっている)、AFFINGER4の元コードに「付け足す」やり方ではなく、ページナビの部分のコードを、ネット上の新しいページナビ部のコードに「置き換え」るというやり方。全取っ替えですね。

 
これはちょっとやりたくなかったんですよね…
だって『AFFINGER4』って有料テーマじゃないですか、お金払った訳ですよ。
それをネット上に転がってたコード――勿論無料の、に(一部分とはいえ)まるっと書き換えた方が良い物ができる、ってのは何だか腑に落ちません。

まぁAFFINGER4ってのはSEOに強い、とかが売り文句のようなので、きっとコメント欄とかページナビとか、この辺はSEOってのには関係無い部分だったんでしょうね。
WordPressのデフォルトまんまみたいですし、カスタマイザーにも用意されていない。
子テーマならいくらいじっても親テーマの中身見れば戻せますし、食わず嫌いせずにまずは挑戦してみますかね。

 
ここでphpに加えるべきコードも、私の理想の完成形に一番近い物であったサイトからのなので、先のcssに加えたコードと本来セットであった物ですね。

cssほどではありませんが、こちらもけっこう長いコードでしたが、かまわずAFFINGER4のページナビ部の上からドーンって貼り付け。

どうせ上手くいかないだろうなーとか思いながら、表示確認。すると…
上手くいってました!!
サムネイルは適度に小さくなり、ちゃんと前の記事と次の記事でそれぞれのサムネ画像が表示されています!
ついでにコメント欄との間隔も多少開いています!

欠点はというと、
前後の記事の並びが横ではなく縦に並んでいる点。
最新・最古の記事の表示時に出るホームへのリンクアイコンがカッコ悪い
文字リンクのクリックできる領域が端まで続いている、
といったところでしょうか。

しかし、前までのと違い、致命的という程の欠点ではありません。
縦並びは本来cssで調整するはずのものだし、ホームアイコンはコードから該当部分を削除すれば多分表示されなくなると思うし、クリック領域は……がまんする!!時には諦めも肝心よね。

 

作業量としてはコピペだけなので、大してやっていないはずなんですが、やってもやっても上手くいかない、というのは精神的にキツイですね(ll゚д゚)

今はページナビが縦並びになっちゃってますので、多少不恰好ではありますが、それでもデフォルトの、文字リンクだけの縦並び よりかはマシになったかな~て思ってます。

次回は今回匙を投げたCSSをもうちょい勉強してみて、他の多くのブログで使われているような横並びでシャキッとしたサムネ付きページナビの完成を目指したいですね。

-ウェブサイト作成

Copyright© ガンプラ気分 , 2020 All Rights Reserved.