【WordPress】子テーマのフォルダに保存したJSファイルを読み込む方法|wp_enqueue_scriptの使い方を実例で解説(JavaScript)

wordpress-prograshi(プロぐらし)-kv WordPress
記事内に広告が含まれていることがあります。

WordPressでサイトを作成しているときに、オリジナルで作成したJavaScriptファイル(JSファイル .js)を使用したい場合があります。

そんなときに、WordPressのディレクトリ内にJSファイルを格納し、そのファイルを読み込む方法についてまとめています。

ここでは、style.css以外のCSSファイルを読み込ませる方法についてまとめています。


追加ファイルを読み込ませる際の注意点

実際にディレクトリに追加したCSSやJSなどのファイルを読み込ませる前に、次の点に注意してください。

追加するファイルは基本的に子テーマの中に配置してください

親テーマの中に配置すると、テーマ更新のタイミングでディレクトリが丸ごと置き換わり、保存したはずのファイルがなくなるリスクがあります。


追加したJSファイルを読み込む方法

追加したJSファイルを読み込ませる方法は簡単です。


子テーマのディレクトリの中にファイルを保存する

まずは、WordPressのディレクトリの中にある子テーマのディレクトリの中に読み込みたいJSファイルを保存します。

子テーマのディレクトリ直下に配置してもいいですし、新しいディレクトリを作ってその中に保存してもOKです。

子テーマのディレクトリの場所は「wp-content > themes」です。


ここでは参考として、ディレクトリを作り階層を少し深くした場所にJSファイルを設置します。

「themes > 子テーマのディレクトリ > common > js」というディレクトリの中に「common_reservation.js」というファイルを設置します。


ファイルを読み込む

テーマのディレクトリの中に追加したJSファイルを読み込むには、functions.phpに以下の記述をします。

function child_enqueue_js() {
	wp_enqueue_script( 'common_res_js', get_stylesheet_directory_uri() . '/common/js/common_reservation.js');
}

add_action( 'wp_enqueue_scripts', 'child_enqueue_js' );


あとは変更を保存すれば完了です。

以下で上記コードで何をしているのかを解説していきます。


コードの意味(解説)

コード実例

function child_enqueue_js() {
	wp_enqueue_script( 'common_res_js', get_stylesheet_directory_uri() . '/common/js/common_reservation.js');
}

add_action( 'wp_enqueue_scripts', 'child_enqueue_js' );


JSファイルの読み込みに使用した上記のコード上でざっくり解説すると次のようになります。

function 関数名() {
	wp_enqueue_script( 'バンドル名', get_stylesheet_directory_uri() . '子テーマディレクトリ以下のファイルパス');
}
add_action( 'wp_enqueue_scripts', '関数名');


重要なのは次の3つです。

重要なコード
  1. wp_enqueue_script関数
  2. get_stylesheet_directory_uri関数
  3. add_action関数



wp_enqueue_script関数

wp_enqueue_scriptはWordPressでJSファイルをキューに追加する関数です。

なお、キューに追加するのみで、実際に適用するのはadd_action関数になります。


基本構文

基本構文は次のようになっています。

wp_enqueue_script( string  $handle , string  $src  =  ” , string[]  $deps  =  array() , string|bool|null  $ver  =  false , array|bool  $args  =  array()  )


型とデフォルト値を省くと以下の5つの引数で構成されています。

wp_enqueue_style( $handle , $src, $deps, $ver, $args )


引数意味省略可デフォルト値
$handle文字列ハンドル名
ここで付けた名前でこのスタイルシートを呼び出せる。
WEBページではid名になる。id="ハンドル名-css"
$src文字列ディレクトリパス。
絶対パスか、ルートディレクトリに対する相対パス
$deps配列他のスタイルシートと依存関係をもたせる。
依存関係のあるスタイルシートのハンドル名を指定する
array('バンドル名')

何も指定しない場合は''args()とする
args()
$ver真偽値または文字列バージョン名を指定する。キャッシュ無効化のためにURLに追加される。
・falseの場合、現在インストールされているWordPressのバージョンと同じバージョン番号を追加する。
・nullの場合何も追加しない
false
$args文字列配列で指定する。array()
①スクリプトを遅延「defer」や非同期「async」で読み込むときに指定する。
②フッターに表示する場合は「in_footer」をtrueにする
false


$handle

例えば、下記のようにハンドル名が「common_js」だとします。

function child_enqueue_js() {
	wp_enqueue_script( 'common_js', get_stylesheet_directory_uri() . '/common/js/common_reservation.js');
}

add_action( 'wp_enqueue_scripts', 'child_enqueue_js' );


こうすると、呼び出したときのHTMLタグのid名が「common_js-js」となります。


$src

$srcはスタイルシートのパスを指定する引数です。URLの絶対パスか、WordPressのテーマディレクトリからの相対パスで指定します。

上記例ではget_stylesheet_directory_uri関数を用いて絶対パスで指定しています。

get_stylesheet_directory_uri() . '/common/js/common_reservation.js'


$deps

他のスタイルシートと依存関係をもたせるために使用する引数です。依存関係のあるJSファイルのハンドル名を指定します。※指定は配列array()で行います。

省略可能です。上記例では省略しています。※存在しないハンドル名を指定すると指定したJSファイルは読み込まれません。

例えば、wp_enqueue_scriptでハンドル名が「main-functions」というものを既に登録してあり、このJSを引き継いでJSファイルを指定する場合はarray関数を使って記述しますarray('main-functions'

function child_enqueue_js() {
	wp_enqueue_script( 'main-js', get_stylesheet_directory_uri() . '/common/js/main_reservation.js');
	wp_enqueue_script( 'common-js', get_stylesheet_directory_uri() . '/common/js/common_reservation.js', array('main-js'));
}

add_action( 'wp_enqueue_scripts', 'child_enqueue_js' );



$ver

バージョン名を指定するための引数です。ブラウザのキャッシュにより変更を加えたJSが適用されない事態を防ぐために、URLにパラメータとして指定したバージョン名を指定します。

デフォルトはfalseで、現在インストールされているWordPressのバージョンと同じバージョン番号を追加します。

指定しない場合はnullを指定します。


省略(false)の場合

wp_enqueue_script( 'common_js', get_stylesheet_directory_uri() . '/common/js/common_reservation.js');

省略しているためfalse扱いになり、現在のWordPressのバージョンが適用されます。

?ver=6.5.2


バージョンを指定した場合

バージョンを任意の文字列で指定すると、その文字列がURLにパラメータとして?ver=文字列として追加されます。

wp_enqueue_script( 'common_js', get_stylesheet_directory_uri() . '/common/js/common_reservation.js', array(), 'ver1.0.0');



$args

5つ目の引数は$argsです。ここではこのJavaScriptをどう適用するかの指定を行います。指定は配列array()で行います。デフォルトはfalseです。

指定可能な内容
  1. 遅延:'strategy' => 'defer'
  2. 非同期:'strategy' => 'defer'
  3. フッターに表示:'in_footer' => true

省略した場合は何も指定しない状態です。

例えば「遅延」かつ「フッターに表示」を指定する場合は以下のように記述します。

function child_enqueue_js() {
	wp_enqueue_script( 'common-js', get_stylesheet_directory_uri() . '/common/js/common_reservation.js', array(), 'V1.0.0', 
		array(
			'strategy'  => 'defer',
			'in_footer' => true,
		));
}

add_action( 'wp_enqueue_scripts', 'child_enqueue_js' );


(参考)WordPress公式: wp_enqueue_scripts


get_stylesheet_directory_uri関数

wp_enqueue_styleで絶対パスを使用するために指定したのがget_stylesheet_directory_uri関数です。

これは現在使用しているテーマのルートディレクトリのURIを取得する関数です。

親テーマをそのまま使用している場合は親テーマのディレクトリURIを返します。子テーマを使用している場合は子テーマのURIを返します。

追加でオリジナルのJSファイルを設置する場合は基本的に子テーマに配置するので、get_stylesheet_directory_uri関数を使います。

注意点
  1. 取得したURIに末尾のスラッシュは含みません。
  2. 子テーマ使用中に親テーマのURIを取得したい場合はget_template_directory_uri()を使います。
  3. 関数名に「stylesheet」と入っていますが、テーマのURIを取得するもので、スタイルシートを取得するわけではありません。


実例としては、get_stylesheet_directory_uri()を記述すると「https://prograshi.com/wp-content/themes/cocoon-my-child」を取得します。


今回は子テーマに置いたCSSファイルを取得したいため、以下のように使用しています。

get_stylesheet_directory_uri() . '/common/css/common_reservation.js'

wp_enqueue_style( 'common-stylesheet', get_stylesheet_directory_uri() . '/common/css/common_reservation.js');


こうすることで、「https://prograshi.com/wp-content/themes/cocoon-my-child/common/css/common_reservation.js」を指定することができます。


(参考)WordPress: get_stylesheet_directory_uri()



add_action関数

wp_enqueue_scriptは指定したスタイルシートをキューに追加するのみで実際にWEBサイトに適用するわけではありません。

WEBサイトに適用するのがadd_action関数です。


基本構文

add_actionの基本構文は以下のようになっています。

add_action( string $hook_name, callable $callback, int $priority = 10, int $accepted_args = 1 ): true

型とデフォルト値を省略すると以下になります。

add_action( $hook_name, $callback, $priority, $accepted_args)


引数意味省略可デフォルト値
$hook_name文字列フック名
指定したコールバック関数を追加するアクションを指定します。
$callback関数コールバック関数
アクションが呼び出されたときに実行するコールバック関数です。
$priority整数優先度
指定したコールバック関数の優先順位を指定します。デフォルトは10で、数値が小さいほど優先度が高いです。
同じ優先度の場合は先に読み込んだ方を先にキューに追加します。
10
$accepted_args整数関数が受け入れる引数の数です。1


$hook_name

$hook_nameは指定したコールバック関数をどこに追加するかを指定するものです。WordPressには挿入箇所として複数のフックが用意されており、該当するフック名を指定します。

スタイルシートを追加する場合はフック名をwp_enqueue_scriptsにします。なお、スタイルシートだけでなくJavaScriptファイルも対象となります。

add_action( 'wp_enqueue_scripts', コールバック関数);


$callback

第2引数で指定したバンドルに追加するコールバック関数を指定します。

直接関数を記述してもいいですし、functionで関数を作成して関数名を指定するのでもどちらでも機能します。

function child_enqueue_common_style() {
	wp_enqueue_style( 'common-stylesheet', get_stylesheet_directory_uri() . '/common/css/common_reservation.css');
}
add_action( 'wp_enqueue_scripts', 'child_enqueue_common_style');

↑↓ 同じ

add_action( 'wp_enqueue_scripts', wp_enqueue_style( 
	'common-stylesheet',
	get_stylesheet_directory_uri() . '/common/css/common_reservation.css')
);


$priority

$priorityは関数を実行する優先度を決める引数です。

省略時のデフォルトは10です。数値が小さいほど実行される順序が速くなります。もし、priorityが同じ値の場合は先に読み込まれた方が先に実行されます。


priorityを15にする場合は以下のように記述します。

add_action( 'wp_enqueue_scripts', 'child_enqueue_styles', 15 );


$accepted_args

$accepted_argsは関数が受け付ける引数の数です。デフォルトは1です。



実例

function child_enqueue_js() {
	wp_enqueue_script( 'common_js', get_stylesheet_directory_uri() . '/common/js/common_reservation.js');
}

add_action( 'wp_enqueue_scripts', 'child_enqueue_js', 15 );


この場合、「wp_enqueue_scripts」というアクションフックで「child_enqueue_js」という関数を実行する指示です。

プライオリティは15です。


(参考)WordPress: add_action



CSSファイルとJSファイルを同時に読み込む

add_action( 'wp_enqueue_scripts', コールバック関数);


add_action関数とwp_enqueue_scriptsフックを使って、CSSファイルとJSファイルを同時に読み込ませることもできます。

そのためには、指定したコールバック関数の中でwp_enqueue_styleを使ってCSSファイルをキューに追加し、wp_enqueue_scriptを使ってJSファイルをキューに追加します。

例えば以下のように記述します。

function child_enqueue_styles() {

	wp_enqueue_style( 'style-css', get_stylesheet_directory_uri() . '/style.css', array('astra-theme-css'), CHILD_THEME_VERSION1.0, 'all' );
	wp_enqueue_style( 'theme-css1', get_stylesheet_directory_uri() . '/common/css/common_reservation.css', array('astra-theme-css'), 'VERSION=1.0');
	wp_enqueue_script( 'common-js', get_stylesheet_directory_uri() . '/common/js/common_reservation.js', array() );
	wp_enqueue_script( 'jquery.3.3.1', get_stylesheet_directory_uri() . '/common/js/jquery.3.3.1.min.js', array() );
	
}

add_action( 'wp_enqueue_scripts', 'child_enqueue_styles', 15 );



add_actionとfunctionは同不順(入れ替え可能)

ここで紹介している記述はfunctionで先にコールバック関数を作成し、それをadd_action関数の中で呼び出しています。

function child_enqueue_styles() {

	wp_enqueue_style( 'style-css', get_stylesheet_directory_uri() . '/style.css', array('astra-theme-css'), CHILD_THEME_VERSION1.0, 'all' );
	wp_enqueue_style( 'theme-css1', get_stylesheet_directory_uri() . '/common/css/common_reservation.css', array('astra-theme-css'), 'VERSION=1.0');
	wp_enqueue_script( 'common-js', get_stylesheet_directory_uri() . '/common/js/common_reservation.js', array() );
	wp_enqueue_script( 'jquery.3.3.1', get_stylesheet_directory_uri() . '/common/js/jquery.3.3.1.min.js', array() );
	
}

add_action( 'wp_enqueue_scripts', 'child_enqueue_styles', 15 );


add_actionとfunctionの順番は入れ替え可能で、add_actionを上にもってきても問題なく機能します。


add_action( 'wp_enqueue_scripts', 'child_enqueue_styles', 15 );
function child_enqueue_styles() {

	wp_enqueue_style( 'style-css', get_stylesheet_directory_uri() . '/style.css', array('astra-theme-css'), CHILD_THEME_VERSION1.0, 'all' );
	wp_enqueue_style( 'theme-css1', get_stylesheet_directory_uri() . '/common/css/common_reservation.css', array('astra-theme-css'), 'VERSION=1.0');
	wp_enqueue_script( 'common-js', get_stylesheet_directory_uri() . '/common/js/common_reservation.js', array() );
	wp_enqueue_script( 'jquery.3.3.1', get_stylesheet_directory_uri() . '/common/js/jquery.3.3.1.min.js', array() );
	
}

タイトルとURLをコピーしました