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

functions.php

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

Simplicity functions.php編集イメージ
Simplicity functions.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 を編集し、公開するタイミングで functions.php の戻り値を更新します。

return 1;  // ex. return 2;

カスタム方法その2

functions.php

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

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

Simplicity functions.php編集イメージ
Simplicity functions.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 ]は「都度、手動で functions.php を更新する手間がかかる」カスタマイズ方法です。

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

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

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


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

おわりに

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

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

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


WordPressのツボとコツがゼッタイにわかる本

中田 亨
出版社:秀和システム  発売日:2017-03-10

Amazonで詳細を見る

エンジニアのためのWordPress開発入門 (Engineer's Library)

野島 祐慈,菱川 拓郎,杉田 知至,細谷 崇,枢木 くっくる
出版社:技術評論社  発売日:2017-01-26

Amazonで詳細を見る

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)

狩野 祐東
出版社:SBクリエイティブ  発売日:2016-10-27

Amazonで詳細を見る

2017年12月13日: functions.php 誤記を修正しました
2017年05月23日: 一部リンク修正