web-dev-qa-db-ja.com

非同期スクリプトを追加する

私はwp_enqueue_scriptを使うのは簡単だろうが、ページにスクリプトをインジェクトするプラグイン（ RefTagger のようなもの）に取り組んでいますが、それができない理由は2つあります。 IDとそれは非同期に実行されるべきです。

私は3つの可能な解決策を見つけました、しかし、私はそれらのどれも本当に好きではありません：

  1. wp_footerでスクリプトを単にエコーする これは最も簡単なもので、scriptタグを完全に制御することができますが、おそらく眉をひそめています（私のプラグインをPlugin Repositoryに提出するつもりですので、公式ガイドラインに関するアドバイス大歓迎です。
  2. 標準機能を使用し、スクリプトタグを変更するためにフィルタを使用します。 この質問 の答えはプロセスを詳述しています、私の問題はそれが非常に厄介であり（そしておそらく将来壊れる可能性がある）そしてclean_urlにロジックを追加するのはパフォーマンスコストがあることです。
  3. スクリプトを動的に挿入するスニペットを作成し、それをファイルとして保存して標準の方法を使用します。 これは非常にクリーンな方法ですが、ダウンロードするスクリプトがもう1つあります。つまり、ページの読み込みが遅くなります。

これを行う他の方法はありますか、または私の解決策のいずれかは受け入れられますか。

plugin-developmentjavascript
4
molnarm

バージョン4.1で追加された script_loader_tag フィルターは、この問題を解決します。キューに入れられたスクリプトに非同期属性を追加するには、次のようにします。

/**
 * Add an aysnc attribute to an enqueued script
 * 
 * @param string $tag Tag for the enqueued script.
 * @param string $handle The script's registered handle.
 * @return string Script tag for the enqueued script
 */
function namespace_async_scripts( $tag, $handle ) {
    // Just return the tag normally if this isn't one we want to async
    if ( 'your-script-handle' !== $handle ) {
        return $tag;
    }
    return str_replace( ' src', ' async src', $tag );
}
add_filter( 'script_loader_tag', 'namespace_async_scripts', 10, 2 );

スクリプトにidを追加したい場合は、それをstr_replace()にも追加できます。

Matthew Horneによる" WordPressスクリプトへの遅延および非同期属性の追加 "および script_loader_tag への開発者のための参照により、より多くの情報が得られます。

5
zgreen