カテゴリー
WordPress運営日誌»WP関連古記事»

wp_enqueue_script関数‥jsファイル読み込み用

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

これまでのリンク

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

これらのカスタマイズを実現するために造った.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関数を使うことで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' );


「wp_enqueue_script関数‥jsファイル読み込み用」への1件の返信

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です