最近、Wordpressのカスタマイズの一環として、いくつかの自作jsファイルを読み込んでいる@web_shufuです。そろそろ、wp_enqueue_script関数を使ってスマートに読み込んでみることにしました。

これまでのリンク

これまで、カスタマイズのために外部サイトを参考に、いくつかの.jsファイルを造りました。

• 【所要時間5分】ページ内リンクにスムーススクロールを適用｜Web Shufu

• 【所要時間10分】ページトップへのスムーススクロールボタンをjQueryプラグイン「ScrollUp」で設置｜Web Shufu

• 【所要時間10分】ページトップへのスムーススクロールボタンをjQueryプラグイン「ScrollUp」で設置｜Web Shufu

これらのカスタマイズを実現するために造った.jsファイルへは、footer.phpの</body>の直前に以下のコードを書き込んでリンクしていました。

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
<script type='text/javascript' src='https://webshufu.com/js/jquery.smoothScroll.js'></script>
<script type='text/javascript' src='https://webshufu.com/js/jquery.scrollUp.min.js'></script>
<script type='text/javascript' src='https://webshufu.com/js/jquery.menuSlideUpDown.js'></script>
<script type='text/javascript' src='https://webshufu.com/js/jquery.mobilemenuToggle.js'></script>

ですが、WordPressでこれをやるのはあまりスマートではありません。

wp_enqueue_script

WordPressで.jsファイルを読み込むには、wp_enqueue_script関数がスマートです。

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

• $handle‥読み込む.jsファイルの名前。ファイル名と同じ名前をつければいいです。ます。
• $src‥.jsファイルのURL。私はhttpから始まる絶対パスで記述します。
• $deps‥ その.jsファイルが依存している.jsファイルのハンドル名をarray(‘ハンドル名’)の形で書きます。デフォルトではarray()。
• $ver‥とりあえず’1.0’と指定しています。
• $in_footer‥trueと指定すればテーマ内のwp_footer()のある場所（普通は</body>の直前）で読み込まれます。falseと指定すればwp_header()のある場所で読み込まれます。

ハンドル名をつけるときは、Wordpressで設定されているデフォルトのハンドル名とかぶらないようにしてください。

• wp_enqueue_script:WordPress私的マニュアル

wp_enqueue_script関数を使うことでjavascript同士のコンフリクトを防ぎ、読み込みの順番も最適化されます。

多少なりとも高速化に貢献するのではないでしょうか。

function.phpへの書き込み

自作jsファイルへ読み込み設定を、function.phpで行うと以下のようになります。

function my_scripts_method() {
    wp_enqueue_script('ajaxgoogleapiscom', 'https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js', array(), '1.0', true);
    wp_enqueue_script('smoothscroll', 'https://webshufu.com/js/jquery.smoothScroll.js', array('ajaxgoogleapiscom'), '1.0', true);
    wp_enqueue_script('scrollup', 'https://webshufu.com/js/jquery.scrollUp.min.js', array('ajaxgoogleapiscom'), '1.0', true);
    wp_enqueue_script('menuslideupdown', 'https://webshufu.com/js/jquery.menuSlideUpDown.js', array('ajaxgoogleapiscom'), '1.0', true);
    wp_enqueue_script('mobilemenutoggle', 'https://webshufu.com/js/jquery.mobilemenuToggle.js', array('ajaxgoogleapiscom'), '1.0', true);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

ファイルを読み込みたい部分だけ……の部分を書き足せばいいので簡単です。

function my_scripts_method() {
    wp_enqueue_script(……);
    ……
    ……
    ……
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );