子テーマのcssが反映されない。とりあえず2つ問題があった。

2015/05/09 2015/10/21

利用しているテーマはSTINGER5です。

今回の原因

1.子テーマよりも親テーマのスタイルシートが後に読み込まれていた。

2.キャッシュによって最新の更新が反映されていなかった(かも)。

※Xserverでmod_pagespeedをonにするとスタイルシートとかが圧縮されたり、キャッシュされたりする。そのために不具合が発生するのかもしれない

やってみたこと

子テーマのheader.phpで wp_head() を探す。見つけたら、その下で子テーマのスタイルシートを読み込む。

job_programmer-300x300

h2タグには装飾が付いていた

これまで記事中の見出しでは<h2>タグを使っていなかった。いちいち<div>でスタイルを設定していた。
そのため気づかなかったのだが、今更ながらhtmlの書き方的に問題があるんじゃないかな？と思った。

ということで<h2>に置き換える作業を行ってみた。
すると、STINGER5では<h2>タグを使うと次のように吹き出しのような装飾がされていたことに気づく。

下に出っ張りがある

個人的には吹き出しは要らないかなと思ったので、子テーマで上書き(初期化)することにしてみた。

初期状態に戻すには initial を指定すればいいらしいが・・・

親テーマのstyle.cssを見てみると、h2に関する設定を発見。また、h2:beforeとh2:afterというものも設定されている。
この二つの設定で吹き出しを作っている感じなので、この二つを初期状態に戻すことにする。

初期状態に戻すにはプロパティにinitialを指定すればいいらしい。

子テーマのstyle.cssで h2:before、h2:after の設定をそれぞれ初期化。そして確認。変化なし
ん？指定を間違えたかな？他のタグはどうだろう。<p>を上書きしてみる。変化なし。

適当なclass名を指定すると利用できることから、子テーマのstyle.cssは読み込んでいるはず。上書きに失敗しているらしい。

よく見ると親テーマで上書きされている？

ブラウザ上でページのソースを確認する。すると、親テーマ(のスタイルシート)の方が子テーマ(のスタイルシート)よりも後に読み込まれているように見える。

header.phpファイルを見ると親テーマ(のスタイルシート)の読み込みは wp_head() の内部で行っているようだ。そこで、子テーマ(のスタイルシート)の呼び出しを wp_head() の下に配置した。

・・・・・・
&lt;?php wp_head(); ?&gt;
&lt;link rel="stylesheet" href="&lt;?php echo get_stylesheet_uri(); echo '?' . filemtime(get_stylesheet_directory() . '/style.css'); ?&gt;" type="text/css" media="screen" /&gt;
・・・・・・

・・・・・・

<?php wp_head(); ?>

・・・・・・

その後確認すると、子テーマでの上書きが成功していたのでひとまずこれで上書きはされるようになった。

でも、そもそもWordPressの仕様的に、子テーマは親の後に勝手に読み込んでくれるんじゃないの？
まだまだよくわからない。

追記、この問題はwp_head()が「親テーマのスタイルシート」を読み込んでいることにより起きたものっぽい。この問題を回避するには、「子テーマのスタイルシート」をwp_head()呼び出しの後に読み込むこと。

もしかしたら、mod_pagespeedをonにしたから？

調べていると、Xsever の mod_pagespeed を on に設定していると、スタイルシートなどを圧縮し、またキャッシュにするなどの処理をするらしい。

wp_head()内で読み込んでいるスタイルシートは、その圧縮、キャッシュされたもののようだ。

もしかしたら、そのキャッシュに子テーマの設定がまだ反映されていないだけなのかもしれないが、どうなのだろう？

また、normalize.cssとかを<head>の上部で読み込んでいたのだが、もしかしたら圧縮分も合わせると2回読み込んでいる？
header.phpでnormalize.cssの読み込み部分を削除しても、違いがよくわからない。
PageSpeedInsightsでたまにnormalize.cssの読み込みをどうにかしろと言われるので削除したままで問題ないならそのままにしておこうと思う。

まあ、素人考えなので全くの見当違いかもしれないけど。詳しい人教えてください。