改ページブロック苦労話

WordPressで小説サイト

　先週のこと、「改ページブロックが生成するページネーションが味気ないから使えない！」とオダを上げてみたものの、やっぱり固定ページをいくつも作る面倒にそろそろ飽きてきました。結局…「ええい、使えないモノは使えるようにすりゃいいじゃないか！」と居直ってまたぞろテンプレート改造に乗り出した次第です。

　改ページブロックは<!–nextpage–>というコードを挿入することでページを分割する仕組みのようです。
　で、その分割したページリンクを表示するためのテンプレートタグ1が　wp_link_pages()　。ここでテンプレートタグ、と来たら…当然、またphp弄らなきゃならんわけですよ。あぁ、天使様でも降りてくれないと理解できない世界2にまた踏み込まにゃならん次第と相成りました3。

　今回のミッションにおける課題は以下の通り。

  1. 改ページブロックに対応した新しいテンプレートを作る
  2. ページネーションを表示させる
  3. レイアウトを整える

　勿体付けてるようで恐縮ですが、所詮は柳の備忘録ですのでご容赦を。

1．改ページブロックに対応した新しいページテンプレート4を作る

　この場合は新しい小説用テンプレートを作りたいわけですから、予めそれ専用の新しいphpファイルを作る5ところからはじめます。この時、つける名前は固定ページならpage-****.phpというのがお約束。こうしないと固定ページ用のテンプレートだとWordPressが認識してくれません6。

　それができたら【ダッシュボード】→【外観】→【テーマエディター】から、テーマファイルの中から新しく作ったテンプレートを確認し、これを開いて改造していきます。

　次に実験用の固定ページを作って、【設定】→【ページ属性】→【テンプレート】から新しく作ったテンプレートを適用させ、レイアウトを確認しながらちまちまとやっていきます。だからこの際、テーマエディターと固定ページのプレビュー画面をふたつながら並べてにらめっこしつつ作業する7ことになります。さらにphp改造のための資料を横に展開しながらの作業になりますから、結構神経を使いますね。何せ、変にいじると画面真っ白、ってことになりますからその都度コピー元のテンプレートを呼び出してコピー＆上書きです。柳に判るのはHTMLとCSSまでで、phpに関してはそれこそ逐語的に調べつつこれはこういう意味らしい、とアタリをつけて改造しているのですから綱渡りもイイトコです。

2．ページネーションを表示させる

　問題のwp_link_pagesタグですが。
　さしあたっては至極まっとうに「WordPress Codex 日本語版」をご参照いただくのがよろしいかと。タグの使い方とパラメータ8の解説が使用例と一緒に懇切丁寧に載っています。
　で、このパラメータ…多ければ多いほどいろんな設定ができるというわけですが、それだけ煩雑にもなります。wp_link_pagesに対応するパラメータには以下のようなものがありました。

before (文字列) リンクの前のテキスト。デフォルトは <p>Pages:。
after (文字列) リンクの後のテキスト。デフォルトは</p>。
link_before (文字列) リンクテキストの前のテキスト。デフォルトは空文字列。
link_after (文字列) リンクテキストの後のテキスト。デフォルトは空文字列。
next_or_number (文字列) ページ番号を使用するかどうかを指定する。有効な値は：’number’か’next’
separator (文字列) ページ番号の間のテキスト。デフォルトはスペース 1 文字（改行可能）。
nextpagelink (文字列) 次のページへのリンクのテキスト。デフォルトは Next page。
previouspagelink (文字列) 前のページへのリンクのテキスト。デフォルトは Previous page。
pagelink (文字列) ページ番号のフォーマット。文字列内の % が番号に置き換えられる。
　　　例えば Page % は「Page 1」、「Page 2」などを生成する。デフォルトは ‘%’。

WordPress Codex 日本語版

　このうち、separatorはうちのテーマ（Scribe）だとどうしても巧く作動しなかったので諦めました。
　link beforeには［　、linlk afterに　］を設定してページへのリンクををカッコにおさめることにしました。
　nextpagelinkとpreviouspagelinkはそれぞれ「前のページ」「続きを読む」というテキストで表示させることにしました。
　pagelink については、トライはしたものの柳的には少々表示が諄く感じたので使用しませんでした。

　これを先程作ったページテンプレートの中の「ページ送りを表示させたい場所」に記述すれば良い…というと話が簡単なようですが。まずその場所を同定するのが大変ゴトです。ド素人柳としましては、とりあえず書き込んでみて、思ったような表示になればよし、そうじゃなかったら納得いく場所に書き込めるまで書き消しを繰り返すということになります。
　phpがちゃんと判る方なら一瞬なのでしょうが、ド素人柳にしてみると毎度毎度、暗号文を解読してその暗号文を自分でも記述してみる…的な作業でございます。や、楽しいからいいんですが。

3．レイアウトを整える

　本来はページ番号を枠で囲み、さらに今どのページにいるのかをそこだけ反転させてはっきり目立たせるような仕様にしたかったのですが…そこまでやろうとするとBootstrap9とゆーものにまで手をださねばならんことがわかりまして…調べはしてみたもののあえなくダウン。至極シンプルに＜table＞でかこんで目立たせることにしました。
　そうなればセンタリングしたテーブルをCSSで修飾（ウチの場合影とか二重線程度のシンプルなモノ）するだけですので、追加CSSにこのテーブルを修飾するためのクラスを準備して適応させるだけでOK、ということになります。

　ついでのことで、このページにはトップ背景にグラデーションマスキングをかけてタイトルを見やすくするという改造を加えました。ヘッダー直下、背景に指定した画像のごく一部が帯状に見えるようにして、全体に下方へいくに従って黒くなるグラデーションをかけました。これはデフォルトのページにもあった仕様で、背景画像が白っぽくてもタイトル文字が埋没しないためです。ここは該当部分を規定していたCSSをコピーして別のクラス名で適応し、グラデーションの高さを書き換えています。

　そうやってできあがったのが改訂「妖精の森」という次第。

　前にシリーズになっているページをページネーション付きで表示するためにだいぶ呻吟しました10が、今回は一つのページを分割表示してページネーションさせるという課題に挑んでみました。これで、少々長い小説でも一つのページでつくり、なおかつページネーションさせることができる訳です。

　さて、呻吟しただけのことがありましたでしょうか。
　「巣立ちの唄」シリーズはこの仕様でやってみようと思っています。「篝火は消えない」本編も一本が結構長いのですが、こちらはアップロード済みのものと規格を合わせるために従来の方法で掲載予定。読みやすさについてご意見ご感想など頂けますと幸甚です。

　勿論というか、小説そのものの感想なんぞいただけますと…柳は踊り回ってヨロコビます。

2020.5.5. 追記しております。

2020.5.5　追記

　Novel-3の「Beautiful　World」のアップロード作業をしておりましたら、やはりどうにかして「今が何頁目なのか」を目立たせたいという衝動が沸き起こりまして…もう一度phpとCSSに取り組みました。
　そうは言っても、結局のところページネーションを表示させるために設置したテーブルに適応させるクラスに、フォントカラーと文字装飾（ボールド）を付加しただけです。
　実はリンクの文字には、別のCSSが適応される仕組みが既にテーマに組み込まれています。ページネーションのテーブル内の文字は現在表示されているページを示す文字以外すべてリンクですので、結果として現在のページだけ別の色に変更できるというオチがつくのでした。これで、現在のページだけが赤く表示されるので、現在位置がはっきりわかるようになりました。（ちなみにリンクをマウスオーバーしたときの色と同じなのですが、ここは統一感を優先しました。今はここで、今度はこっちへ飛ぶよ、という示唆にもなって丁度良いかなと。実際の挙動は「Beautiful　World」を見て頂ければ幸い。


  1. Wordpressに対して何かを表示・取得させたいときに使うもの…という解釈で間違ってないと思います。
  2. 言いたかありませんが、柳はプログラミングに関しては完全無欠のド素人でございます。phpいじるには意地と根気と何かが降りてくるがごときヒラメキがないととても無理。
  3. 判ってやってて言うな、という話もあるのですが。
  4. 投稿ページないし固定ページが何を表記するか、を規定するテンプレート
  5. これはWordPress上から出来ないので、サーバに接続して既存のファイルを名前を変えて複製します。
  6. WordPressに認識されないと適応させるテンプレートを選ぶボックスに表示されません。
  7. 旦那に泣きついてメインマシンにサブモニターつけてもらったのはこのためです。決して片手間に動画見るためではないのですよ（笑）
  8. 変数、この場合タグの挙動における細かい設定をするための数値ないし文字列。
  9. HTML／CSS／JavaScriptから構成される最も有名なWEBフレームワーク…だそうな
  10. この時はテンプレートタグthe_post_navigationを使いました。

コメント