【WordPress】 子テーマを使ったカスタマイズについて(style.css編)

このサイトはTwentyTwelveに子テーマを追加して運用しています。
今後のアップデートを考えると、子テーマのみの変更でカスタマイズが完了することがベストと考えています。

ただし、カスタマイズの内容は子テーマにどんどん書けばいいという単純なものではないようです。
混乱しそうなのでまとめてみました。

まずはCSS編です。

スポンサーリンク

1.CSSを読み込む順番は?

CSSは親テーマのstyle.cssを読み込んだ後で子テーマのstyle.cssを重ねて読み込んでいます。

child_theme_01

ただし、問題が一点。

ブラウザがIE8以下の場合は、上記の処理の後で別のCSSを読み込むようになっています。

親テーマstyle.css → 子テーマstyle.css → 親テーマie.css

なんということでしょう。

2.IE8以下に対する対応

つまり、いくら子テーマのstyle.css内に「IE8以下」用のCSSを書き込んでも、親テーマのie.cssに上書きされてしまうのです。

じゃあ子テーマにie.cssを置けばいいかというとstyle.cssのようには読み込んでくれません。
「ie.cssが子テーマにある場合は上書きする」という仕組みがもともとないのです。

まあ親テーマ内のie.cssを直接いじれば簡単なのですが、このサイトでは出来るだけ子テーマ内でカスタマイズを完結させたいと考えています。
これに対応するには親テーマのie.cssを読み込みにいく処理を書き換えてしまえばよさそうです。

子テーマ内のfunctions.phpでその処理を行うコードは以下のリンク先にあります。

【参考サイト】
TwentyTwelveの子テーマつくったらハマった話(Masahiko Kawai)

3.IE8以下のユーザーは無視してOK?

Web業界がIEを目の敵にする理由が少し理解出来ました。
CSSデザインの作業が2倍になりますので「対応しない」という選択肢がないのかを調べました。

こちらで見る限り、IE8の日本でのシェアは11.33%とのこと。
(シェアは調査会社により数値は大きくぶれますが)

マイクロソフトのIE8のサポート期限ははっきり明記されていませんが、Windows7のサポート終了と同じ2020年1月14日ではないかと推測されています。

微妙な結果になりました。

まとめ

子テーマのstyle.CSSの仕組みついては概ね理解できた。

が、IE8以下の対応については悩ましい限り。
今後枯れていくブラウザに対応をする余裕があるなら、スマホに対応したほうが発展的だと考えています。

決めました。
IE8以下は基本捨てます。
本当に暇になったらやりましょう。


スポンサーリンク
  • このエントリーをはてなブックマークに追加

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA