WordPress でスクリプトファイルを読み込む wp_enqueue_script 関数
コンテンツ
wp_enqueue_script 関数
wp_enqueue_script 関数は、スクリプトファイルを重複せずに、依存関係を考慮して読み込む関数です。
wp_enqueue_script 関数の使い方
<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>
$handle
読み込むスクリプトの任意の文字列によるハンドル名。初期値：なし。
$src
読み込むスクリプトの URL。
例：http://example.com/wp-content/themes/my-theme/my-theme-script.js。
または、plugins_url を使用し ファイルの場所を指定する。
例：plugins_url('src/block_slider.js', FILE)
初期値： false
$deps
読み込むスクリプトが依存するスクリプトのハンドル名の配列、つまり、このスクリプトより前に読み込まれる必要があるスクリプトを指定。このパラメータは、$handle
のスクリプトが wp_register_script()
を使って登録されていない場合のみに必要。デフォルトのハンドルはすべて小文字。初期値： array()
例：array( 'wp-blocks', 'wp-element' )
$ver
クエリストリングとしてファイルパスの最後に連結される、スクリプトのバージョン番号を指定する文字列 (存在する場合) 。
初期値： false
$in_footer
スクリプトは通常 HTML ドキュメントの <head>に置かれるが、もしこのパラメータが true の場合 </body>終了タグの前に配置される。テーマ内の適切な位置に wp_footer()
テンプレートタグが含まれていることが必須。
初期値： falsewp_enqueue_script 関数でスクリプトが読み込まない
上記のパラメタが指定してある場合でも、wp_enqueue_script 関数でスクリプトが読み込まれない現象があります。
ハンドル名が一意ではない
すでにWordPressで予約されているハンドル名を指定している場合、重複するため読み込まれません。
WordPress に含まれ登録されているデフォルトスクリプト
Gutenbergのブロック定義 js が読み込まない場合
Gutenbergのブロック定義をした js を読み込む際も、wp_enqueue_script 関数を用います。
Gutenbergブロックサンプル
( function(block, element){
var el = element.createElement;
blocks.registerBlockType('pluginname/blockname',
{
title: 'Block Test',
category: 'layoyt',
edit: function() {
}
save: function() {
}
}
}(
window.wp.blocks,
window.wp.element,
) );
ブロックを登録する関数 registerBlockType
ブロックを登録する関数 registerBlockTypeは、
registerBlockType('my-plugin/my-block', {} );
上記の プラグイン名/ブロック名 部分は、小文字の英数字とハイフンのみが許可されています。
ブロック名に小文字英数字、ハイフン以外の文字が使用されている場合にエラー発生
registerBlockTypeで指定したブロック名に小文字英数字、ハイフン以外の文字が使用されている場合にエラーが発生し、wp-_enqueue_scriptが機能していない状況になります。
エラー
registerBlockType('my-plugin/my_block', {} );
上記引数の 「’my-plugin/my_block’」 の部分で、小文字英数字、ハイフン以外の文字が入っている場合に、エラーが発生しスクリプトファイルが読み込まれない現象が発生します。
下記修正コード
registerBlockType('my-plugin/my-block', {} );
上記修正で読み込まれるようになります。
