wordpress

【WordPress】子テーマのCSSが反映されない犯人見つけた【Stinger】

投稿日:2014年4月28日 更新日:

photo credit: Nikolay Bachiyski via photopin cc

お読みいただきありがとうございます。ケンちです。
このブログで使わせて頂いているWordPressのテーマ「Stinger」は、とても人気があるので多くのブロガーさんが使っています。ブロガーなら知らない人はいないんじゃないかってくらい有名なテーマですね。

あちこちブログを見るたびに「これもStingerか…」「これもか…」と一人ツイートしてしまうくらい、たくさん使われているわけですが、こうなるとカスタマイズして独自のカラーを出したくなるのが人情というものです。




子テーマが反映されない事象にハマった

ということで私も子テーマを作ってカスタマイズに手を付け始めたワケですが、始めたとたんにハマりました!!(今回は悪い意味で)
何にハマったかとういと

子テーマが反映されない

という現象に遭遇してしまいました。よく聞く話ですね。そうですね。そうですよ。

今は解決しましたが、3回ググっても解決方法を見つけられなかったので、将来忘れたときのための備忘録と、同様の自称でハマっている人の参考になれば。

ローカルでは子テーマが反映される

私はローカル環境にWordPressを入れて子テーマのカスタマイズとテストをしていました。

子テーマ作りの基本に従って「style.css」を作って、先頭にお約束のコード(バージョンとか)を書いて、あとは変更したいコードをあれやこれやと書きました。他にも「sidebar.php」「single.php」なども子テーマのフォルダに入れて、あんなことやこんなことなど書き書きしておりましたです。

少し手を加えるたびにローカル環境で子テーマが反映されている事を確認しながら「うんうん、よしよし、う~む良い感じだぞこりゃ」とカスタマイズを楽しんでおりましたよ。ええ。

そう、ローカルではキチンと反映されていたんです。

区切りの良いところで本番環境にアップしたところ…

「あれ?一部が反映されてないじゃん。てか、え?一部?ってなんで一部?」と、一人ツイート…

サーバー環境をローカルに再現

ローカルでは問題がなかったにサーバーにアップすると子テーマの一部が反映されない。

この現象を検証するためにサーバーのファイルをローカルに持ってきて、サーバー環境の問題点を探ってみようと思いました。が、この作業はまったくの無駄でした。

本番のファイルをローカルに持ってくると子テーマは反映されるんです。

(後で気づきますが、このときサーバーの環境をきちんと再現できてなかったです)

本番とテストの環境の違い

サーバー環境とローカル環境の違いをよく考えてみたところ、使っているプラグインが違うということに気づきました。

見た目のテストをするために、画面表示に影響があるプラグインは入れてますが、その他のプラグイン(高速化とかSEO対策関係)は、ローカル環境のWordPressには入れてませんでした。

子テーマが反映されない原因はコレだった

プラグインの違いで気付いたのがキャッシュ系のプラグイン!

CSS(リソース)のキャッシュを設定してたんだっけ…(汗)

ちなみにそのプラグインは「W3 TOTAL CACHE」です。

キャッシュが必要なほどアクセスはないんだけど、高速化は試したくなるもので、誰もがやってしまう失敗のようなもので、まさかこんなことで時間を取られるとは思わなかったわけで…

「W3 TOTAL CACHE」を無効にしたら子テーマがすべて表示されました。

キャッシュ系プラグインの怖さ

キャッシュ系の問題に気付いてからStingerの作者のEnjiさんブログでこんな記事を見つけました。

ちょっと待て!素人がWordPressのキャッシュ系プラグインをわけわからずに使うと悲惨な目に遭うぞ!

今回の私の事象とは内容は違うけど、キャッシュ系プラグインって怖いですね…

もうキャッシュには手を出しません。手を出さなきゃいけないくらいのブログになるように記事を書きます。

とか言いながらカスタマイズに時間使っているけど。

って言うほどカスタマイズも進んでないけど…

まとめ

子テーマが反映されなかったらキャッシュ系のプラグインが怪しいよ!

とうか、高速化は必要を感じてから入れたほうがいいよ!

ということですね。

初心者が手を出すもんじゃないとは聞いていましたが、まさかこんなことでハマるとは…

なんとも恥ずかし結末でした。

それではまた。

この記事が気に入ったら下のボタンでシェア!

-wordpress

執筆者:

関連記事

【WordPress】STINGER5は7インチタブレットにも優しい

ブログのテーマをSTINGER5に変えました。レスポンシブデザインというものです。レスポンシブデザインは6インチ以下のスマホやPCやMacでブログを読み書きしている人が気づきにくい問題を克服してくれま …

medium_3769771267

【STINGER】無料のWordPressテーマとの付き合い方

こんにちは。今は昔プログラマーだったケンち(@ soredou_kenchi )です。今回はブログのテーマを通して、無料で公開されているツールやサービスを使うときの心得というか付き合い方みたいなものを …

【WordPress】プラグイン「AmazonJS」の設定の補足

アカウント登録の画面が英語しかないということで躊躇してい使っていなかったWordPressのプラグイン「AmazonJS」を導入してみましたので設定の補足など書きます。

ケンちです。約20年ほど写真業界にいました。いまはIT系企業で主にITとは関係ない仕事をしている普通の人です。Twitterによく出没しています。