wp_add_inline_script sans dépendance

11

J'ai un extrait javascript que je souhaite injecter dans le pied de page. C'est un code de suivi, disons similaire à Google Analytics. Il n'a pas de dépendances, c'est un extrait autonome.

Je peux faire quelque chose comme ça

function render_tracking_code(){
    wp_enqueue_script( 'depends-js', 'https://rdiv.com/dummy.js', array(), '0.01', true );
    wp_add_inline_script( 'depends-js', 'aWholeBunchOfJavascriptCode' );
}
add_action( 'wp_enqueue_scripts', 'render_tracking_code' );

Semble un peu stupide (dummy.js est un fichier vierge), mais fonctionne. Existe-t-il un moyen d'ignorer la dépendance?

javascript wp-enqueue-script jimlongo
la source

Réponses:

13

wp_add_inline_style() - sans dépendance

Le wp_add_inline_style()peut être utilisé sans dépendance de fichier source.

Voici un exemple de @Flix:

wp_register_style( 'dummy-handle', false );
wp_enqueue_style( 'dummy-handle' );
wp_add_inline_style( 'dummy-handle', '* { color: red; }' );

où nous accrocherions cela dans l' wp_enqueue_scriptsaction.

wp_add_inline_script() - sans dépendance

Selon le ticket # 43565 , similaire sera pris en charge wp_add_inline_script()dans la version (merci à @MarcioDuarte, @ dev101 et @DaveRomsey pour la vérification dans les commentaires):4.9.9 5.0

wp_register_script( 'dummy-handle-header', '' );
wp_enqueue_script( 'dummy-handle-header' );
wp_add_inline_script( 'dummy-handle-header', 'console.log( "header" );' );

qui affichera ce qui suit dans l'en- tête , c'est-à - dire entre les <head>...</head>balises:

<script type='text/javascript'>
console.log( "header" );
</script>

Pour l'afficher dans le pied de page :

wp_register_script( 'dummy-handle-footer', '', [], '', true );
wp_enqueue_script( 'dummy-handle-footer'  );
wp_add_inline_script( 'dummy-handle-footer', 'console.log( "footer" );' );

La valeur par défaut de $positionl'argument d'entrée dans wp_add_inline_script()est 'after'. La 'before'valeur l'imprime ci-dessus 'after'.

Birgire
la source
La wp_add_inline_script()sans dépendance est toujours envisagée pour 4.9.9, cela ne signifie pas nécessairement qu'elle sera ajoutée. Il est donc sage d'attendre la confirmation avant d'utiliser cette fonctionnalité.
Marcio Duarte
1
Nous sommes prêts à partir de WP 5.0 .
Dave Romsey
Quelqu'un a supprimé mon commentaire à partir d'ici (j'ai confirmé la réponse de birgire qu'il fonctionne réellement dans WP 5.0+), et un mois plus tard, j'avais à nouveau besoin de ce code, recherché sur Google, trouvé cette réponse, balayé d'un coup d'œil, ne trouvant pas mon commentaire et déplacé sur d'autres résultats. Juste après une heure, je suis revenu ici, réalisant que c'était la réponse que je cherchais! Au modérateur: veuillez NE PAS supprimer mes commentaires utiles, ils ME servent ainsi que les futures références et rappels, pas seulement pour les autres. Je vous remercie.
dev101
Malheureusement, je dois m'en tenir à la version 4.9.x.
Lucas Vendramini
5

Mise à jour: WordPress a pris en charge l'ajout de scripts et de styles en ligne sans dépendance dans la version 5.0. Voir la réponse de @ birgire pour les implémentations.

Lors de l'utilisation wp_add_inline_script(), WP_Scripts::print_inline_script()sera finalement utilisé pour produire des scripts en ligne. De par sa conception, print_inline_script()nécessite une dépendance valide $handle.

Puisqu'il n'y a pas de dépendance dans ce cas, ce wp_add_inline_script()n'est pas le bon outil pour le travail. Au lieu de créer un faux fichier de dépendance (et une requête HTTP supplémentaire indésirable), utilisez wp_headou wp_footerpour sortir le script en ligne:

add_action( 'wp_head', 'wpse_add_inline_script' );
function wpse_add_inline_script() {
  echo '<script>' . PHP_EOL;

  // aWholeBunchOfJavascriptCode

  echo '</script>' . PHP_EOL;
}

En règle générale, JavaScript doit être ajouté à un .jsfichier et mis en file d'attente à l'aide wp_enqueue_script()du wp_enqueue_scriptscrochet. Les données peuvent être mises à la disposition du script à l'aide de wp_localize_script(). Parfois, il peut cependant être nécessaire d'ajouter un script en ligne.

Dave Romsey
la source
0

Une façon de le faire consiste à créer une fonction qui fait écho à votre script à l'intérieur d'une <script>balise, et à l'accrocher à l' wp_print_footer_scriptsaction. Vous devez prendre soin de vous échapper de tout ce que vous ne contrôlez pas strictement, mais sinon, c'est une méthode généralement sûre et facile.

Par exemple:

add_action( 'wp_print_footer_scripts', function () { 
    ?>
    <script>
        (function myFunction() { 
            /* your code here */
        })();
    </script>
<?php 
} );
Morgan Estes
la source