開発

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

作成日： 2018年12月19日

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

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

PHP

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

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

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

PHP

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' );

のように記述します。