ページナビを投稿記事の上部にも

投稿日:

今回は、デフォルトで設置されていた投稿記事下部のページナビゲーションとは別に、投稿記事の上部へもページナビを設置していきます。

 
この2つ目のページナビの設置には、設置されていないサイトも多いですし、正直特に無いなら無いで困らないような気もします。

しかし、現時点で私が考えている最新記事1件のみを全文表示しているトップページだと、他の記事へのリンクは、別ページの投稿記事一覧から探すことになります。

目的が最新記事の閲覧のみだったらこのままでもいいんでしょうが、内容が連続している記事などの場合には、記事本文が目に入るよりも先に、前後ページ(特に前ページ)へのリンクが欲しいんじゃないかと思います。

プラモブログの場合なんかだと、「製作記第○回」という続き物の記事を書く事は非常に多くなると思うので、上部ページナビは無いよりは有った方が便利かなと私は思ったので。

 

では早速取り掛かっていきます。

前回もチラっと書きましたが、おそらくページナビ部のコードをそのまま設置したい場所にコピペするだけでいいんじゃないかなと。

気がかりなのは、前回追加したページナビのデザインを整えるCSSですね。

今回上部に設置したいページナビはデフォルトの様な文字リンクのみのシンプルなのがいいんですよね。
記事本文よりも上、という事なので、極力場所を取るようなものは置きたくありませんので。

この文字リンクのページナビにもCSSが反映され、現在の下部ページナビのようなでっかいのがガッツリ入り込んでしまうのは好ましくありません。

しかし、コードが読めない私にはCSSの構造とかサッパリです。なので、兎に角やってみましょう。

 
持ってくるページナビ部のコードは、現在の下部で使用している物はカスマイズしたサムネイル画像付きの物なので今回は使えません。

そこで、AFFINGER4デフォルトの物を持ってくることにしました。

親テーマから持ってきてもいいのですが、ここはせっかくコピーしておいた子テーマの「single-type2.php」からコピーしてきました。こっちのが早かったので。

そして肝心の貼り付け先は…ぱんくずリストの上、投稿ページ上ウィジェットの下、にしてみました。

結果は何も問題なくテキストでの前後記事へのリンクができていました!

CSSが反映されたりはしていないようですね…
今回はそれで良いのですが、思ってたのと違ったので疑問が残ります。
ま、できたからいっかヽ(´ー`)ノ

 
現在の上部ページナビは文字リンクが縦並び。上が「PREV」で下が「NEXT」。

記事が縦に並ぶのは、投稿ページや、サイドバーの最近の投稿などの記事一覧で見かけます。
普通は時系列順に並ぶので、上が最新で、下に行くほど古い記事となっています。

なので、これに合わせて上部ページナビも、上が「NEXT」で下が「PREV」に入れ替えておきました。

気になるのは、上部ページナビとぱんくずリストの間隔が狭いこと。

これコードを自分でいじる度に言ってますね(-_-;)
CSSいじれない限りどうしようもないんかなぁ?

 
さて、これにて今回のカスタマイズは完了、としてもまぁいいのですが、できればこのページナビを横並びにしてみたいと思ってます。
その場合は、下部ページナビ同様、PREVを左、NEXTが右、となりますかね。

おそらくCSSでのデザインとなるので、ネット上にカスタマイズ記事があることに期待して探してみたところ、1件だけ見つかりました。

phpファイルのページナビ部のコード変更⇒CSSでのデザイン、という工程だったのですが、私はphpは既にいじってあったので、CSSのコードだけ先に入れてみました。これが正しいことなのかもまるで分かりませんが。

結果は変化無し。
先のページナビ2種の内、CSSが反映されたのは同じ作者のコードの方のみだった事からも、たぶんphpとcssのカスタマイズはセットでやらないといけないってことですかね?

仕方ないので次はphpファイルからページナビ部のコードを全取っ替え。さっき新しくしたばかりなのに…

結果は文字リンクのページナビが横並びで表示されてました!

でも、なんだかPREV・NEXTの代わりにでっかい矢印がついてるし、文字の大きさも一回りほど大きい
あと左右の間に境界線もありませんね…

完成図が載っていないサイトだったので自分でやってみたのですが、ちょっとだけ私の思ってたのと違いましたね…

矢印に関しては、<dt></dt>で囲われている部分を編集したら変える事ができましたが、他の項目に関しては私にはサッパリ…

ちょっと不満点の残るカスタマイズとなってしまったので、前のデフォルトの縦並びに戻しました。

 
さてさて、ページナビのカスタマイズはこれにて一旦完了。
一旦と付けたのは、まだ手を加えたい部分があるから。

「PREV」・「NEXT」の表記とか、下部のピンクのホームボタンアイコンとか。

前回も書きましたが、こういうのは後回し。サイトの本公開を優先します。

 

今回やっておきたい事はもうひとつありまして、トップページを最新記事全文表示から、デフォルトの投稿記事一覧ページに戻そうと思います。

そもそも今回の上部ページナビをつけた目的は全文表示のトップにおけるリンクの増設にあった訳ですので、トップを戻したら今回のは何のためのカスタマイズだったのか、という話になりそうですが…

今回のページナビはきっと簡単に付けられるだろうと思っていたので、軽くどんなもんかデザインを見てみよう、ぐらいの気持ちだったんですよね。
そんでその結果を見て、トップページを戻そうかどうか決めようと思ってました。

CSSでのデザインこそできませんでしたが、結果的には1行2行分のスペースを使うぐらいで、通常の投稿記事上に置いたところで、特に邪魔にはならないかなーという印象でした。

なので、この上部ページナビに関しては、トップページの構造に関わらずに使っていく事にしました。

 
私は今でもトップページは記事本文が全て表示されているものの方が優れていると思ってはいるのですが、これをやめる一番の理由はやっぱり完璧な実装が私の技能ではできなかった点ですね、情けない話。

トップページウィジェットを使える様にすればデザインが崩れ機能も減り、機能を戻せばそこはトップページとしては扱われず、コメント欄も無い。あ、もしかしたら今の私ならコメ欄くらいは付けられるようになったかも。

まぁこれは最初から分かりきっていたことなんですけどね。
それでも不完全なまましばらくトップページとして置いておいたんですが、その後のカスタマイズを続けていくうちに、重要なことに気付いたんですよ。

 
あくまで全文表示が優れていると思うのは、利用する側の観点。最新記事が1クリックもせずに見られる。わー便利。
でもサイトを運営する側から見ると、この構成には致命的な欠陥がひとつあったんです。

それは最新記事のページビューが計測できないという点。

トップページ=最新記事だと、最新記事だけを見に来たそのサイトのリピーター(ファン)は、そこだけ読んで帰っていきます。私は別にそれでもいいんですが、この場合は「トップページ」のPV(ページビュー)としてカウントされているはずです。その最新記事の「個別投稿ページ」へはアクセスされていません。

PVって実は私最近聞き始めた言葉なんですが、サイトのサイドバー辺りに、「人気記事一覧」とかあって、そこに「xxxxView」とか閲覧回数が表示されてランキングの様になっているのを見かけた事のある人は多いはず。そのView数が正にそれなんですよね。たぶん。

これがきちんと計測できないと、サイト内記事ランキングに支障が出てしまう。
雑記ブログでアフィリエイトをやっている人なんかにとってはこれは致命傷なはず。

このサイトは雑記ブログにはならないのですが、人気記事ランキングは気になります。
これはサイト運営者としてというよりかは、一人のガンプラ好きとしての話なんですけどね。
やっぱ知りたいじゃない、今どのシリーズが人気キットなのか、とか。
私が巡回しているサイトを見た感じでは、ユニコーン>オリジン≧鉄血 ってのが多かったかな~。

…∑(゚∀゚)ハッ
おっといけない、ガンダムトークはサイト完成まで控えると決めてたんだった。そんなことしてたらいつまでたっても私がガンプラを作れる日はきませんからね。

 
まーそんなこんなでトップをフツーのに戻します。何の面白みもないですが、利用者にとってもよく見る形式の方が分かりやすいでしょう、きっと。

前置きがクソ長くなってしまいましたが、作業に入ります。といっても前のに戻すだけですが。

WordPressの[表示設定]から、「投稿ページ」に専用の固定ページを設定。「フロントページ」は未設定。
これでトップには投稿記事一覧が表示されます。

なんで[最新の投稿]にチェックを入れずに[固定ページ]で設定するのかというと、こうするとフッターのサイトタイトルがホームへのリンクボタンとして機能するからです。
ホーム画面以外からならこの設定に関わらず機能しているんですけどね。軽いバグだと思います。

 
これで完了~…だと思っていたんですが、ちょっとおかしい。

先のフッターリンクバグチェックのため、[最新の投稿]画面と見比べていたんですが、[最新の投稿]だと、画面に「トップページ用ウィジェット」が表示されていたんですが、[固定ページ]での「フロントページ」未選択だと、「トップページ用ウィジェット」が表示されていない…!

今の今まで気付きませんでした。
トップページを全文表示にするためのカスタマイズの際、フロントページがトップページとして認識されているかどうかのチェックのため、常に確認用としてテキストウィジェットを表示させていたんでした。
それが今のトップページでは表示されていない。

怪我の功名というヤツでしょうか。トップを全文表示化のためにいじって、結局できずに元に戻し、ただ時間を無駄にしたかと思っていましたが、少しは良いこともあったようです。

ここで私はトップページウィジェットを取るか、ホーム画面でのフッター部タイトルリンクを取るかの2択が迫られることとなったわけですが…
まぁ、前者ですよね。トップページでのみ使える機能はAFFINGER4では色々あるみたいですし、フッターのホーム画面へのリンクが使えないのはホーム画面にいる時のみ。
ホームからホームへ戻ろうってのはなかなか無いですよね?
あったとしても、私はフッターメニュー内に「ホーム」へのリンク置いてますし、気にする程のもんでもないでしょう。
もちろん、アップデートで対応してくれたりすれば個人的にはありがたいですが…

 

さてさてさて、これでホントに今度こそ完了ですかね、いや、まだですぅ…

トップが投稿ページとなったことで、私がトップ全文表示化の際に、代わりとなる記事一覧ページとして用意していた、「ブログ」の固定ページが無用となりました。

そのまま削除してしまうという手もあるにはあるんですが、そうすると現在のヘッダー下のグローバルメニューの表示がちょっとカッコ悪くなってしまうんですよね。ここって左寄せなので。

一応、公式にここを中央寄せにするカスタマイズコードがあるんですが、私はできるだけコードには頼りたくありません。コード読めませんから。

でも、ここのメニューが「6個」だとそれっぽく見えるんですよね。なのでメニューを消したくはない。
そこで、「ブログ」コーナーを別の役割を持つ物に置き換える事にしました。

予想外の事態だったので案がありませんでしたが、とりあえず「レビュー」として新たにリネーム、及びスラッグの再設定を行いました。
カテゴリーかタグで記事を分類して、アーカイブページとして[メニュー]から設定すれば上手くいくはず。

ここにはそうだなー、ブログ形式でやっていくとほとんどが製作記になってしまうので、そこから完成品レビューだけを抜き出した一覧ページとするのはどうですかね?
「ギャラリー」ページと役割がカブってしまいますが、こっちはシリーズ別にしようと思っているので、「レビュー」は時系列順に並ぶはずなので、多少の差別化はできる…はず。
まーまー細かいところは実際にやってみてからですね、いつも通りに。

 

さてさてさてさて、5000字とかいってしまいましたし、これでホントに今回はおしまい。

作業自体は一気にバーッとやってしまっているので、そんなにやっていないはずなんですが、文量にするとけっこーいってしまってますね。
たとえレビューブログだったとしても、いや、レビューブログだからこそ、もうちょい完結に要点だけ掻い摘んで書けるようになりたいですかね~。
そういう点ではこうして仮運営とはいえ、人生初ブログとなるおっさんにはこの場はいい練習になりますね。

 
次回は、コメント欄のカスタマイズに戻ります。
今のままでもそれなりに満足したカスタマイズが出来ていたと思っていたんですが、ネットで偶然もっとカッコ良くて機能的な展開式のコメント欄のカスタマイズ法を見つけたので、それを試してみようと思います。ノシ

-ウェブサイト作成

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