情報科学屋さんを目指す人のメモ

方法・手順・解説を書き残すブログ。私と同じことを繰り返さずに済むように。

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

JavaScript (15) Twitter (624) WordPress (80)

Twitterの埋め込み用コードに非同期用の要素「async」が追加されました。このasyncを「async="async"」に変更したかったので、WordPresテンプレートに変更を加えました。それについてメモ。

本当はあと2カ所ほど変更したのですが、前提となるコードあっての修正だったので、そういう前提が必要の無い、汎用そうなものを取り上げました。

今までのコード

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

<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="async"にしたい

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

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

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

WordPress用の対策

そこで、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"」のようにするのは誤りです。

コメント(0)

新しいコメントを投稿