独自のjavascriptを追加

篠原 隆司

アフィリエイト広告を利用しています

このページの内容が役に立ったら X (旧twitter) でフォローして頂けると励みになります
挨拶や報告は無しで大丈夫です

cssだとテーマディレクトリ直下に style.cs があって、自動的にWebサイト全体に適用されるようになってますね。

それと同じで、Webサイト全体に適用されるjavascriptファイルが欲しくなることありますよね。

ということで、もともとの目的は

「テーマディレクトリ直下に script.js を置く」

なんですが、副作用的に出来上がった「任意のjavascriptを追加する」みたいな感じになってます。

使い方

functions.php に追記 

// 管理画面以外なら
if ( ! is_admin() ) {

    // アクションをセット
    add_action('wp_enqueue_scripts', function(){

        // テーマディレクトリ直下に script.js を作成した場合
        aulta_wp_enqueue_scripts('script');
    });
}

javascriptを登録する関数

functions.php に追記

/**
 * javascriptを登録する
 *
 * @param string $handle テーマディレクトリ直下からファイルまでのパスで、拡張子を外したもの
 * @see https://aulta.co.jp/technical/wordpress/techniques/add-your-own-javascript
 */
function aulta_wp_enqueue_scripts ($handle, $deps = null){
    $url = get_stylesheet_directory_uri() . '/' . $handle . '.js';
    $version = filemtime(get_stylesheet_directory() . '/' . $handle . '.js');
    $in_footer = true;
    wp_enqueue_script( $handle, $url, $deps, $version, $in_footer );
}

※@see は本ページのURLです。忘れたときに参照できるよう残しておくと便利です。

補足説明

if ( ! is_admin() ) { }

if ( ! is_admin() ) で、管理画面以外ってしてます。
管理画面じゃないとき・・・つまりフロント側のページのときに追加したいからですね。

ちなみに似た関数で is front page() ってのがあります。
「フロントだからこっちじゃん！」って騙されがちになりがちですが全然意味が違うものなので注意です。

add_action('wp_enqueue_scripts', '' )

「wp_enqueue_scripts？・・・scripts？」ってなりそうですが、Codexでは scripts です。

関連リンク