web-dev-qa-db-fra.com

Ajouter un script asynchrone

Je travaille sur un plugin qui doit injecter un script sur des pages (quelque chose comme RefTagger ), ce qui serait facile avec wp_enqueue_script, mais il y a deux raisons pour lesquelles je ne peux pas faire cela: la balise de script doit avoir un ID et il devrait être exécuté de manière asynchrone.

J'ai trouvé trois solutions possibles mais je ne les aime pas vraiment:

  1. Écho le script dans wp_footerC’est le plus simple et j’ai le contrôle total sur la balise script, mais c’est probablement mal vu (j’ai l’intention de soumettre mon plugin au référentiel de plugins afin que tout conseil concernant les directives officielles est bienvenue).
  2. Utilisez les fonctions standard et utilisez des filtres pour modifier la balise de script. Les réponses pour cette question détaille le processus, mon problème est qu’il est très hacky (et pourrait probablement casser à l’avenir) et que l’ajout de logique à clean_url a un coût en performances - pour une seule balise de script.
  3. Créez un extrait qui injecte le script de manière dynamique, enregistrez-le sous forme de fichier et utilisez les méthodes standard. C’est une méthode très simple, mais il reste un script à télécharger, ce qui signifie un chargement de page plus lent.

Existe-t-il un autre moyen de le faire ou certaines de mes solutions sont-elles acceptables?

plugin-developmentjavascript
4
molnarm

Le filtre script_loader_tag , ajouté à la version 4.1, résout ce problème. Pour ajouter un attribut asynchrone à un script mis en file d'attente, vous pouvez procéder comme suit:

/**
 * 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 );

Si vous souhaitez ajouter un identifiant au script, vous pouvez également l'ajouter à la fonction str_replace().

Plus d'informations disponibles via l'article " Ajouter les attributs différés et asynchrones aux scripts WordPress " de Matthew Horne et la référence du développeur à script_loader_tag .

5
zgreen