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

2018年1月22日2020年2月18日

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

こんな質問がきました。

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

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

困っていること：WordPressの子テーマでCSSが効かない

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

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

解決法：子テーマのcssが読み込まれていない

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

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

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

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

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

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

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

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

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

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

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つのどっちかで読み込まれているか確認してください。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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ファイルを確認する時点でわかったので比較的あっさり解決できました。

所要時間3分です。

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

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