web-dev-qa-db-fra.com

wp_add_inline_script sans dépendance

J'ai un extrait de code javascript que je souhaite injecter dans le pied de page de la 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' );

Cela semble un peu stupide (dummy.js est un fichier vierge), mais cela fonctionne. Y a-t-il un moyen de sauter la dépendance?

javascriptwp-enqueue-script
9
jimlongo

wp_add_inline_style() - sans dépendance

La wp_add_inline_style() peut être utilisée sans dépendance au 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 à l’action wp_enqueue_scripts.

wp_add_inline_script() - sans dépendance

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

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

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

<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" );' );

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

7
birgire

Mise à jour: WordPress a ajouté le support pour l’ajout de scripts et de styles inline sans dépendance dans la v5.0. Voir la réponse de @ birgire pour implémentations.

Lorsque vous utilisez wp_add_inline_script(), WP_Scripts::print_inline_script() sera utilisé pour générer des scripts en ligne. De par sa conception, print_inline_script() nécessite une dépendance valide, $handle.

Comme il n'y a pas de dépendance dans ce cas, 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_head ou wp_footer pour générer 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 fichier .js et mis en file d'attente à l'aide de wp_enqueue_script() sur le hook wp_enqueue_scripts. Les données peuvent être mises à la disposition du script à l’aide de wp_localize_script() . Cependant, il peut parfois être nécessaire d’ajouter un script en ligne.

5
Dave Romsey

Une façon de faire est de créer une fonction qui répercute votre script dans une balise <script> et de la lier à l'action wp_print_footer_scripts . Vous devez prendre soin d’éviter tout ce que vous ne contrôlez pas strictement, mais c’est une méthode généralement sûre et simple.

Par exemple:

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