日別アーカイブ: 2014-07-11

子テーマのCSSが反映されないとき

失敗例

WordPressでホームページ風な固定ページを作るべく、ローカル環境で動作を確認して本番環境に移植しても、なかなか子テーマのCSSが反映されず悩みました。失敗例と解決法をメモに残します。

解決の一例

edittheme無題

特定の固定ページではサイドバーを使わず全画面を5ブロックに分け、カスタムフィールドを用いて外部CSSを読み込む方法を採りました。XAMPP環境で簡単に実現できましたが、移植がうまくいきません。手順書を確認すれどまったく改善されません。試行錯誤では不具合箇所を絞りきれないので、調査したところ、西沢直木のWebサイト、CSSの変更が反映されないときのチェックポイントが参考になり、ずいぶん助かりました。感謝申し上げます。

local-css

その記事には表示中の画面で実際に読み込まれているCSSの調べ方が解説されていました。「ページのソースを表示」させると個別のCSS(nextgeneration.css)が正しく割り当てられており、カスタムフィールドによるリンク方法には問題ないことがわかります。上図のリンクアドレスをクリックすれば、はっきりします。ローカル環境の格納先には問題なくジャンプしました。

action-css

本番環境の上例でも個別CSSはねらいどおり割り付けられているが、クリックしてもジャンプしません。このことから個別style.cssのインクルード先が正しくないことが判りました。アドレスに.jpが欠落していたことが原因でした。

感想

新しいことを進めるときは様々な問題点が噴出します。簡単なことは試行錯誤で解決しますが、体系づけられた究明法を確立しておかないと体力が消耗することを経験しました。