CSS変更が反映されない時の対処法・CSSの読ませ方

こんにちは、シュウマイです。

WordPressに吹き出しを導入するために、CSS(スタイルシート)の編集をしていたのですが、これがうまくいきませんでした。
同様の症状で悩んでいる方も多いと思うので、僕が解決した方法をシェアします。

WordPressで吹き出しをプラグインなしで作ってみた

2017.09.26

CSSが変更できない・反映されない

CSSの編集の方法は、二通りあります。

外観>CSS編集

一つ目は、テーマのCSS編集機能を用いる方法です。

多くのWordPressテーマでは、CSSが簡単に追加できるようになっています。

ダッシュボードの外観>CSS編集と進むか外観>テーマと進むと追加CSSがあります。

追加CSSでは、テキストエリアにコピペし、保存ボタンを押すだけで簡単にCSSを追加することができるはずです。

しかし、本来であればここにコピペするだけで良いのですが、保存するボタンを押しても保存されない不具合が発生しました。

シュウマイ

悩ましい…

そこで、次の手段を試します。

 

外観>テーマの編集

ダッシュボードから外観<テーマの編集に進みます。

スタイルシート(style.css)を編集して保存します。

シュウマイ

保存できた!反映されてるか確認しよう!

と見てみるものの、何も変わっていません。

CSSが反映されない⇒CSSを読み込んでいない

CSSがしっかりと保存されているのに反映されていないということは、そもそもCSSを読み込んでいないのではないかという考えに至りました。

CSSを読み込む指示は、テンプレートのHeader.phpの中で行います。

子テーマを使っている方で、Header.phpがない場合は、親テーマのHeader.phpを開きます。

その中に次のような記述があるかどうか確認します。

<link rel=“stylesheet” type=“text/css” href=“style.css” media=“all” />

<link rel=”stylesheet” href=”<?php bloginfo (‘stylesheet_url’); ?>” type=”text/css” />
<link rel=”stylesheet” href=”<?php echo get_stylesheet_uri(); ?>” type=”text/css” />

 

現在ではechoで読むことが推奨されているので、三番目のものを用いると良いでしょう。

<link rel=”stylesheet” href=”<?php echo get_stylesheet_uri(); ?>” type=”text/css” />

上記のコードをコピーし、Header.phpの中の<head>~</head>の中に貼り付けて保存します。

誤って他のコードの途中に挿入しないように、</head>の直前が良いです。

これで反映されるようになるはずです。

シュウマイ

CSS反映されて、吹き出しの導入が出来ました!

WordPressで吹き出しをプラグインなしで作ってみた

2017.09.26

 



コメントを残す

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