WordPressテーマ更新時のcssキャッシュ対策

2018/12/25

WEB制作受タク

WRITER

ヒカセン

イーガオでweb制作をしています。どちらかというとエンジニアよりもデザイナー寄り。自転車の交通マナーにうるさい。

なんて簡単に済めば良いですが、公開前ならともかく、運用中のサイトだとなかなかそうもいきません。
WordPressテーマのcssを編集したら都度読み直すようにしないといけないですね。
いろいろとやりようは考えられますが、私としましてはテーマのVersion情報をクエリでつけるのが良いんではないかなと思います。

理由は、設計として美しいからです。

style.cssにversionナンバーをクエリで追加する方法

WordPressをインストールした際にデフォルトで設定されているテーマ「TwentySeventeen」を見てみますと、style.cssを読み込むときこんな感じになっていると思います。

<link rel="stylesheet" id="twentyseventeen-style-css" href="http://hogehoge.net/deault/wp-content/themes/twentyseventeen/style.css?ver=4.9.9" type="text/css" media="all">

このstyle.cssについているver=4.9.9というクエリは、WordPress本体のバージョンの数字です。

wp enqueue style関数でstyle.cssを読み込んでいる場合、第4引数$verを指定しないと自動的にWordPressのバージョンが追加されるんですね。

今回はここをテーマのVersionに置き換えていきます。

使うのはwp_get_theme関数です。

wp_get_theme関数でテーマのVersion情報を取得する

細かいことはCodex読めというわけで、

<?php
//現在のテーマのバージョンを表示
$my_theme = wp_get_theme();
echo $my_theme->get( 'Name' ) . " is version " . $my_theme->get( 'Version' );
?>

Codexにこういうふうに書いてありました。そのまま使えますね。使います。

wp enqueue styleを使っている場合(子テーマ使用)

プラグインのcssだったりなんだり、読み込むファイルが増えてくると、header.phpじゃなくてfunctions.phpからcssを読み込ませたくなるのが人情というものです。

<?php 
function my_enqueue_styles() {
	//親テーマのcssを読み込む
	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    $my_theme = wp_get_theme();
    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array(), $my_theme->get( 'Version' ));
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_styles' );
?>

こんな感じで、子テーマのfunctions.phpに親テーマのstyle.cssと子テーマのstyle.cssを並べて書いてあげると気持ち良いです。

header.phpなどにベタっと書いてある場合

そんなにたくさんcss読み込まないよという場合などは、header.phpにベタっと、さらっと書くこともあります。それはそれで美しいですね。

やることは同じです。

<?php $my_theme = wp_get_theme(); ?>
<link rel="stylesheet" href="<?php echo get_template_directory_uri() ?>/style.css?ver<?php echo $my_theme->get( 'Version' ) ?>">

こんな感じです。

style.cssのversionを更新するのを忘れずに

さて、これでstyle.cssのversionがクエリで追加されるようになりますが、肝心のstyle.cssのほうを更新しないと意味がありませんw

/*
Theme Name: テーマの名前
Description: テーマの説明文
Author: 株式会社イーガオ
Author URI: https://www.egao-inc.co.jp/
Version: 1.1
*/

style.cssの冒頭にこんな感じのコメントが入っているはずです。

このVersionのところの数字を1.1から1.2にしたり1.15にしたりしましょう。

とりあえずこれをやっておけば、「更新されてないんですけど！」という声は聞かなくて済むかと思われます。

それでは皆さま、良いWordPressライフをお過ごしください。