JavaScriptを読み込む[wp_enqueue_script][wp_enqueue_scripts]

2016年6月27日

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に記述しない方法は後述します)。

 

定義したmy_scripts_method関数をwp_enqueue_scriptsアクションフックのタイミングで呼び出しています。

 

 

wp_enqueue_script関数のパラメータ


 

 

$handle

ユニークなハンドル名を記述します。WordPress側で既に用意されているハンドル名と被らないようにする必要があります。

 

WordPress に含まれ登録されているデフォルトスクリプト

 

$src

スクリプトのURLを記述します。例えばexample.jsを テーマ/js/ ディレクトリにアップロードした場合、下記のように記述します。

 

$deps

依存するスクリプトです。jQueryに依存したライブラリを読み込む時は下記のように記述します。

 

$ver

適当なバージョンを記述します。

 

$in_footer

スクリプトはデフォルトでは<head>内(wp_head関数)で読み込まれます。tureに指定するとHTMLの最後(wp_footer関数)で読み込まれます。

 

 

 


 

例えばjQueryに依存したcustom_script.jsスクリプトを読み込む場合は、functions.phpに下記のように記述します。前提として、テーマ/js/ ディレクトリ内にcustom_script.jsファイルがアップロードされているとします(ディレクトリ構造はこちら)。

 

functions.phpに追記

 

するとhead内に下記のようにリンクが貼られます。

 

custom-scriptというハンドル名を記述していますが、上述したようにWordPressで既に決められているハンドル名と被らないようにユニークにする必要があります。また仮に第5パラメータにtrueを指定すると、custom_script.jsはhead内(wp_head関数)ではなく、HTMLの終わりの方(wp_footer関数)で読み込まれます。

 

 

WordPressに既に用意されているデフォルトスクリプトであるならば、ハンドル名だけで読み込むことができます。

 

head内に下記のようにリンクが貼られます。

 

 

 

functions.phpに記述しない場合


 

下記のようにコードをwp_head関数の前に記述すると、custom_script.jsはhead内(wp_head関数)で読み込まれます。wp_footer関数の前(wp_header関数とwp_fotter関数の間)に記述するとHTMLの終わりの方(wp_fotter関数)で読み込まれます。

 

 

 

 

 

参照ページ


 

WordPress

Codex日本語版

関数リファレンス/wp enqueue script

 

 

 

LINEで送る
Pocket

Copyright © 2019 思考の葉 All Rights Reserved.  プライバシーポリシー