CSSを更新したのにすぐに反映されない 」というのはWebデザイナさんなら一度は経験されていると思います。

当ブログで利用しておりますSimplicity2でも同様のことがあり、「<link>タグに文字列を付加してキャッシュが切り替わるようにする」という定番の対処をおこないました。

その手順をまとめます。

確認環境

  • Simplicity 2.4
  • Mac版 Chrome
  • PHP 7.0系

Simplicityは子テーマを利用している前提です。

注意

PHPの記述に誤りがあると、ブログ画面が正常に表示されなくなって しまいます。 カスタマイズを実施される場合は、必ず事前にバックアップを残してください。

Simplicity2はどこでCSSを出力しているの

WordPressの一般的なテーマでは、たいてい「header.phpにstyle.cssの出力コード」が記述されているもです。

しかしながらSimplicity2にはこれが見当たらず、テーマ全体を検索したところ次のファイルに記述されていました。

simplicity2/lib/scripts.php

子テーマを利用していない場合は14行目に、

  wp_enqueue_style( 'simplicity-style', get_template_directory_uri() . '/style.css' );

子テーマを利用している場合は208行目に、

  wp_enqueue_style( 'child-style',  get_stylesheet_directory_uri() . '/style.css', array('simplicity-style', 'simplicity-style') );

それぞれstyle.cssを埋め込むコードがありました。

HTMLには次のように出力されます。

<link rel='stylesheet' id='child-style-css'  href='http://[FQDN]/wp-content/themes/simplicity2-child/style.css' type='text/css' media='all' />

カスタマイズ詳細

カスタム方法その1

function.php

WordPressの管理ツールにログインし、[ 外観 > テーマの編集 ] を開きます。
画面右の「編集するテーマ」が[ Simplicity2 child ]となっていることを確認し、下のファイル一覧から[ function.php ]を選択します。

画面が切り替わったら、画像の3の位置に以下のPHPコードを埋め込んでファイルを保存してください。

function getCssVersion() {
  return 1;
}

lib/scripts.php

次に_編集するテーマを[ Simplicity2 ]に切り替え、ファイル一覧から[ lib/scripts.php(scripts.php) ]を選択してください。

ファイルの208行目を削除し、削除した位置に次のPHPコードを埋め込み、更新を実行します。

$fineName = '/style.css?'. getCssVersion();
wp_enqueue_style( 'child-style',  get_stylesheet_directory_uri() . $fineName, array('simplicity-style', 'simplicity-style') );

FTPなど使える方は、このファイルを_親テーマから子テーマにコピーし、子テーマのファイルを修正_することを推奨いたします。

HTML出力結果

追加した関数[ getCssVersion() ]から得られた値がHTMLに出力されます。

<link rel='stylesheet' id='child-style-css'  href='http://[FQDN]/wp-content/themes/simplicity2-child/style.css?1' type='text/css' media='all' />

CSSを編集し、公開するタイミングでfunction.phpの戻り値を更新します。

return 1;  // ex. return 2;

カスタム方法その2

function.php

WordPressの管理ツールにログインし、[ 外観 > テーマの編集 ] を開きます。

画面右の「編集するテーマ」が[ Simplicity2 child ]となっていることを確認し、下のファイル一覧から[ function.php ]を選択します。

画面が切り替わったら、画像の3の位置に以下のPHPコードを埋め込んでファイルを保存してください。

function getCssVersion($fileName, $isChild=true) {
  $directory = ($isChild)
    ? get_stylesheet_directory()
    : get_template_directory() ;
  $filePath  = "{$directory}/{$fileName}";
  return file_exists($filePath) ? filemtime($filePath) : 0 ;
}

通常子テーマを利用していれば子テーマのstyle.cssしか編集しないと思いますが、もし親テーマのstyle.cssも編集することがありましたら第2引数にtrueを与えてください。

lib/scripts.php

次に_編集するテーマを[ Simplicity2 ]に切り替え、ファイル一覧から[ lib/scripts.php(scripts.php) ]を選択してください。

ファイルの208行目を削除し、削除した位置に次のPHPコードを埋め込み、更新を実行します。

$fineName = '/style.css?v='. getCssVersion('style.css');
wp_enqueue_style( 'child-style',  get_stylesheet_directory_uri() . $fineName, array('simplicity-style', 'simplicity-style') );

FTPなど使える方は、このファイルを_親テーマから子テーマにコピーし、子テーマのファイルを修正_することを推奨いたします。

HTML出力結果

追加した関数[ getCssVersion() ]から得られた「ファイル更新時間」がHTMLに出力されます。

<link rel='stylesheet' id='child-style-css'  href='http://[FQDN]/wp-content/themes/simplicity2-child/style.css?1488770000' type='text/css' media='all' />

2案用意した理由

[ その1 ]は「都度、手動でfunction.phpを更新する手間がかかる」カスタマイズ方法です。

これに対し、[ その2 ]の方法は「style.cssの更新時間を参照する」ため、カスタマイズ後は更新手間がかかりません。

なぜ2パターン用意したかというと、「HTMLを出力するタイミングで、都度ファイルを調べに行く」ため、私はこれを「余計なコスト」として好まないからです。

無視しても良い小さなコストとも思いますが、「 なくて良いものはない方がいい 」と考えます。


2案それぞれ重複した説明があることはご容赦ください。

おわりに

「CSSにファイル更新時間を書き出す」対処方はいくつか情報が見られましたが、今回はSimplicityのカスタマイズ方法としてまとめました。

Simplicityは素晴らしいWordPressテーマです。

この記事はtomita@atuwebがお届けしました。



2017年05月23日: 一部リンク修正