WordPressのテーマ内でjavascriptファイルを読み込む方法

エリカ

2016.12.02

こんにちは、エリカです。

WordPress のテーマを開発する際に、javascript のファイルを読み込む方法について調べてみました。

WordPress テーマファイルの中で javascript ファイルを読み込む方法

利用する javascript ファイルの登録

利用する javascript ファイルを登録するには、wp_register_script 関数を使います。

wp_register_script( $handle, $src, $deps = array(), $ver = false, $in_footer = false )

$handle
ユニークな名称

$src
URL（絶対パスでも相対パスでも）

$deps
依存するファイル

$ver
バージョンナンバー

$in_footer
wp_head() と wp_footer() のどちらに配置するか

$handle、$deps、$ver、$in_footer についての紹介です。

$handle

ユニークな名称です。呼び出し時や、依存関係の解決時に指定します。
WordPress にあらかじめ組み込まれているものと重複しない名称にする必要があります。

予約されている名称

$deps

依存関係です。例えば、jQuery や、jQueryUI が必要になる javascript ファイルを登録する場合であれば、WordPress にあらかじめ組み込まれているものを利用するため、array( 'jquery-core', 'jquery-ui-core' ) と指定します。

ただし、WordPress にあらかじめ組み込まれているファイルは wp-includes フォルダ以下に配置されており、そのファイルを読み込むことになります。もし、wp-includes 以下のアクセス制限などをかけている場合は、問題になってしまいます。

wp_register_script で登録した javascript ファイルに依存する場合も同じように指定できますので、必要なファイルは独自に登録し、そちらに依存するようにした方がいいかもしれません。

$ver

バージョンを指定できます。ファイル読み込み時に、自動的にこのバージョンナンバーをファイル名の後ろに付加してくれます。これは、javascript ファイルがブラウザキャッシュされている場合に有効で、新しい内容を確実に反映させることができます。

$in_footer

wp_head()、wp_footer()のどちらで読み込ませるかを設定できます。初期値は false ですので、指定しない場合は wp_head() で読み込まれます。しかしこの場合は <head></head>内での読み込みになりますでの、ファイルの内容が読み込まれるまでは、レンダリングがブロックされてしまう場合があります。この値を true にした場合は、wp_footer() で読み込まれます。どういうスクリプトを実施するかによって、読み込む位置をコントロールするとよいでしょう。

登録したファイルの読み出し指定

ファイルを登録したら、それを読み込む指定を行います。
wp_enqueue_script 関数を使います。

wp_enqueue_script( '登録した名称' ) と記述することにより、指定した箇所（ wp_head() もしくは、wp_footer() ）で読み込まれます。依存関係を指定していれば、自動的に依存するファイルも読み込まれます。

ページによって利用する javascript を変更する

すべてのページで読み込むファイルと、詳細ページでだけ読み込むファイルがあった場合の記述例を紹介します。

add_action( 'init', function () {

    $version = wp_get_theme()->version; // Theme の version
    $in_footer = true; // wp_footer() で読み込むように

    wp_register_script( 'vendor', get_template_directory_uri() . '/js/vendor.js', array(), $version, $in_footer );
    wp_register_script( 'app', get_template_directory_uri() . '/js/app.js', array( 'vendor' ), $version, $in_footer ); // vendor.js に依存
    wp_register_script( 'common', get_template_directory_uri() . '/js/common.js', array( 'app' ), $version, $in_footer ); // app.js に依存
    wp_encueue_script( 'common' ); // すべてのページで読み込み

    if ( is_single() ) {
        wp_register_script( 'single', get_template_directory_uri() . '/js/single.js', array( 'app' ), $version, $in_footer );
        wp_enqueue_script( 'recruit' ); // 詳細ページでのみ読み込み
    }
    
} );