wp_add_inline_script sans dépendance

4

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épendance, 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 vide), mais cela fonctionne. Existe-t-il un moyen de sauter la dépendance?

    
posée jimlongo 23.03.2018 - 22:45

3 réponses

4

Lors de l'utilisation de wp_add_inline_script() , WP_Scripts::print_inline_script() sera finalement 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 crochet wp_enqueue_scripts . Les données peuvent être rendues disponibles pour le script à l’aide de wp_localize_script() . Cependant, il peut parfois être nécessaire d’ajouter un script en ligne.

    
réponse donnée Dave Romsey 23.03.2018 - 23:37
1

wp_add_inline_style() - sans dépendance

Le wp_add_inline_style() peut être utilisé 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 le ticket # 43565 , un comportement similaire sera pris en charge pour wp_add_inline_script() dans la version 4.9.9 :

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 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 dans wp_add_inline_script() est 'after' par défaut. La valeur 'before' l’affiche au-dessus de 'after' .

    
réponse donnée birgire 13.08.2018 - 11:41
0

Pour ce faire, vous pouvez créer une fonction qui répercute votre script dans une balise <script> et la raccorder au wp_print_footer_scripts action. 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 facile sinon.

Par exemple:

add_action( 'wp_print_footer_scripts', function () { 
    ?>
    <script>
        (function myFunction() { 
            /* your code here */
        })();
    </script>
<?php 
} );
    
réponse donnée Morgan Estes 13.04.2018 - 06:03

Lire d'autres questions sur les étiquettes