【WordPress】キャッシュを強制的に無効化する方法 (ワードプレス編)

更新日：2023年8月22日

以前紹介した『更新内容が反映されない？キャッシュを強制的に無効化する方法』では、読み込ませたいファイル（CSS、JavaScript）を<head>内に直接書き込む場合の方法を紹介しました。

更新内容が反映されない？キャッシュを強制的に無効化する方法

今回はWordPressのfunctions.phpでの記述方法を紹介します。

【はじめに】基本的なfunctions.phpの記述方法

WordPressではCSSやJavaScriptを読み込ませる場合、<head>内に直接記述するのではなく、functions.phpに記述する方法が推奨されています。

記述方法はCSSの場合wp_enqueue_style()、JavaScriptの場合wp_enqueue_script()をアクションフックを使って読み込ませます。

CSSファイルの読み込み

function add_files() {
  wp_enqueue_style( $handle, $src, $deps, $ver, $media );
}
add_action( 'wp_enqueue_scripts', 'add_files' );

$handle＝スタイル名
$src＝スタイルシートのURL
$deps＝読み込みファイルが複数ある場合に順番を制御（任意）
$ver＝バージョン情報（任意）
$media＝media属性（任意）

JavaScriptファイルの読み込み

function add_files() {
  wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
}
add_action( 'wp_enqueue_scripts', 'add_files' );

$handle＝スタイル名
$src＝スタイルシートのURL
$deps＝読み込みファイルが複数ある場合に順番を制御（任意）
$ver＝バージョン情報（任意）
$in_footer ＝ファイルの読み込み位置（任意）

【本題】キャッシュを強制的に無効化する方法

CSSの場合

function add_files() {
  wp_enqueue_style( 'style', get_template_directory_uri().'/style.css', array(), '1.0', false );
}
add_action('wp_enqueue_scripts', 'add_files' );

1行だとわかりにくいので引数ごとに改行すると

function add_files() {
  wp_enqueue_style(
      'style',
      get_template_directory_uri().'/style.css',
      array(),
　　　'1.0',
      false
  );
}
add_action('wp_enqueue_scripts', 'add_files');

『更新内容が反映されない？キャッシュを強制的に無効化する方法』でも説明したようにファイルのバージョン情報を'1.0' '1.1' と書き換えることでキャッシュを無効化することができます。

JavaScriptの場合

function add_files() {
  wp_enqueue_script(
      'java',
      get_template_directory_uri().'/java.js',
      array(),
　　　'1.0',
      false
  );
}
add_action('wp_enqueue_scripts', 'add_files');

【番外】日付を取得して自動的に無効化する方法

PHPのdate関数は現在の日付を文字列で取得できます。それを利用することでver='〇〇〇'を自動的に書き換えることが可能です。

date関数を使った方法

function add_files() {
  wp_enqueue_script(
      'java',
      get_template_directory_uri().'/java.js',
      array(),
　　　date('YmdHis'),
      false
  );
}
add_action('wp_enqueue_scripts', 'add_files');

Y=年（4桁表記）
m=月（2桁表記）
d=日（2桁表記）
H=時間（24時間単位）
i=分
s=秒

「2021年11月10日14時20分50秒」の場合だと「?ver=20211110052050」（協定世界時）となります。

まとめ

今回はWordPressの場合のキャッシュを強制的に無効化する方法を紹介しました。
最近はWordPressを使ったWebサイト制作が主流になりつつあるので以前紹介した方法よりも需要があるかもしれませんね。

参考にしたサイト

「functions.phpでJSやCSSを一元管理する」
https://rfs.jp/sb/wordpress/wp-lab/wp_enqueue_script.html