まあこんなことで何で？と悩む人は稀有だとは思いますが、気づいたので一応メモ代わりに公開しておきます。
これに気づいたのは、jQueryやCSSをショートコードのコールバック関数内で適用させようとした時のことでした。
CSSは問題なかったので、jQueryの方の該当するコード部分を以下に示します。
function hogehoge( $atts ){
$atts = shortcode_atts( array(
'id' => '',
), $atts );
$id = atts['id'];
$script = '
ここに$id変数を絡めたスクリプトを記述
';
add_action( 'wp_enqueue_scripts', function() use ($script) {
wp_add_inline_script(
'目的のハンドル名',
$script
);
});
．．．．
}
add_shortcode('hoge-sc','hogehoge');wp_add_inline_script()という関数を使用して、wp_enqueue_scripts()で$scriptの内容を出力するためのものを、ショートコード用のコールバック関数へ挿入するものです。
汎用に行うものであれば、別でスクリプトを読み込ませてということが常套手段ではあるものの、今回作ったものは、「id」というショートコードパラメーターの値ごとにスクリプトの内容やスタイルの内容を出力する必要があるケースだったのでこのように書きました。
これでスタイルもスクリプトも問題なく読み込まれていたのですが、問題が起こったのは、WordPressのjQueryを利用しようとした時でした。
通常、WordPressのjQueryを使って、wp_add_inline_script()でスクリプトを読み込ませるための目標となるスクリプトは以下のように書きます。
function hogehoge_script_include() {
wp_enqueue_script(
'スクリプトハンドル',
JSファイルの場所,
array('jquery'),
null,
array(
'strategy' => 'defer',
'in_footer' => true, // Note: This is the default value.
)
);
}
add_action( 'wp_enqueue_scripts', 'hogehoge_script_include');第三引数で「array(‘jquery’)」と指定することで、このスクリプトはWordPressのjQueryが読み込まれた後で読み込まれ、そこにwp_add_inline_script()でインライン出力しているので、通常使用では本当に問題ありませんでした。
そして、ソースコードを見る限り、きちんとWordPressのjQueryの後でインライン出力されていたので問題ないはずなのですが．．．なぜか、スクリプトの高速化（つまりはプログラムでdefer属性を付与する）をすると、出力されているのに読み込まれない現象が発生しました。
試しにWordPressのjQeuryに頼らないJavaScriptで書いたものは高速化設定をしても問題なしでした。
さらに試しに上記の目的のスクリプトをエンキューするプログラム内で、WordPressのjQueryを有効化するように追記してもダメ、deferを切ってもダメでした。
このことから、HTMLに出力されているけど適用できないケースもあることが分かりました。
もちろん、このショートコードがある場合のみ高速化を無効にするという措置も取れるものの、高速化設定は無条件に有効にしておきたかったので、今回はjQueryではなく、JavaScriptで書いて解決としました。
これを回避するために、ショートコードに含まれるパラメーターを他の関数へ渡せればいいのですが、いろいろ調べるも、コードを短くするために別のコールバック関数を作ってショートコード用のコールバック関数とやり取りはできるのですが、それを別のアクションフックやフィルターフックでは有効にできないようなので、ショートコードとしてスクリプトやスタイルを出力するには、私の知る限りでは冒頭の方法しかないので、今後このようなコードを書く時には、Javascriptで書くことにしました。
