WordPressでの見た目の変更を行うときにはcssファイルを変更しますが、このファイルの変更が即時で反映されないんです。。。
今回はこれを解消する方法を記録します。
同じ悩みを持つWordPressユーザーは多いと思います。ぜひ御覧ください。
WordPressでcssの変更が効かない場合の対処方法
そもそもなぜ効かないのかというと、ブラウザのキャッシュ機能で以前のcssの内容を保持しているからなのです。
要は、この機能に対する処置をすることで解決できるんです。
ポイントは２つです。
- ブラウザキャッシュをクリアし、cssの変更が効くようにする。
- cssを修正する度に変更が効くようにする。
では早速ご紹介したいと思います。
ブラウザキャッシュをクリアし、cssの変更が効くようにする。
こちらは至って簡単なお話になります。
お使いのブラウザにもよりますが、私の手元の環境でお伝えしたいと思います。
結局はやることは同じです。「キャッシュのクリア」です。
Google Chromeでの削除方法
「Chrome – 閲覧履歴を消去 – データを消去」。
たったこれだけ。
これにより、WordPressでcssの変更が効くようになります。
cssを修正する度に変更が効くようにする。
こちらの手順は難易度高めです。
簡単に言うと、cssファイルの読み込んでいるプログラムの読み込み方を修正することになります。
今回はWordPressテーマ「JIN」を使って説明したいと思います。
※子テーマではなく、親テーマを直接修正する方法です。やるときは自己責任でお願いします。
プログラムを修正する。
親テーマのfunctions.phpを修正する方法になります。しつこいですが、修正にはくれぐれも注意して自己責任でお願いしますね。
[外観 – テーマエディター]を開き、”編集するテーマを選択：”でJINを選びます。そして、テーマのための関数のところでfunftions.phpを選び、次のように修正を行います。
下の画像のようにjin_themeslug_enqueue_style()箇所の39行目のプログラムコードを、41行目のように修正するんです。
// ↓もともとの記述
wp_enqueue_style( ‘theme-style’, get_stylesheet_uri() );
// ↓修正後の記述
wp_enqueue_style( ‘theme-style’, get_stylesheet_uri() . ‘?’ . filemtime(get_stylesheet_directory() . ‘/style.css’) );
こんな感じです。
修正後の記述の後半の
「. ‘?’ . filemtime(get_stylesheet_directory() . ‘/style.css’)」で、“?とファイルの更新日付”を付与しています。
cssファイルの内容を変更したらファイルの日付が更新されるので、別のファイルを読み出していることになり、キャッシュが効かず変更したcssファイルの内容が反映されるというわけです。
※読み込むcssファイルのファイル名に日付を付けないといけないというわけではありませんからね。
読み込み対象のcssファイルに「”?”と”ファイルの保存日時”」を付与する形で読み込むようにすればOK。
【即効】結果を確認しながらcssを修正する方法。
キャッシュの問題はクリアすることはできましたが、そもそもcssの変更は変更がうまくいっているのか確認が面倒ではないですか？
今度はGoogle Chromeを使った、結果を確認しながらcssを修正する方法をご紹介したいと思います。
「検証」機能を利用する。
[右クリック – 検証]をクリックします。
すると下記のような画面が表示されますので、「Sources」を選択し、編集したcssファイルの選択を行います。（下の例では、JINの子テーマ内のcssファイルを指定しています。）
下の画像の右側の白いエリアにcssが表示されますので、ここを修正することで修正結果が即座に左側の見た目に反映されます。ここで左側の画面で変更された結果を見ながら作業をすることで、効率よく修正作業を行えます。
ここで行った修正は、保存されませんので修正した内容をcssファイルに保存する必要があります。あくまで、修正するときのお試しと考えてください。
最後に：cssの変更が効かない時
ブログは見た目にあんまり拘るなって言われるんですが、ついついいじってしまいます。
これも１つのモチベーション維持と言い聞かせ、やっています（笑）
どなたかの参考になればと思います。