WordPressでは、wp_enqueue_script関数を利用してJavaScriptファイルを読み込む必要があります。そのままURLを記述して読み込んでしまうと、プラグインを利用する際に他のスクリプトとコンフリクトを起こしてしまう恐れがあるからです。
スポンサーリンク
wp_enqueue_script関数を利用する前に、wp_head関数とwp_footer関数が指定の位置に記述されていることを確認して下さい（下記ページ参照）。
header/saidebar/footerに分割する[wp_head][wp_enqueue_style]
wp_enqueue_script関数は下記のようにfunctions.phpに記述することによって、JavaScriptファイルをhead内（wp_head関数）やHTMLの最後（wp_footer関数）に読み込むことができます（functions.phpに記述しない方法は後述します）。
|
1 2 3 4 |
function my_scripts_method() { wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); } add_action( 'wp_enqueue_scripts', 'my_scripts_method' ); |
定義したmy_scripts_method関数をwp_enqueue_scriptsアクションフックのタイミングで呼び出しています。
wp_enqueue_script関数のパラメータ
|
1 |
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ) |
$handle
ユニークなハンドル名を記述します。WordPress側で既に用意されているハンドル名と被らないようにする必要があります。
WordPress に含まれ登録されているデフォルトスクリプト
$src
スクリプトのURLを記述します。例えばexample.jsを テーマ/js/ ディレクトリにアップロードした場合、下記のように記述します。
|
1 |
get_template_directory_uri().'/js/example.js' |
$deps
依存するスクリプトです。jQueryに依存したライブラリを読み込む時は下記のように記述します。
|
1 |
array( 'jquery' ) |
$ver
適当なバージョンを記述します。
$in_footer
スクリプトはデフォルトでは<head>内（wp_head関数）で読み込まれます。tureに指定するとHTMLの最後（wp_footer関数）で読み込まれます。
例
例えばjQueryに依存したcustom_script.jsスクリプトを読み込む場合は、functions.phpに下記のように記述します。前提として、テーマ/js/ ディレクトリ内にcustom_script.jsファイルがアップロードされているとします（ディレクトリ構造はこちら）。
functions.phpに追記
|
1 2 3 4 5 6 7 8 9 |
function my_scripts_method() { wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri().'/js/custom_script.js', array( 'jquery' ), '1.0' ); } add_action( 'wp_enqueue_scripts', 'my_scripts_method' ); |
するとhead内に下記のようにリンクが貼られます。
|
1 2 3 |
<script type='text/javascript' src='http://〇〇〇/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script> <script type='text/javascript' src='http://〇〇〇/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script> <script type='text/javascript' src='http://〇〇〇/wp-content/themes/sample/js/custom_script.js?ver=1.0'></script> |
custom-scriptというハンドル名を記述していますが、上述したようにWordPressで既に決められているハンドル名と被らないようにユニークにする必要があります。また仮に第5パラメータにtrueを指定すると、custom_script.jsはhead内（wp_head関数）ではなく、HTMLの終わりの方（wp_footer関数）で読み込まれます。
WordPressに既に用意されているデフォルトスクリプトであるならば、ハンドル名だけで読み込むことができます。
|
1 2 3 4 |
function my_scripts_method() { wp_enqueue_script('jquery'); } add_action( 'wp_enqueue_scripts', 'my_scripts_method' ); |
head内に下記のようにリンクが貼られます。
|
1 2 |
<script type='text/javascript' src='http://〇〇〇/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script> <script type='text/javascript' src='http://〇〇〇/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script> |
functions.phpに記述しない場合
下記のようにコードをwp_head関数の前に記述すると、custom_script.jsはhead内（wp_head関数）で読み込まれます。wp_footer関数の前（wp_header関数とwp_fotter関数の間）に記述するとHTMLの終わりの方（wp_fotter関数）で読み込まれます。
|
1 2 3 |
<?php wp_enqueue_script('custom-script', get_template_directory_uri(). '/js/custom_script.js', array('jquery'), '1.0'); ?> <?php wp_head(); ?> </head> |
参照ページ
WordPress
Codex日本語版
