WordPressのwp_enqueue_styleとwp_enqueue_scriptの使い方の基本

wp_enqueue_styleとwp_enqueue_script

WordPressでCSSやJavaScriptのコードをページ内に追加する際はwp_enqueue_styleやwp_enqueue_scriptを使用する。
(これらはfunctions.phpに記載する)

header.phpやfooter.phpに直接記述しているWebサイトを見かけることがあるが、間違った運用方法なので必ずwp_enqueue_styleやwp_enqueue_scriptでCSSやJavaScriptを読み込むようにしよう。

wp_enqueue_styleについて

wp_enqueue_styleはCSSファイルを読み込む際に使用する。

function enqueue_scripts() {
  wp_enqueue_style('sample0', get_stylesheet_uri(), array(), '2020.8.12');
}
add_action('wp_enqueue_scripts', 'enqueue_scripts');

HTML内には下記のように出力される。

<link rel='stylesheet' id='sample0-css'  href='http://sample-site.local/wp-content/themes/077/style.css?ver=2020.8.12' type='text/css' media='all' />

wp_enqueue_scriptについて

wp_enqueue_scriptはJavaScriptファイルを読み込む際に使用する。

function enqueue_scripts() {
  wp_enqueue_script('sample1', get_template_directory_uri() . '/js/foo.js', array(), '2020.8.12');
}
add_action('wp_enqueue_scripts', 'enqueue_scripts');

HTML内にはheadタグに下記のように出力される。

<script type='text/javascript' src='http://sample-site.local/wp-content/themes/077/js/foo.js?ver=2020.8.12'></script>

headタグではなくbodyの閉じタグ付近(wp_footer();)に追記したい場合は第5引数を「true」にする。

function enqueue_scripts() {
  wp_enqueue_script('sample1', get_template_directory_uri() . '/js/foo.js', array(), '2020.8.12', true);
}
add_action('wp_enqueue_scripts', 'enqueue_scripts');

バージョンは必ず指定する

バージョンを指定しないとWordPressのバージョンが自動的に入ってfoo.js?ver=5.4.2のようになってしまう。

これだとファイルを更新してもCSSやJavaScriptをキャッシュを読み込んでしまうため、必ずバージョンを指定して更新したら変更しておこう。

バージョンはファイルの更新日にして変数で一斉に変更すれば更新漏れを防ぎやすい。

JavaScriptのasyncとdeferに対応する

wp_enqueue_scriptにはJavaScriptのasyncやdeferを追加するオプションはないため、add_filterのclean_urlでjsファイルの語尾に#async or #deferが付いている場合は属性を追加すると管理しやすい。

function add_async_defer_script($url) {
  if (strpos($url, '#async'))
    return str_replace('#async', '', $url)."' async='async";
  else if (strpos($url, '#defer'))
    return str_replace('#defer', '', $url)."' defer='defer";
  else
    return $url;
}
add_filter('clean_url', 'add_async_defer_script', 11, 1);

function enqueue_scripts() {
  $version = '2020.8.12';
  wp_enqueue_style('sample0', get_stylesheet_uri(), array(), $version);
  wp_enqueue_script('sample1', get_template_directory_uri() . '/js/foo.js', array(), $version, true);
  wp_enqueue_script('sample2', get_template_directory_uri() . '/js/bar.js#async', array(), $version);
  wp_enqueue_script('sample3', get_template_directory_uri() . '/js/baz.js#defer', array(), $version);
}
add_action('wp_enqueue_scripts', 'enqueue_scripts');