WordPressのアセット読み込み（キャッシュ対策）

メタデータ

公開日：2021/08/14
更新日：2021/08/03
カテゴリ：コード
タグ：PHP, WordPress

リアクション

　いっつも忘れるので改めてメモ。

JS & CSS

　JSもCSSもwp_enqueue_xxxを使う。

<?php
	// JS
	wp_enqueue_script( '名前', 'パス', '先に読み込むJS', 'バージョン', 'footerで読み込むか' );
	wp_enqueue_script('myscript', get_theme_file_uri('/assets/js/script.min.js'), array('jquery','vendor'), filemtime(get_stylesheet_directory() . '/assets/js/script.min.js'), true);

	// CSS
	wp_enqueue_style( '名前', 'パス', '先に読み込むCSS', 'バージョン', 'メディアクエリ' );
	wp_enqueue_style('mystyle', get_theme_file_uri('/assets/css/style.min.css'), array(), filemtime(get_stylesheet_directory() . '/assets/css/style.min.css'));

	// HTML
	// <script type="text/javascript" src="https://ドメイン/テーマパス/assets/js/script.min.js?ver=1627951083" id="myscript-js"></script>
	// <link rel="stylesheet" id="mystyle-css" href="https://ドメイン/テーマパス/assets/css/style.min.css?ver=1627865684" type="text/css" media="all">
?>

<?php

// JS

wp_enqueue_script( '名前', 'パス', '先に読み込むJS', 'バージョン', 'footerで読み込むか' );

wp_enqueue_script('myscript', get_theme_file_uri('/assets/js/script.min.js'), array('jquery','vendor'), filemtime(get_stylesheet_directory() . '/assets/js/script.min.js'), true);

// CSS

wp_enqueue_style( '名前', 'パス', '先に読み込むCSS', 'バージョン', 'メディアクエリ' );

wp_enqueue_style('mystyle', get_theme_file_uri('/assets/css/style.min.css'), array(), filemtime(get_stylesheet_directory() . '/assets/css/style.min.css'));

// HTML

// <script type="text/javascript" src="https://ドメイン/テーマパス/assets/js/script.min.js?ver=1627951083" id="myscript-js"></script>

// <link rel="stylesheet" id="mystyle-css" href="https://ドメイン/テーマパス/assets/css/style.min.css?ver=1627865684" type="text/css" media="all">

名前

　読み込まれる際のidに使われる。
　wp_enqueue_scriptの第一引数を’myscript’にすると’myscript-js’、wp_enqueue_styleで’mystyle’にすると’mystyle-css’というように、それぞれ-js、-cssが付与されたidがつく。

パス

　get_theme_file_uri()やget_template_directory_uri()を使ってドメイン込みの絶対パスを呼び出すのが一般的。

先に読み込むファイル

　依存関係にあり、先に読み込んでおく必要があるファイルの名前を指定します。配列を入れるため、ない場合は空の配列を指定。

バージョン

　それぞれ、第四引数で指定したものが’?ver=1.0.0’など、パラメータでバージョン管理される。指定しないとWPのバージョンになるので指定しないよりは指定した方がいい。

　ただ、個人的にはfilemtime()を使って動的な数値を指定している。
　WPではキャッシュが高速化の鍵となるため、JSやCSSはキャッシュを指定したいが、いちいちキャッシュを手動で消すのは面倒で仕方ない。
　そこで登場するのがPHP関数のfilemtime()。これはファイルの更新時のタイムスタンプを返す関数なので、これをバージョンに指定しておくとファイルを更新したときのみパラメータの数値が変わるため別のファイルとして認識され、キャッシュが消える。
　その際、ファイルの指定にはドキュメントルートからのルートパスを返すget_stylesheet_directory()を使う。

footer読み込み

　wp_enqueue_scriptの第五引数。
　trueだとwp_footer()で出力され、falseだとwp_head()で出力される。

メディアクエリ

　wp_enqueue_styleの第五引数。
　デフォルトは’all’。その他、’print’、’screen’などW3Cで用意されているメディアクエリを指定可能。

functions.php

function add_assets() {
	// ここでwp_enqueue
}
add_action('wp_enqueue_scripts', 'add_assets');

function add_assets() {

// ここでwp_enqueue

}

add_action('wp_enqueue_scripts', 'add_assets');

　アクションフックはwp_enqueue_scripts。