マガジンのサブカテゴリを1行で動的に生成させる😍（WordPress＋PHP）
（約 3,300文字の記事です。）
今日は10時間かけてWordPressサイトの大ブレークスルーを果たした。長かった。だがそれよりも実現できた喜びのほうが大きい。10時間など大したことじゃない。やりたいことを、理想を実現できたことに比べれば、全く些末な問題だ。
実装完了したサイトはこちら。とてもシンプルになった。
多少は疲れたが、今はアドレナリンが爆噴しているので、今は、大丈夫だ。明日は知らんw
本当に欲しかった動的メニューの完成
手短に話そう。酔っているので🍺
（Before）手動メニュー作りは面倒😭
note有料マガジン単位の記事についてWordPressでマガジン単位で章分けできることまでは分かった。昨日までは手動入力によるプチプチ作業でサブカテゴリを構成していた。
カテゴリ名などをショートコードでリンクしているものの、並び順やカテゴリの構成が変わると全部やり直しだ。The アナログ作業。ここをなんとかしたかった。
とはいえ、本当に何とかできるのか？と悩み続けて数日。今日はまとまった時間が取れたので一心不乱にテスト。本当に色々、紆余曲折を経て、ゴールに辿り着いた。
情報収集していたらChromeのメモリ使用量が29GBに達していた。どうりでPCがモッサリ重いわけだ😭開いたタブの数も半端ない。
そして10時間後の努力の結晶がこちら。
（After）全自動。たった1行😍
ソースコード自体は109行に達したが、WordPressの見た目に指示するためのHTMLコードは、たったの1行だ。
[CategoryList]
これだけ。
デザイン性よりも実務優先
タイトルも無しにした。クリックできないのに1行も使う。
というのもタイトルは私の運用上ではクリックできないアイテムに統一しているので。だがしかし、マガジンTOPに移動する手段は欲しい。
だったらタイトル行をなしにして、クリックできるタイトル行を準備すればいい！
アイディアは一瞬。実装は4時間
思うのは3秒。実装に4時間……😭。実はこの微妙に面倒臭い仕組みに4時間くらい使っている。話すと長くなるので省略するが、要はユーザーにとって扱いやすければ何でもいいのだ。なのでクリックできないタイトル1行よりも、クリックしてジャンプできる1行を採用することにした。デザイン的にはちょっと無骨だが今はこだわらないことにした。
要するにクリックできて、マガジンTOPにジャンプできれば何だっていいのだ。
質実剛健な実装
今回はパッと思いついて可能な実装として太字化したマガジンタイトルを最上部に置くことにした。これならクリックできるアイテムだ。
またリストの一部なのでバックエンド側での例外的な処理も不要。太字になっただけ。<strong>タグ一発。The シンプル。だが目的を果たせる。一番上にあることだけが重要なのだ。あとの見た目は、まぁどうでもいい。
マガジン数が無限に増えるリスク
これまで何度か話してきたが、執筆活動を続けていると色んな過去資源が無限に増える。ここが問題で増える分にはいいのだが、その管理の手間も無限に増える。なのでそこを如何に効率化するかが重要だ。そうしないとビビって執筆活動に専念できなくなる。今の私がそれ。
なので今はたった数冊のマガジンの章立てのメンテをプチプチと手作業でいいかもしれないが、それが生涯にわたって何十冊となると、多分人生の何分の一かを単純な労働のために費やすことになる。
それは無駄というものだ。
だから今の時点で見通せている「明らかな繰り返し作業の障害」これを取り去っておきたかった。だがもちろん、本当に自分の手で解決できるか不安だったので、将来的な課題にするつもりだった。
だがひょんな事から情報が手に入り「もしかしたらちょっと頑張れば実装できるかも🤔」と思ったのが運の尽きで。
ちょっとのつもりが10時間でさぁ～よぅ。
でも実装できたから満足w
（Before）マガジン数だけ増える手間
今はテストでたった2冊分のマガジン別目次の仕込み。当然2つある。
今後何十冊と執筆すれば、このサイドバーの欄が縦にずらりと何十個と並ぶわけだ😭それはつらい。
（After）1つだけでOK
だが今回の実装で、何十個でも何百個でも、この1つのカスタムHTMLメニューで動的に生成される。美しいでしょ？
これがデジタルの力だ。プログラミングの力だ。PHP万歳！
なのでさっそく上記の赤枠のメニューを削除した。削除ボタンをクリックする瞬間、深呼吸した。
頑張って実装したメニューよ、今までありがとう。
そしてお疲れさまでした😭
貴様らの犠牲は無駄にせん！血肉とする！
ここをキャンプ地とする！！！
そして追尾サイドバーにも同様の仕組みが必要だったのだがバッサリカット。そしてシンプルな管理画面になった。
本当に見た目上で必要なものだけがアイテムとして鎮座ましましている。シンプルで分かりやすい。だかこそ、管理しやすい。これこそが理想だった。
マガジンTOPリンクの常設
実はこの実装に3時間くらい使っている。マガジンTOPや小カテゴリも全部、カテゴリなのだが、どのカテゴリをクリックしても一定して「マガジンTOPのカテゴリ」を常時表示させるための仕組み。これに3時間かかった。
サブカテゴリ、例えば導入編や応用編をクリックしても、きちんと「RetopoFlowの使い方」カテゴリが常時表示されて最上段に太字で貼り付いてくれる。こういう例外処理が地味に大変なのだ😭
サンプルは以下の通り。
これも話せば長くなるが、ユーザー体験としては「ごく自然にさわれるUI」になっていると思う。機械的な挙動ならばそうならない。そこに気付いてもらえれば嬉しいが、気付くことなく自然に読書体験に没頭してもらえればそれでいい。
こういう地味な「例外処理の正規化」に、めちゃくちゃ時間とエネルギーを要する。だが完成してしまえば安定する。それがプログラムというものだ。
細かい罠。見た目の制御はCSSだった
あとは以下のように、まだ整備中のサブカテゴリなしのマガジンで、なぜか謎の空白が……。ナンダコレ？この対処に2時間持っていかれた。
画像下段のように、直ってしまえば、どうということはない、のだが。
何かを得るためには同等の対価が必要になる。
実はPHP側でもなく、PHPで生成するHTMLでもなく、まさかのCSS制御だったとは……。そこに気付くまでの勉強代でした。だがクリアしてしまえばあらすっきり。最初からそうだったような実装になっている。
実はWebサイトってのは、こんな感じで裏でしか分からない血みどろの苦労があって「平然とそこに表示されている」のです。。。分かって欲しいが、まぁ分かる人のほうが少ないわな。
要らない物を全部隠せ！
ここまで来て、なんか頭のネジが吹っ飛んだように「そのシーンで読者に要らない物は全部隠せ！」的なインスピレーションが降ってきたので、思い切って色々と非表示化してみた。Homeやタグ検索時以外の、カテゴリアーカイブ＝マガジン閲覧時と記事閲覧時には、要らないものを隠してみた。
めちゃんこすっきりした。これこそが紙の本に近いな、と思った。断捨離だ。
と、今日はここで力尽きた。またしても夜更けを越えて夜明けだ。
雨の音が優しい。
今日もまた一歩前進！大きな一歩。
多分これでフロントエンド側の私の不満はかなりなくなった。ほぼ完成と言っていい。この動的なサブカテゴリメニュー生成には、実は色んな思いがあって、できるだけ早く実装したかった。これが今日1日でできたことは幸いだった。
次はブログサイトの改革に戻りたい。そこへの布石でもある。
今日も乾杯🥂
今回の創作活動は約9時間30分（累積 約3,535時間）
（965回目のnote更新）
読んでくれてありがとう。気長にマイペースに書いてます。この出会いに感謝😊