WordPress 4.9系におけるウィジェットのJS関係の不具合

WordPress 4.9系の動画と音声ウィジェットの件については先に書いていたが、今度はウィジェットでスクリプトが直書き&出力されている部分について。

具体的に言うとカテゴリー・アーカイブの2点のウィジェット。

ドロップダウン表示した際に以下のようなエラーが発生するときがある。

Uncaught TypeError: dropdown.parentNode.submit is not a function
at HTMLSelectElement.onCatChange

 

これは、ドロップダウン選択時のページ移動用のJSそのものが書き直されているらしい。

で、これよりも先にJSのライブラリを読み込んでしまうとエラーが起こってしまうようだ。

 

少なくとも4.8系では元々はlocation.hrefで書かれており、当該の箇所は以下のようになっていた。

<script type='text/javascript'>
/* <![CDATA[ */
(function() {
	var dropdown = document.getElementById( "<?php echo esc_js( $dropdown_id ); ?>" );
	function onCatChange() {
		if ( dropdown.options[ dropdown.selectedIndex ].value > 0 ) {
			//↓これ
			location.href = "<?php echo home_url(); ?>/?cat=" + dropdown.options[ dropdown.selectedIndex ].value;
		}
	}
	dropdown.onchange = onCatChange;
})();
/* ]]> */
</script>

 

これが、4.9系でこのような形に変わることになったみたい。

<script type='text/javascript'>
/* <![CDATA[ */
(function() {
	var dropdown = document.getElementById( "<?php echo esc_js( $dropdown_id ); ?>" );
	function onCatChange() {
		if ( dropdown.options[ dropdown.selectedIndex ].value > 0 ) {
			//↓これ
			dropdown.parentNode.submit();
		}
	}
	dropdown.onchange = onCatChange;
})();
/* ]]> */
</script>

このsubmit()がJavaScriptと、それより先に読み込んだJSライブラリとコンフリクトして不具合が発生する。

 

当該のJSは、<head></head>間にライブラリを読み込む可能性のあるwp_enqueue_script()を明らかに配慮せずに書かれている。

 

対処方法としては、wp_enqueue_script()の引数設定で読み込んでいるJSのライブラリを全て以下のようにして</body>の直前に出力先を変更するのが有効。

 

wp_enqueue_script('sample-js', get_template_directory_uri().'/js/loading.js', array(), '' ,true);

ただし、ページの途中でライブラリ依存のスクリプトを読み込む際に<head></head>間にどうしても記述を行わなければならないこともある。

この場合は残念ながら現時点でできる対処などはなく、アップデートを待つ他ない。

カテゴリ

この記事のコメント

コメントはないです。

コメントを残す

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