子テーマ化とヘッダー画像スライダーの実装備忘録

LivedoorブログやAmebloのズーマーカスタムブログなどをWPの記事としてログ統合をとりあえず完了。
そうすると、細かな外観が気になりだした。

（外観変更前の当ブログ）

・サイドバーなどをダークグレー（ヘッダーメニュの色）にしたい。
・テーマ標準のカレンダーの視認性が悪い。
・記事一覧の記事タイトルがアイキャッチ画像表示エリアのため、右寄りで表示されてしまう。アイキャッチ画像の表示をとめると、コメント数表示迄消えてしまう。

コメント数表示を残したまま、アイキャッチ画像エリアを回避して左詰めでタイトルを表示したい。

以上を実現するために、外観→カスタマイズ→CSS→追加CSSにCSSを記述して保存（のちに子テーマを作成し、サーバー上の子テーマのstyle.cssに統合し、WP上の追加CSSは白紙に戻した）

・トップ画像は、現状ズーマー画像を5枚用意してサイト表示時にランダムで1枚を表示している。これを5秒程度で自動切換えしたい。

このためには、JavaScriptを埋め込まないといけない。とりあえず、フッターにカスタムHTMLのウィジェットを追加して、その中にJSを書き込む。
ところが、保存しようとすると、永遠に「保存中・・・」
これは、ロリポップサーバーの、WAFという強固なセキュリティの壁。
一旦ロリポップで、WAFを無効にしてJSを書き込み、WAFを有効にするという手もあるらしいが、何か弄るたびにサーバーのセキュリティレベルを落とすのもどうかなぁということで、WPのfooter.phpにJSを記述することにした。
ただし、Hueman（私が使っているテーマ）のアップデート時に上書きされてしまう危険性もあるため、回避するために子テーマを作成して、そちらのテンプレートファイル（footer.php）に記述すことにした。

子テーマの作成
１．/wp-content/themes/の中にhueman-childフォルダーを作成
２．その中に　style.css: 親テーマ（Hueman）を継承する定義を作成。
３．functions.php: 親のスタイルシートを読み込むためのおまじないを作成し、hueman-childにアップロード。
４．WPのフッターに記述したかった画像切り替えのJSを埋め込むためにWAFを回避しつつ、テーマ更新にも耐える構成が必要だった。
そこで、子テーマ側に親テーマの footer.php をコピーし、その中に直接JavaScriptを書き込む手法を取った。
※functions.phpは子テーマの起動とCSSの読み込みに使用。

メリット: これでどれだけ弄り回しても、親テーマの更新を恐れる必要がなくなった。

ここで、WP側の操作で、テーマをhuemanからhueman-childに切り替え、トップ画像の自動切換えが実装されたことを確認。

5. 外装コードの集約：WPの追加CSSからサーバー上のstyle.cssへ統合。
一旦テーマをhuemanにもどし、追加CSSの内容をコピー。
コピーした内容を、hueman-childフォルダーのstyle.cssに追記して、サーバーにアップ。

作業の途中途中で苦労したのが、ロリポップサーバーのLiteSpeed Cache。変更がなかなかブラウザに反映されずに、「あれ？ミスった？」と思う事しばしば。

サーバー側のLiteSpeed Cacheをパージしただけでは不十分で、ブラウザが握りしめているキャッシュを Ctrl + F5（スーパーリロード） で強制的に上書きさせる必要があった。これが反映されない一番の原因だった。

自己満の世界ではあるが、ダークグレーとズーマーイエローがきりっと映える見栄えになった＆カレンダーも標準と比べかなり視認性が向上しました！

昨日のclaudeさんに引き続き、今日の作業はGemini3さんにすっかりお世話になった。
本来私がAIにいろいろ指示を出して回答を求めているはずが、Gemini3さんの
「次はここを確認して」
「このソースを貼り付けて」
「サーバーにアップして」
「WPのこの画面のこのボタンをクリックして！」
の次から次に飛んでくる指示に、
「はい・・・・」
と付いて行くのに精いっぱい。AIの下僕になった気分(*’ω’*)
とはいえ、AI（Gemini 3）から飛んでくる、サーバー操作やディレクトリ構造への的確な指示。その高速なデバッグサイクルのおかげで、一晩でここまで辿り着けた。
希望の見た目が実現できて、大満足でした！