WordPressで外部ファイルのJavaScriptを読み込む方法

2024.05.24
WordPress

jQueryプラグインなどの外部ファイルをWordPressに読み込む手順の備忘録です。

通常のHTMLコードでは、<head>内や</body>タグの直前に<script>タグを書いてCSSやJavaScriptファイルを読み込みます。

WordPressもこの方法で外部ファイルを読み込むことはできますが、予期せぬエラーを防ぐためにwp_enqueue_script()を使用した方法が推奨されています。

JSファイルの読み込み

外部のJSファイルをwp_enqueue_script()を使用して読み込みます。

「functions.php」に下記のコードを記入します。

function add_my_scripts() {
  wp_enqueue_script('base-script', get_template_directory_uri() . '/js/base.js');
}
add_action('wp_enqueue_scripts', 'add_my_scripts');

上記は、テーマフォルダ内の「js」フォルダにある「base.js」ファイルを読み込む例です。

WordPress関数のadd_action()でアクションフックに「wp_enqueue_scripts」を設定して、CSSやJavaScriptの読み込みに最適なタイミングで「wp_enqueue_script()」を実行します。

<script type="text/javascript" src="https://tamatuf.net/wp-content/themes/js/base.js?ver=6.5.3" id="base-script-js"></script>

上記が、実際に表示されたコードです。<head>の中で「base.js」ファイルが読み込まれています。

パラメーターの設定

wp_enqueue_script()は、各パラメーターで読み込むファイルの順序などを設定できます。

wp_enqueue_script( $handle, $src, $deps, $ver, $args );

$handle: スクリプトのハンドル名を指定します。重複しないように固有の名称を設定します。
$src: 読み込むスクリプトのパスを指定します。URLやWordPressのルートディレクトリを基準とした、スクリプトの相対パスを設定します。
$deps: 依存スクリプトを指定します。例えば、先に読み込むスクリプトがあれば、そのスクリプトのハンドル名を記入します。依存関係が必要ない場合は、デフォルトの値「array()」を設定します。
$ver: スクリプトのバージョンを指定します。設定した値は、ファイル名の末尾にクエリパラメータとして追加されます。設定されていない場合は、現在インストールされているWordPressのバージョンと同じバージョン番号が自動的に追加されます。
$args: 連想配列でスクリプトの読み込み位置を指定します。「defer」または「async」属性と、「in_footer」の真偽を設定します。

$handleと$srcの記入だけでもファイルを読み込むことは可能ですが、プラグインを扱う場合などは細かい設定が必要になります。

読み込みの詳細設定

パラメーターを指定して、「base.js」ファイルの読み込みを細かく設定した例です。

function add_my_scripts() {
  wp_enqueue_script('base-script', get_template_directory_uri() . '/js/base.js', array(jquery), '1.0.0', array('strategy' => 'defer', 'in_footer' => true));
}
add_action('wp_enqueue_scripts', 'add_my_scripts');

'base-script'が任意のハンドル名です。

get_theme_file_uri() を利用して読み込むファイルのあるテーマディレクトリを設定しています。

array( 'jquery' )は、WordPressに同梱されているjQueryを先に読み込むための指定です。

'1.0.0'が、バージョンの指定です。キャッシュ対策としてファイルの更新日時など任意の値を指定します。

array('strategy' => 'defer', 'in_footer' => true)は、strategyに「defer」または「async」属性を、in_footerに「true」か「false」を指定することで読み込みのタイミングを設定しています。サンプルでは「defer属性」で</body>タグの前に読み込まれます。

複数ファイルの読み込み

複数のJSファイルを読み込みたい場合は、ハンドル名が重複しないように注意します。

function add_my_scripts() {
  wp_enqueue_script('base-script', get_template_directory_uri() . '/js/base.js');
  wp_enqueue_script('slider-script', get_template_directory_uri() . '/js/slider.js', array('base-script'));
}
add_action('wp_enqueue_scripts', 'add_my_scripts');

「slider-script」にarray('base-script')を設定することで、「base-script」の後に読み込まれます。

読み込むページを限定する

外部ファイルを特定のページだけで読み込みたい場合は、if文で個別に設定します。

function add_my_scripts() {
  if( is_front_page() ){
    wp_enqueue_script('base-script', get_template_directory_uri() . '/js/base.js');
  }
}
add_action('wp_enqueue_scripts', 'add_my_scripts');

if( is_front_page() ){ }で囲うことで、トップページのみ「base.js」が読み込まれます。