WordPressに scriptファイル を追加で読み込むようにする時、たまに async(非同期) とか入ってるタグ見かけませんか?

例 はてなブックマークボタンを設置する時に使う js

<script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

　

これをWordPressに組み込む際に 通常は以下のようにしますがこれでは async が入りません。

//はてなブックマークのjsタグをフッターに書き出す
function nendebcom_hatena_enqueue_script(){
	//hatena
	wp_enqueue_script( 'hatena-script', 'http://b.st-hatena.com/js/bookmark_button.js', array(), '', true );
}
add_action( 'wp_enqueue_scripts',  'nendebcom_hatena_enqueue_script' );

　

しょうがないので今までは wp_footer で書き出すようにしてました。

//はてなブックマークのjsタグをフッターに書き出す (wp_footer版)
function nendebcom_hatena_footer_script(){
	//hatena
	echo '<script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>';
}
add_action( 'wp_footer',  'nendebcom_hatena_footer_script' );

　
　

しかし WordPress4.1からは wp_enqueue_scripts に script_loader_tag のアクションフィルターを追加して async を追加できるようになりました。

/*
 * はてなブックマークのjsタグをフッターに書き出す
 *
 * License: GPLv2 or later
 */
function nendebcom_hatena_enqueue_script(){
	//hatena
	wp_enqueue_script( 'hatena-script', 'http://b.st-hatena.com/js/bookmark_button.js', array(), '', true );
}
add_action( 'wp_enqueue_scripts',  'nendebcom_hatena_enqueue_script' );

//ハンドル hatena-script の wp_enqueue_script に async を追加する。
function nendebcom_addasync_hatena_enqueue_script( $tag, $handle ) {
	if ( 'hatena-script' !== $handle ) {
		return $tag;
	}
	return str_replace( ' src', ' async="async" src', $tag );
}
add_filter( 'script_loader_tag', 'nendebcom_addasync_hatena_enqueue_script', 10. 2 );

どうやら、これは2年前から提案されていたようですが現在も wp_enqueue_scripts関連 で改良がされているようです。
<!–[if lt IE 9]> 等、条件付き～ ができそうなので ちょっと気になりますよね。

テーマのヘッダーやフッターに直接書いたらいいや とも思うでしょうがなるべく wp_enqueue_script で設置しましょうという話でした。

　

スポンサードリンク

　

参考

WordPress Codex 関数リファレンス/wp enqueue script
http://wpdocs.sourceforge.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_enqueue_script

WordPress Codex テンプレートタグ/wp footer
http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/wp_footer

Add Hook: “script_loader_tag”
https://core.trac.wordpress.org/ticket/22245

Conditional Comments for JS
https://core.trac.wordpress.org/ticket/16024

script_loader_tag
https://developer.wordpress.org/reference/hooks/script_loader_tag/