Twitterの埋め込み用コードにasyncが追加されていたので対策した

今までは、次のコードが、埋め込み用コードの末尾にありました。

<script src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

このwidgets.jsで、埋め込み用コードのいろいろな装飾が読み込まれていたわけです。

そのwidgets.jsを読み込むコードにasyncが追加され、いつの間にやら非同期読み込みに対応していました。

<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

いつのまにやら、という感じです。

ただ、要素に「async」という要素名だけを書き込むスタイルは、XHTML1では「async="async"」と書くべきもの、なのだそうです。

htmlチェッカーでチェックしてみると、次のように指摘されてしまいます（それ以前に「<script> に不明な属性 `async` が指定されています。」と指摘されてしまいますが；）。

<script> の属性 `async` で属性名を省略することはできません。

そこで、functions.phpに次のコードを追加して、自動的に変換されるようにしてみました。

// async を async="async" に変換する
function async_trans( $content ) {
	return str_replace('<script async ', '<script async="async" ', $content );
}
add_filter('the_content', 'async_trans' );

これで、無事に自動変換できるようになりました。毎回scriptを編集していると大変なので。

ちなみに、「async="true"」のようにするのは誤りです。