趣深い.com

コケの成長を眺めて暮らしています

WordPressで子テーマのCSSが反映されない原因 はエックスサーバーのmod_pagespeed【Simplicity】

 2015/06/22      WordPress, ブログ運営

ブログを初めて1週間ほど経ったので、そろそろCSSでもいじってみるかと張り切っていたのですが、早速WordPressの洗礼を浴びました。

テーマはSimplicityです。子テーマを編集したのですが、うんともすんとも言わない。

グーグルやらフォーラムやら見ても、
「スペルミスだろ・・・」
「}のつけ忘れじゃないですか」
「;をきちんとつけてますか?」
ばかり。

そんなはずはない…だって、

やったのこれだけですよ?

太字にするだけ。たったそれだけ。

それが変わらない。うんともすんとも言わない。

行けども行けども、どこまで行ってもCSSが反映されない。

親テーマを編集すると一発で変わるのですが、子テーマではさっぱりです。

今までSeesaaブログを使っていて、HTMLもCSSは何となく分かっており、少なくとも自分がやりたい範囲ではそこそこ出来ていたつもりですが・・・全くどうにもならず、困りました。

プラグインだって3つしかいれていません。それを全部切ってもだめです。無言です。

テーマを入れなおしてもダメ。

諦めて、ふて寝して、起きて、でもまだ諦めきれず横になったままiPhoneで検索していたら、出てきました。

エックスサーバーのmod_pagespeedがONになってる!

ありました。ありました。これでした。
Simplicityでもねえ、親テーマでもねえ、子テーマでもねえ。

エックスサーバーのmod_pagespeed

見事にやってました。ページの表示速度が上がるやつです。

「WordPressをエックスサーバーで運営している人は必ずやろう!」という記事を見にして、すっかり乗せられてやっていたのです。たいして違いもわからぬまま高速化に走っていました。

調子に乗って、htaccessもやってました。確かに早いんですが、だからなんなんだという話です。アクセスが全然ありませんから。

初心者はどこでつまずくかわからないものですね。

mod_pagespeedがやっていること

詳しいことは色んなページで書いてありますけど、要は、CSSのファイルをひとつにまとめているんですね。
無駄な処理を省いて高速化している。
だから親テーマのCSSも子テーマのCSSも一緒になって、都合の良いようにまとめられている。

なので、変更してもしばらくは反映されない。
あるいは永久にCSSの変更は反映されることはないようです。

初心者は。何がわからないのかわからない

数時間で解決してよかったです。

検索するときに、
「Simplicity 子テーマ CSS 反映されない」
と入れると、

「Simplicityのカスタマイズは子テーマで」
とか
「カスタマイザーが云々」
みたいのばかり上に出てきました。

やれCSSの上書きがどうだとか、カスタマイザーとの優先順位はどっちが上だとか、丁寧な説明が書いてあるんですが、私は全然違う方向を見ていたようです。
フォーラムを読んでも、「初心者にありがちなミスはこうだろう」というのがいっぱい出ているんですが、それじゃない…となる。

苦しかったです。

初心者が陥りがちなCSSの凡ミス

一応復習のメモを。けっこうやりがちなミスです。

  • ① スペルミス。marginがmarign、colorがcolroとか
  • ② }で閉じてない
  • ③ ;で閉じてない。:と;を間違っている
  • ④ mod_pagespeedがONになっている
  • ⑤ 更に下の行で書き直しちゃっている
  • ⑥ カスタマイザーで色を変更してしまっている。

などなど。

焦ってもろくなことはありませんから、ゆっくり来た道を戻って確認してみて下さい。

時間がかかりますけど、おすすめの方法は1行ごとに反映されているか確認しながらやることです。

スピードは後回しで良かった

WordPress初心者のクセに、スピードを追求したのがいけませんでした。

CSSをバンバンいじるぜ!と張り切っていながらエックスサーバーを使っている、あるいは使おうと思っているスピード狂は気をつけて下さい。

キャッシュをどうにかする系のプラグインは注意が必要です。
初心者には手に負えないところで、何かが動いてしまう。

Xサーバーはそのままでも十分速いです。
これでもまだ満足できないなら、もっと根本から勉強しないといけないようです。