今回は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
岐阜県内でホームページ制作依頼をご検討中の方
まずはお気軽にお問い合わせください。
お電話、ご相談、お見積り無料です！
※フォーム送信後2～3日が経過しても連絡が無い場合は、お手数ですが再度送信してください。