ページナビゲーションの追加カスタマイズ

投稿日:

前回の予告通り、今回のブログカスタマイズはページナビゲーションに手を加えていきます。

ページナビってのはアレです、記事下によくある「前(次)の記事へ」と書かれた前後記事へのリンクのことです。
 

このサイトのページナビはAFFINGER4デフォルトのテキストのみのリンクから、ネット上からコードを拝借してカスタマイズしたサムネイル画像付きのページナビとなっております。

この辺の作業記録は去年の5月の記事にありますが、画像を一切使ってない上に見出しタグも使っていない頃の記事なので正直見返したくもないですね(苦笑)
 

今回行なっていくカスタマイズは、コードのコピペによりネットでよく見るデザインのページナビとなってしまっている現在の形から、自分好みのデザインに少しだけ変えてみよう、ってだけの話です。

私はphpとかCSSとか書けない・読めない人間なので、表示されてる文言をちょろっと変える程度に留まると思います。

大した作業でも無いのですぐに終わるでしょう。
…なんか前回もこんなこと言っててえらい目に遭ったような?

 

上部ページナビ(テキスト)のカスタマイズ

さて、まずは記事下部のサムネ付きページナビに取り掛かる前に、当サイトに増設した記事上部のページナビの方からカスタマイズしていきます。

ここのページナビーションはAFFINGER4デフォルトには備わっていなかったため、元々あったテキストのみのページナビを移動してきました。

現時点ではこうなっています↓

上部ページナビ

移動する際に、デフォルトでは上がPREVで下がNEXTだったのを入れ替えています。
記事一覧画面では上から新着として表示されるのでそれに合わせた形です。
 

ここに行なうカスタマイズは至極単純。 上記「PREV」「NEXT」の表記を分かりやすい日本語に変えたいってだけ。

NEXTはともかく、「PREV」ってなじみなくない?
NEXTとセットで表記されてればまーなんとなく分かりますが…

では何に変えるか、なんですが…
直訳すりゃ「前」「次」ですね。 ちょっとシンプルすぎやしないか。

よく見るのが「前の記事へ」「次の記事へ」ですね。 きっとこれが一番無難。
でも私はこれ好きじゃないんですよね。
 

新しい記事から古い記事へと時系列に逆らって読み進めていた場合、「の記事を読もう」と思っても押すのは「の記事へ」のリンクになるんですよ。 これややこしくないですか?

私は過去に何度も違和感を覚えたんですよね。
どっちが前でどっちが次かってのは読み手の読んでいる順序によって変わると思うんですよ。
一本道をどっち向きに進んでいるかのイメージ。

なので私は「前の記事へ」「次の記事へ」は使いたくない。
んで考えた結果、上記でもチラッと書いてますが「古い記事へ」「新しい記事へ」にすることにしました。
これなら逆順で読んでいても「の記事は古い記事だな」って分かるはず。たぶん。

 

やっとこっからが実際のカスタマイズ作業になります。

今回いじっていくのはほとんど「single-type1.php」になってきますね。
 

ここで忘れちゃならんのが、テーマの編集はWordPress上からでなく、FTPから編集しなければならないということ。

WordPress4.9からの新機能、「構文エラーチェック機能」により[テーマの編集]画面からは編集できなくなりました。(使用しているテーマによって差異あり)

この話は前回の記事にて散々書いたので、ここでは割愛。
 

それではロリポップFTPから子テーマ内の single-type1.php を開いて、「PREV」「NEXT」の文字を探して「古い記事へ」「新しい記事へ」に書き換えます。
サイト上に表示されるテキストを差し替えるだけなので、特にコードが読めなくてもなんとかなりますね。

あっという間に完成↓ いや~簡単でし…

上部ページナビ(未完)

…ん? なんか表示がおかしいぞ?

これは……おそらくですが、CSSでデフォルトの「PREV」「NEXT」の文字の幅に合わせた入力欄が固定されてたっぽいですね。
 

さー困ったぞ。
ここのデザイン自体はAFFINGER4デフォルトのままなので、子テーマに追加した style.css にはこの上部ページナビに関する記述は何もしていない。

ということは、ここのデザインは親テーマのCSSで決められているはず。
再びFTPから今度は親テーマ内の「style.css」の中を探ってみる。

コード内を検索するコマンドみたいのもあるようですが、なんか難しそうなので私はバーッとスクロールしてページナビに関する記述を5573行の中から探す。

幸いにもコードが規則的に書かれていたおかげで、さほど時間もかからず見つかりました。
ありがとうステ子ちゃん。 いや、ENJIさんか。
 

このまま親テーマをいじっても今後テーマのアップデートがあった際に上書きされて消えてしまう可能性があるので、ページナビに関する部分だけをコピーし、子テーマの「style.css」に貼り付ける。

問題はこっからですね。 このコードの中からどこをどういじればいいのか。
正直もう当てずっぽうですね。 ま、今までもそれでやってきましたからw

とりあえず「幅」を広くしたいんで、「width」を倍にしてみる。
すると…

上部ページナビ(完成)

お? なんかうまくいったっぽい!!
 

ツイてますね。 一発で成功するなんて。

若干気になるのは文字数の差ですね。
「新しい記事へ」が6文字。
「古い記事へ」で5文字。
以前の PREV/NEXT と違い縦並びで段差ができるのが少しだけイヤ。
 

なので文字数を揃えるための案を軽く考えてみましょう。

「ふるい記事へ」で6文字とかどうでしょう?
なんだか小馬鹿にされてる感が…

「新い記事へ」で無理矢理5文字にしてしまうとか?
新らしい という間違いは見たことありますが、コレはさすがに…

「古~い記事へ」ならどうだ!?(お~いお茶的な)
数十年前に書かれた記事へ飛びそうなのでナシですね。

あと思いつくのは「新記事」「旧記事」で合わせるくらいですが、
新記事はともかく旧記事なんて表記は見たことないですね…
 

どれもパッとしないのでこのままにしときます。
使ってりゃ慣れてくるでしょう、きっと。

 

下部ページナビ(サムネ付)のカスタマイズ

さてさて、少しつっかえてしまいましたがここからが今回のメイン、記事下部のサムネイル付きページナビゲーションのカスタマイズに入っていきます。

ここでやるのは、一つは先ほどと同じく PREV/NEXT の表記を変更すること。

そしてもう一つは最新記事、あるいは最古記事時のみに表示される、HOMEへのリンクボタンのカスタマイズ。
 

PREV/NEXT の表記を変更

最初は簡単そうな方から。

の前に、現時点でのサムネ付きページナビがコチラ↓

下部ページナビ

普段あまり意識して見ることは無い部分でしょうが、多くの方がこのデザインを使用しています。
 

ここの PREV/NEXT の表記を書き換えます。
上部ページナビと同じにしてサイトに統一感を持たせたいので、ここも「古い記事」「新しい記事」でいいでしょう。

「single-type1.php」からコードを書き換え。
ほとんどさっきと同じ作業ですね。

完成したのがコチラ↓

下部ページナビ(完成)

テキストを入れてる枠も文字数に合わせて伸びてくれてますね!

これならCSSへの編集は必要なさそうです。

では、ここはこれにて完了。
 

次の記事が存在しないときのHOMEボタンのカスタマイズ

次の作業は「次の記事が存在しないとき」、つまり最新記事を表示している時にのみページナビに表示されるHOMEへのリンクボタンをカスタマイズしていきます。

カスタマイズ前の時点ではこうなっています↓

下部ページナビ[最新]

特徴的なHOMEボタンなので、同じコードを使用していればすぐ分かりますね。
 

この可愛らしいピンクのデザインが私の作ろうとしているプラモブログのイメージとは著しく異なっていたので、ここをどうにかしていきます。

…とは言ったものの、実はどうしようかまだ迷っています。
私としてはここからHOMEへのリンクそのものが要らないと考えていたのですが、サイトの回遊率向上を目的として設置されている物でしょうし、既に付いているんだったらあえて削除する必要まではないんじゃないかなぁーとか。
 

まぁとりあえずはこのでっかいお家マークは気に入らんので、ここを「HOME」という文字列に変えようと思います。

お決まりとなった「single-type1.php」をFTPで開き、Font Awesome のアイコン部分のコードを削除し「HOME」と追記。

その結果がコレ↓

下部ページナビ[最新](失敗)

モロ出し…!!
 

こーなってきてしまうと、私には手に負えないパティーンですね(;^ω^)

だがまだ諦めないっ!
前後のコードをよく見て、文字列を表示させるには<div>というので囲まれているのが分かった。
ので、そんな感じに書き直してみる。

…できたっ! どうだっ!?

下部ページナビ[最新](大失敗)
ぐぢゃぁぁ…
 

こりゃダメだわ。
なんでコメント欄まで割り込んでくるのよ。
しかもそんな狭いところに。

どうやらどうにもなりそうもなかったので、当初の考えどおりにHOMEへのリンクそのものを削除する方向でいくことにしました。

コードから該当箇所をスパッと削除。

んで、表示を確認してみると…

下部ページナビ[最新](完成)

ま、いいんじゃないですかね?

今まであったモンが無くなったことで違和感は残りますが、これも使ってりゃ慣れてくるでしょうよ。
 

前の記事が存在しないときのHOMEボタンのカスタマイズ

続けて「前の記事が存在しないとき」、こちらは最古記事を表示している時に表示されるHOMEへのリンクボタンですね。

カスタマイズ前の状態はこう↓

下部ページナビ[最古]

HOMEボタンが左(PREV)側に表示されているというだけですね。

カスタマイズ法も同じで済みそうなので、ちゃっちゃとやっちゃいましょか。
 

コードから「前の記事が存在が存在しないとき」と書かれた部分をザパーッと削除。

これで完成ですね。 簡単かんた…

下部ページナビ[最古](失敗)

…ん? NEXT(新しい記事)が左に寄っちゃったぞ??

これは困りましたね。
ネットでは、戻るは左、進むが右というのが常識なので、進む(次へ)が左というのは気持ちが悪いですね。
 

仕方が無いので、左側になんか入れとくためにHOMEへのリンクをこちらにだけ付けておくことにしました。
まー最古の記事なんて読む人はまずいないでしょうから。

んで、実はさっきの最新記事時のHOMEリンクをテキストのみで表示しようとしてたとき(ぐぢゃぐぢゃになったやつ)、諦めきれずにネットで探してたんですよね。 HOMEへのリンクをボタンでなく最初からテキストリンクで表示させてるページナビを。

調べた結果見つけることはできたんですが、ここまでカスタマイズしたページナビを今さら全取っ替えはしたくない。

そこで、駄目もとでページナビゲーションのコードの中の、「前の記事が存在しないとき」の一部分のコードだけ使ってみました。

すると…

下部ページナビ[最古](成功)

おぉ! なんかいい感じじゃない!?

どうやら元コードがベースとしていたコードもまた、私が今使っているページナビと同じところの物だったようです。
 

このままでもページナビとしては機能しているので完成としてしまってもいいのですが、妙に縦に長いですよね?
おそらくCSSが以前のリンクボタンを収めるための高さに設定してあったのだと思います。

そこで再び「style.css」を開き、該当箇所を探してみる。
…が、このページナビ用のコードは100行近くあるので、さっきの上部ページナビの時みたく当てずっぽうとはいきそうもない。

なのでまずはこのCSSから目的のコードを絞り込むために、ここまでのカスタマイズで不要となっているであろうコードを削除していくことにしました。

「次の記事が存在しないとき」と「前の記事が存在しないとき」の部分のコードは削除・書き換えによりほぼ無くなっているので、ここで使われていたHOMEボタンに関する "prev_next_home" という id(?)も php上には既に無い。

ならばこの "prev_next_home" はCSS上からも要らないはず。
というわけでこの辺をバッサリ削除してみましたが、表示上は何も変わりませんでした。
大丈夫そうです。
 

同じ要領で、「次の記事が存在しないとき」で使われていた "next_no" という id も php からは無くなっていたので、こちらもCSSから削除しておきました。
表示上も変化ないので大丈夫。 …なはず。

今回初めて php の <id> というものに着目してみましたが、どうやらここで定義(?)された言葉が CSS上でも使われているっぽい。
コレ私としては大発見。

なお、「前の記事が存在しないとき」に使われている "prev_no" という id もあったのですが、こちらは新しく書き換えたコードでも使用されていたのでノータッチで。
 

…ん? 「使用されている」ということはデザインを指定しているのはこの "prev_no" か??

そう当たりを付け、ちょっとだけ短くなったCSSの中から prev_no が使われている箇所だけを見てみました。

…するとあるじゃーありませんか!
高さを指定しているであろう height の文字が!!

そこをがちゃがちゃいじくり回してできたのがコチラ!

下部ページナビ[最古](完成)

できた…!!

ちなみにこの高さは「前後の記事にサムネイルが無かった場合」の高さに合わせてあります。
ウチの初期の投稿は画像を一切使っていなかったものでw

 

ではでは、これにてページナビゲーションのカスタマイズは完了~

私の予定、というか予想ではCSSにまで手を出すつもりはなかったんですが、php をいじるとCSSも合わせてカスタマイズしていかないといけないっぽいですね。

しかしまーなんとかなるもんですね。コード読めなくとも。
どこに書いてあって何をいじればいいのかが漠然と分かるようになってきたみたいです。
ちょっとは私も成長したってことなのかしら?
 

5700字とけっこう書いたので、ここいらで締めたいところですが、まだ今回やるべき作業が残っているのです(-_-;)

 

検索エンジン上の記事タイトルから「PREV」を削除

これは前回の記事の最後にちょろっと言ったやつなんですが、検索エンジンで表示される一部の記事タイトルにページナビの「PREV」の文字が入ってしまう、という問題です。

こんな具合に↓

ページナビ不具合

自サイトのインデックスされた全ページを確認するには、

site:ドメイン名

で google検索することで可能です。

我が『ガンプラ気分(仮)』のインデックスされたページ数は73。 ここには固定ページやカテゴリーページなんかも含まれるので、今回確認したい投稿記事数はもっと少ないですね。
まぁ問題なくインデックスされてれば投稿数とイコールなので、ウチは65件となっているはずです。

で、上記の様な症状が確認されたのは65件中2件
ほとんどはちゃんと表示されているとはいえ、気付いてしまったからには対処していきたいですね。
 

さて、解決するにはまず原因を探らねばなりません。

自サイトの該当ページを見ても、そこにだけ特別な表記・カスタマイズをしたという記憶はありません。
はっきり言って原因は「不明」です。
 

そこでネットで調べるわけなんですが、その前にちょっと疑問があります。

前述の通り、このページナビゲーションのカスタマイズは多くの方が使用しています。
しかし、こんな不具合があったのであればここまで普及していないはず。

となるとこの症状はテーマ依存、つまり『AFFINGER4』特有のものである可能性が高い

そして調べてみると、案の定ヒットしたのはAFFINGER4利用者のみでした。
 

どうやらこの不具合に対し、他のAFFINGER4利用者の方は対処法として Font Awesome の「←」「→」の矢印アイコンに置き換えることで解決されたようです。
賢いですね…! 「画像」なら記事タイトルには表示されないという訳か!

私は普段からAFFINGER4カスタマイズの参考としてAFFINGER4製サイトをよく巡回させてもらっているんですが、このカスタマイズをしている方を複数見かけました。
偶然皆がこのカスタマイズ法に行き着いたとは考えにくいので、もしかしたらカスタマイズ済みの自作子テーマのような物が出回っているのかもしれません。
なんかありましたよね、「KAGEMUSYA」だっけ?

Font Awesomeを使うというのは非常に良いアイデアだとは思うのですが、私もこれにしてしまうと、今回この記事でやったカスタマイズはなんだったんだという話になってしまいます。

ページナビに明確な文言を入れたい私のような者にとっては、これは妥協案であって根本的な解決とはなり得ない。
なので私は別の方法を模索してみます。
それでどうにもならないようであればこの案を使わせてもらおうかなと思います。

 

今回このページナビカスタマイズの記事を書くにあたって、私はこの記事タイトルの表示不具合を知っていたわけですので、自分なりに一応解決策を考えてはいました。
でないとPREV/NEXTの表記を変えるなんてカスタマイズをやったところで結局「←」「→」のアイコンにせざるをえないのであればそれが無駄になるのは分かりきっていましたから。

やることは単純、「titleタグ」を付ける、それだけです。

titleタグってのはそこに記述したテキストが「記事タイトル」よりも優先して検索エンジンに表示されるようになるというものです。 たぶん。

これを利用することで、長すぎる記事タイトルを付けてしまったせいで検索エンジン上のタイトルが「…」で省略されてしまう対策として、「検索エンジンで表示されるタイトル」と実際の「記事ページ上のタイトル」を異なる表記にすることができます

上記のはただの使い方の一例ですんで、詳しいことは各自調べてください。 というか私もよく知らんです。
なんかSEOの基本中の基本らしいですよ。
 

まーそんな感じで、面倒くさいですが記事タイトルと同じテキストをtitleタグにも書いておけばPREVさんの入り込む隙はなくなるんじゃねーの? という実に安易な考えです。

こんなんを解決策とか言っちゃうあたりが俺クオリチィー。
仮にこれで上手くいったとして、過去記事全部にtitleタグ付け直す気なんかね?
…まぁやるんだけどさ。
 

兎にも角にもやってみんことにゃー始まらんでさぁ。

私は今回のカスタマイズによってページナビの文言を変えています。(PREV→古い記事)
なのでこのままでも検索エンジン上の不具合表記は変わるはずなんですが、その反映を待ってからtitleタグのカスタマイズをするのは面倒なので、ちょうど2つ不具合が出ていたので片方をそのままで、もう片方にtitleタグを設定してみました。

そして「Fetch as Google」にてサイト全体を再インデックスしてもらうようリクエストしておきました。
 

…待つこと半日。 いまだ検索エンジン上の表記は「PREV」のまま変わっておりません。
そこで不具合の出ていた2件のページを個別にインデックスリクエスト。

……待つことさらに一日半。 ようやっと検索エンジン上に変化が現れました!
弱小ブログはつらいよ…
 

その結果、titleタグを入力した方はというと…

ページナビ改善?

やりました! 「PREV」の表記が消えています!!
 

大成功!! …と言いたいところなんですが、
不具合表記の出ていたもう一つの記事タイトル、titleタグを設定していない方ですね、そっちもなぜかPREVの表記が消えていました

アレー? 予想ではそっちは「古い記事」が代わりに表示されてると思ったんですが…
 

うーん… なんだかもやもやする結果となりましたね。

改めて「site:gunplakibun.com」で全インデックスを確認してみたのですが、記事タイトルの表記がおかしくなっているものは一つもありませんでした。

結果としてはそりゃー良かったと言えるわけではありんすが、結局原因の特定もできとらんし、何が対処法として効いたのかも分からずじまいです。
 

私にはこれ以上どうこうはできそうにありませんので、今回はこれで締めさせてもらいやす。
もう8300字いったので、正直もうブログ書くの飽きた。
 

んじゃ次回の予定。

次はコメント欄のカスタマイズをやっていきます。

こちらもネットでよく見るやつをそのまま使わせてもらってるだけなので、このサイトに合わせた形にできればいいなと。

カスタマイズしたのは去年の5月、ページナビと同時期にやっていたのでまたもや久しぶりとなりますね。
まずは以前のカスタマイズを思い出すところからやんないとなぁ…。

次回もCSSと格闘することになるかも(ll゚д゚)

今月中のブログ完成が目標なので頑張らないと!

-ウェブサイト作成

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