WordPressでCSSとJavaScriptを読み込む方法【推奨方法】

2021年7月5日2022年6月7日

WordPressでWebサイトを制作した後に、CSSやJavaScriptを用いてカスタマイズしていくとなった場合には、CSSファイルとJavaScriptファイルをそれぞれ用意してカスタマイズしていくのが保守性や拡張性が高いコーディングを行うことができます。

用意したCSSファイルとJavaScriptファイルを読み込む場合、header.phpのheadタグ内で読み込んだり、footer.phpのbody閉じタグの直前で読み込む方法が最も分かりやすい読み込み方法かと思いますが、WordPressではCSSファイルとJavaScriptファイルを読み込む方法が他にもいくつか存在します。

読み込む方法の中でも推奨されている方法があり、この記事ではその推奨されているWordPressでCSSファイルとJavaScriptファイルを読み込む方法を紹介していきます。

CSSの読み込み

CSSファイルの読み込みにはwp_enqueue_style関数を使用します。

<?php wp_enqueue_style($handle, $src, $deps, $ver, $media); ?>

wp_enqueue_style関数でCSSファイルを読み込む際に、引数(パラメータ)を指定します。

パラメータ

$handle

こちらは必須のパラメータでハンドル名を指定します。こちらは任意のハンドル名で構いません。

$src

CSSファイルを配置しているパス(URL)を指定します。

get_template_directory_uri関数を用いて、パスを指定することが推奨されています。

$deps

このCSSファイルより先に読み込みたいCSSファイルのハンドル名を配列で指定します。依存関係がない場合は、空の配列で構いません。

$ver

CSSファイルのバージョン番号を文字列で指定します。任意のパラメータです。

$media

スタイルシートのメディアを指定することができます。初期値は'all'で、他には'screen'、'handheld'、'print'などが指定できます。

JavaScriptの読み込み

JavaScriptファイルの読み込みにはwp_enqueue_script関数を使用します。

<?php wp_enqueue_script($handle, $src, $deps, $ver, $in_footer); ?>

wp_enqueue_script関数でJavaScriptファイルを読み込む際にも、wp_enqueue_style関数と同様に引数(パラメータ)を指定します。

パラメータ

$handle

こちらは必須のパラメータでハンドル名を指定します。こちらは任意のハンドル名で構いません。

$src

JavaScriptファイルを配置しているパス(URL)を指定します。

get_template_directory_uri関数を用いて、パスを指定することが推奨されています。

$deps

このJavaScriptファイルより先に読み込みたいJavaScriptファイルのハンドル名を配列で指定します。依存関係がない場合は、空の配列で構いません。

$ver

JavaScriptファイルのバージョン番号を文字列で指定します。任意のパラメータです。

$in_footer

初期値はfalseで該当のJavaScriptファイルがheadタグ内で読み込むようになっていますが、trueを指定することでbody閉じタグの直前で読み込まれるように設定することができます。

jQueryの読み込み

基本的には自身のJavaScriptを読み込むのと同じようにwp_enqueue_script関数を用いて読み込みます。

WordPressには初期状態でjQueryが組み込まれているので、パラメータにハンドル名'jquery'を指定するだけでjQueryを読み込むことができます。

<?php wp_enqueue_script('jquery'); ?>

また、WordPressでjQueryを使用する際に、$をそのまま使うことができません。

これは他のライブラリとのコンフリクトを避けるために$をそのままでは使えないようにWordPress側でしています。

そのため、通常通り$を使用したい場合には下記のコーディングをする必要があります。

jQuery(function($) {
  // 処理($使用可能)
});

このようにすることで、該当のスコープ内で$を使用することができるようになります。

functions.phpでCSSとJavaScriptを読み込む

それでは上記で説明した方法をより実践的に解説していきます。

wp_enqueue_style関数やwp_enqueue_script関数はfunctions.phpで使い、CSSファイルとJavaScriptファイルの読み込みを行います。

<?php

/**
 * CSS/JavaScriptの読み込み
 */
add_action('wp_enqueue_scripts', 'include_files');
function include_files() {
  // CSSファイルの読み込み
  wp_enqueue_style('my-style', get_template_directory_uri() . '/css/stylesheet.css', array());
  // jQueryの読み込み
  wp_enqueue_script('jqeury');
  // JavaScriptファイルの読み込み
  wp_enqueue_script('my-script', get_template_directory_uri() . '/js/script.js', array('jquery'), '1.0.0', true);
}

CSS、jQuery、JavaScriptの読み込みをまとめて、行う独自関数include_filesを定義しています。

このinclude_files関数をwp_enqueue_scriptアクションフックにadd_action関数で登録します。