wordpressでcssを編集したのに効かない問題の対処と原因と特定する術

Web制作//

最近、友人にWeb制作を教えたりしてるんですが、

wordpressの子テーマでcssが反映されないよ！

こんな質問がきました。

答えは結構簡単だったんですが、本人は自分でめちゃくちゃ調べたらしく、それでもわからないから僕に聞いたみたいです。

今後活かせるように、WordPressのCSSが効かないとき、どうやって原因がわかって、この問題を解決したのか、解決をした手順について書いていきます。

関連記事
PHP初心者がWordPressテーマカスタマイズする方法【WordPress歴4年が解説】

現状：WordPressの子テーマでCSSが効かない

向こうから話を聞いてみると、こんな状況らしい。

・Wordpressの子テーマを使っている。
・それにcssを加えたが、それがなぜか反映されない。（子テーマのstyle.css）
・他のテーマで同じことしたらちゃんと反映されたのに、なぜこのテーマで反映されないのか？

いつも同じ手順でできていることが、このサイトだけできなかったようです。

結論：子テーマのcssが読み込まれていない

まず答えを先に言っておきます。

本人は子テーマのstyle.cssを編集していたみたいですが、それがこのテーマでは読み込まれていませんでした。

読み込んでいたcss

親テーマのstyle.css
子テーマのadds.css

質問者の彼は、読み込んでいない子テーマのstyle.cssを読み込んでいたので反映されなかったのです。

通常の子テーマだとこういうことはないのですが、質問者の子テーマはワンオフのエンジニアが作ったカスタム品だったようで、普通の子テーマとちょっと仕様が違うかったため、このようになったのかなと。

まあ、子テーマだったらstyle.css読み込んでると思いますよね・・・。

解決編：cssが読み込まれているか確認する

というかこれが全てです。まあ、これがわかるなら苦労しませんよね。笑

が、やり方を覚えれば簡単です。開発者ツールを使います。

なお、ブラウザはクロームを使いましょう。

IEやSafariの方は、まずクロームをDLするところから初めてください。

Chormeをググる

https://www.google.co.jp/

Chormeでググれば出ますのでその先でDLしましょう！

WordPressでcssが読み込まれる方法は2つ

wordpressでcssが読み込まれる方法は2つあります。

  1. html中にstyleタグで囲まれて挿入される
  2. style.cssなどの形でcssファイルが読み込まれる

文字だとわかりずらいですね、要はこういうことです。

//1.html中にstyleタグで囲まれて挿入される
<style>
  .class{
    color:#009633;
  }
</style>

//2.style.cssなどの形でcssファイルが読み込まれる
<link rel="stylesheet" href="https://〇〇.jp/wp-content/themes/〇〇/style.css" media="all">

styleタグで本文中に直接書き込まれているか、cssファイルを読み込んでいるかの違いです。

「cssが効かない！」となったら、まずこの2つのどっちかで読み込まれているか確認してください。

Chorme検証ツール

右クリック→検証でソースが見れます。

1. styleタグでhtml中にある場合

Macの場合「comand + F」で検索窓を出現させて、<styleと打てば、探してくれます。（Windowsなら、最初から右上にあるっぽい。）

2. cssファイルの場合

開発者ツールの上にあるタブで「Sources」をクリックすれば、読み込んでいるファイルを表示してくれるので、そこから探していきましょう。

開発者ツール Sourse

ドメインの中にある、wp-content/theme/の中に大体のファイルがあるかなと。

今回は、ここで子テーマのstyle.cssが読み込まれてないのがわかり、解決しました。

cssが読み込まれていない系なら、ここで解決できるでしょう。

cssが読み込まれているけど、更新が反映されてない場合は？

cssが正しく読み込まれている！でも、変更が反映されない。この時も2つのパターンに判れます。

  1. キャッシュが効いてて読み込まれない
  2. 追加したcssよりも優先度が高いcssがある。

1. キャッシュを削除しよう

キャッシュを削除しよう

キャッシュの場合は、キャッシュをクリアしましょう。開発者ツールが開いている状態で、

  1. Chormeの更新マークを右クリック。
  2. 表示されるメニューで「キャッシュの削除とハードの再読み込み」をクリック。

これでキャッシュがクリアされた状態で再読み込みされます。キャッシュクリアしてない場合は、一度やって見ましょう。

キャッシュ削除の詳しいやり方は、以下記事にて解説しています。

html/css/jsの変更が反映されない時はブラウザキャッシュを消してみよう

2. cssの優先度

cssには優先度なるものがあります。

どういうものかというと。

p{
  color:blue;
  font-size:20px;
}
p{
  color:orange;
}

という感じに記述されていたら、最終的に

p{
  color:orange;
  font-size:20px;
}

という風に、下に書いたcssが優先されるのです。ファイルの場合は下のcssファイルが優先されます。

もし、優先度の問題なら、cssに「!important」をつければ最優先されます。（かなり強引な手法なので推奨はしない）

p{
  color:blue !important;
  font-size:20px;
}
p{
  color:orange;
}

!importantはcssの一番最後につけます。↑のようにすれば、

p{
  color:blue;
  font-size:20px;
}

こんな感じになります。優先度負けている場合は、優先度あげればOK。

優先度について詳しくはこちらに。

【初心者向け！】CSSの変更がうまくいかないときは優先度がおかしいかも？

まとめ

という感じに問題点を探して、対処していきます。

今回は、最初にcssファイルを確認する時点でわかったので比較的あっさり解決できました。

所要時間3分です。

何かあった時は、調べるのは大事ですが、エンジニアに聞くのが一番早かったりしますね〜。

できた！ありがとう！！！

彼も無事に出来たようで何よりです！