「WordPress子テーマのCSSが反映されない！」
「WordPressの追加CSSが何故か反映されない、、」
WordPressの学習を始めると、CSSが反映されない事件が起きますよね。笑
今回は、ワードプレスの追加CSSや子テーマのCSSが反映されない時の原因と対処法を解説していきます。
せっかくCSSを編集したのにうまく反映されないと悲しいですよね、、、
経験上可能性の高い原因と対処法を順に説明していくので、一つずつ試してみてください！
普段はweb制作関連の学習方法も発信しているので、気になる方はぜひチェックしてみてください！
>>Web制作学習ロードマップ
>>WordPress学習ロードマップ
-
-
"独学でOK" WordPress案件を取れる学習ロードマップ
続きを見る
-
-
【WordPress】ファビコンを設定する方法と変わらない時の対策
続きを見る
WordPressでCSSを記述する場所
まず大前提として、CSSを記述する場所が正しいかどうか確認してみましょう。
WordPress管理画面の追加CSS
この場合は、子テーマを作成せずにCSSを反映させたい場合によく使われます。
管理画面の外観 → カスタマイズ → 追加CSSから編集できます。
親テーマのstyle.cssを更新しないのには理由があります。
親テーマを直接いじってしまうと、テーマが更新された際に自分で追加したコードがリセットされてしまったり、テーマがうまく動かなくなってしまう可能性があるからです。
子テーマを使用せずにCSSを変更する時は管理画面の追加CSSから記述するようにしましょう。
WordPress子テーマのstyle.css
ワードプレスには親テーマの機能やデザインを継承した子テーマを作成する事ができます。
少しCSSをカスタマイズするくらいだったら管理画面の追加CSSを使用すれば良いですが、大きく変更を加える時には子テーマのstyle.cssに記述するようにしましょう。
WordPressで子テーマCSS・追加CSSが反映されない原因と対策
さて、正い場所にCSSを記述できている事が確認できたら、次はワードプレスに反映させるようにしましょう。
子テーマのCSSが正しく読み込まれていない
まず、正しくCSSが読み込まれているか確認しましょう。
ここは管理画面から編集した人は問題ないと思うので、次に進んで大丈夫です。
ワードプレスで子テーマを使用する際は、子テーマのfunctions.phpに親テーマと子テーマそれぞれのstyle.cssを読み込ませる記述をしなくてはいけません。
管理画面の 外観 → テーマエディターからfunctions.phpをクリックし、
以下のコードを追記してください。＊パスなどはディレクトリ構造に合わせて調整してください
|
1 2 3 4 5 6 7 8 9 10 11 |
<?php add_action( 'wp_enqueue_scripts', 'theme_enqueue_scripts' ); function theme_enqueue_scripts() { //親のstyle.css wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css' ); //子のstyle.css wp_enqueue_style( 'style-child', get_stylesheet_directory_uri() . '/style.css', array( 'style' ) ); } |
この記述を行うことで、子テーマに親のstyle.css → 子のstyle.cssの順で適応されるようになります。
WordPressのキャッシュが残っている場合
WordPressでCSSが反映されない時、キャッシュが残っている事が原因である事は非常に多いです。
これが原因だった場合、一瞬で解決できる事もあるので試してみましょう。
以下のショートカットキーでスーパーリロードをする事でキャッシュをクリアしてリロードが出来ます。
· Windows：Ctrl ＋ F5
· Mac ：command ＋ shift ＋ R
また、検証ツール → Network のDisable cache にチェックを入れた状態でリロードしてもキャッシュをクリアできるので、念の為どちらも試してみましょう。
CSSの優先度
WordPressにしっかりとCSSを読み込ませて、キャッシュもクリアしたのに反映されない場合はCSSの優先度の影響かもしれません。
CSSは基本的に上から下に読み込まれるので、後に記述したものが反映されます。
子テーマを使用している場合も、親テーマの後に子テーマを読み込むから、自由にカスタマイズできると言うわけです。
ただ、これには例外があります。例えば、
|
1 2 |
.top-text{font-size:16px;} p{font-size:18px;} |
と記述されていた時です。
基本のルールに則れば下に記述されている18pxになりそうですが、残念ながらそうはなりません。
CSSは要素を詳しく指定したほうが反映されるというルールが存在する為です。
簡単に説明すると
要素セレクタ（p,h2) < classセレクタ(.~) < idセレクタ（#~）
の順で優先度が高くなっていきます。こちらのサイトで詳しく解説されているようなので、こちらを参考にしてみてください。
どうしても反映されない場合は、
|
1 |
p{font-size:18px !important;} |
と記述することで、ルールを無視して反映させる事が出来ます。
!importantは最強！
しかし、!importantを乱用すると後の管理が難しくなるので、なるべくセレクタの指定で反映させることをおすすめします。
WordPressのCSSが反映されに時の対策【番外編】
これまでの対処法で解決しなかった人は、そもそもCSSの記述が間違っていないかどうか確認してみてください。
ーディングでは間違える訳ないところを間違えて数時間悩まされる事もしばしばあります。
クラス名のスペルは間違っていないか、「;」と「:」を間違っていないかなど、ひと休憩して確認してみてはいかがでしょうか。
あっけなく解決できるかもしれません。
まとめ WordPressのCSSが反映されないのは、どこかが間違っているから！
いかがでしたか？ワードプレスのCSSは反映されるようになりましたか？もし解決の手助けができたなら幸いです。
ワードプレスは編集が難しく、うまく動かない事もあるかもしれませんが、必ず原因はあるので、落ち着いて解決していきましょう！
それではまた！
-
-
文系でも新卒Webデザイナーとして就職できるのか【結論：可能】
続きを見る