Simplicity2の「lib/scripts.php」に手を加えて、スタイルシート（style.css）の変更が即座に反映されるように設定しました。Googleを検索するとたくさん出てくる修正方法とはちょっと違いました。
cssの修正が反映されない
WordPressで「style.css」を更新しても、なかなか反映されなくて困っていました。
cssが反映されないときの常套手段として、ブラウザのキャッシュをクリアするという方法がありますが自分のPCならいざしらず、訪問者のブラウザキャッシュをクリアすることはできないんですよね。
それとデザインを修正するときに、いちいちキャッシュクリアしなければ確認できないのは面倒です。
自動的にcssを反映させる方法
自動的に新しいcssを反映される方法がないかと調べてみたら見つかりました。
“style.css”の後ろにタイムスタンプ（クエリ情報）を付加するというのが一般的な解決方法だということです。具体的に言うと、「header.php」内の”style.css”付近に手を加えるということになります。
header.phpの修正個所
【修正前】
【修正後】
このようにすることで、『style.css』だったものが『style.css?1497242298』のように扱われるようになり、style.cssが更新されるたびに再読み込みされるようになります。
Simplicity2でstyle.cssを即座に反映する
さっそく修正と思ったのですが「header.php」の中に肝心の”style.css”の記述が見つかりません。どこに記述されているかはテーマによりけりだそうで、Simplicity2では「lib/scripts.php」の中にありました。
本来は子テーマを経由して修正した方が良いのですが、かえってややこしくなりそうなので直接修正する方法をとります。Simplicity2をアップデートするたびに手作業での修正が必要になりますが、もし修正を忘れたとしても大事にはならないので簡単に済ませます。
Simplicity2での設定方法
WordPressの管理画面から「外観」→「テーマの編集」を選択します。
子テーマを用いてSimplicity2を利用している場合は、右上の「編集するテーマを選択」の欄がSimplicity2 Childになっているので、親テーマであるSimplicity2に切り替えます。
次に、「scripts.php」を探して開きます。
該当の行を見つけ出して修正を加えます。
197行目から始まる「子テーマ用スタイルシートの呼び出し」が修正対象となります。
////////////////////////////////////////////////////////////////
//
//子テーマ用スタイルシートの呼び出し
//
////////////////////////////////////////////////////////////////
///////////////////////////////////////////
//子テーマが存在しているときだけに呼び出すスタイル
///////////////////////////////////////////
if ( is_child_theme_enable() ) {
//子テーマのstyle.css
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css?'. filemtime( get_stylesheet_directory().'/style.css') , array('simplicity-style', 'simplicity-style') );
//子テーマのresponsive.css
if ( is_responsive_enable() ) {
//完全レスポンシブ表示用のスタイル
wp_enqueue_style( 'child-responsive-mode-style', get_stylesheet_directory_uri() . '/responsive.css', array('simplicity-style') );
}
//子テーマのmobile.css
if ( is_mobile() && !is_responsive_enable() ) {
wp_enqueue_style( 'child-mobile-style', get_stylesheet_directory_uri() . '/mobile.css', array('simplicity-style') );
}
}
修正個所は208行目です。上記リストは修正済みです。
以下に修正個所を抜粋します。
【修正前】
wp_enqueue_style( ‘child-style’, get_stylesheet_directory_uri() . ‘/style.css’, array(‘simplicity-style’, ‘simplicity-style’) );
【修正後】
wp_enqueue_style( ‘child-style’, get_stylesheet_directory_uri() . ‘/style.css?’. filemtime( get_stylesheet_directory().’/style.css’) , array(‘simplicity-style’, ‘simplicity-style’) );
14行にも良く似た記述がありますが、こちらは親テーマの「style.css」に関する記述なので無視して構いません。子テーマ側の「style.css」にしか変更を加えないはずだからです。
※上記行番号は、Simplicity2 バージョン2.5.0eでのものです。バージョンによっては違う恐れもあるのでご確認の上修正をしてください。
保存したら設定完了です。
これで、ブラウザキャッシュのクリアをしなくてもスタイルシートが反映されるようになったはずです。
不具合があった時にもとに戻せるように、バックアップを取ってから作業を行ってください。まあ、問題があったらテーマを上書きしてしまえば良いんですけどね。
コメント