WordPressで自前のJsファイルを読み込む方法

こんばんは。きわさです。

今回Wordpressで自前のjsファイルを使うために設定した方法を備忘録として残したいと思います。

jsファイルを読み込むといえば、htmlのヘッダに
<script type=’text/javascript’ src=’http://○○○/○○.js’></script>
と記載すればよいですが、ヘッダを編集して書き込むのではなく別に方法が用意されていました。

それは、wp_enqueue_script関数を使用する 方法です。

wp_enqueue_script関数
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer )

$handle: スクリプトのハンドルとして使われる名称
$src: スクリプトのURL
$deps: 依存するスクリプトのハンドル(省略可)
$ver: 指定するバージョン番号(省略可)
$in_footer: <head>タグではなく</body>の直前に記述するかどうか(省略可)

これをfunctions.phpに記述すればよいです。
子テーマを使用している場合の例はこのようになります。

1
2
3
4
5
6
<?php
function testFunc() {
    wp_enqueue_script( 'script-name', get_bloginfo('stylesheet_directory') . '/test.js' );
}
add_action( 'wp_enqueue_scripts', 'testFunc' );
?>

ちなみにこの get_bloginfo(‘stylesheet_directory’) は子テーマのパスです。

スポンサーリンク