WordPressでショートコード内のJSをフッターで読み込む方法

WordPressでショートコード内のJSをフッターで読み込む方法



(タイトルの書き方が難しい)

要は、これまではjQueryの読み込みをヘッダーにしといたので、ショートコード内にスクリプトを直書きして出力していても問題無かったのだけれど、WordPressの高速化のためにjQueryなどのライブラリをフッターに読み込ませると、

function js_shortcode_insert() {
	echo '<script>jQuery(document).ready(function ($) {...} );</script>';
}
add_shortcode( 'js_insert', 'js_shortcode_insert' );

のようなJSを直書きしているショートコードの場合、そのコードが読み込まれた時点ではまだjQueryライブラリは読み込まれていないので、エラーが発生します。

そこで、このような場合は「wp_add_inline_script」を使って、

function js_shortcode_insert() {
	$script = 'jQuery(document).ready(function ($) {...} );'; // ここにJSコード(<script>タグは不要)
	wp_add_inline_script( 'jquery-core', $script, 'after' );
}
add_shortcode( 'js_insert', 'js_shortcode_insert' );

のように記述します。

wp_add_inline_scriptの第一引数で、JSライブラリのハンドル名を指定します。ここでは、jQueryに依存するJSなのでjquery-coreを指定して、第二引数で読み込むJS、第三引数で読み込んでいるハンドル名の後ろに追加するため「after(省略可)」を指定します。

今日はここまで
WordPressでショートコード内のJSをフッターで読み込む方法

WordPressでショートコード内のJSをフッターで読み込む方法


開発

(タイトルの書き方が難しい) 要は、これまではjQueryの読み込みをヘッダーにしといたので、ショートコード内にスクリプトを直書きして出力していても問題無かったのだけれど、WordPressの高速化のためにjQueryな…


関連する記事



こちらはいかが?


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*(必須)

*(必須・表示されません)