web-dev-qa-db-fra.com

Comment ajouter un extrait de code javascript au pied de page nécessitant jQuery

Je sais que je peux ajouter un fichier de script au pied de page de wordpress qui nécessite jquery à l’aide de ce code:

<?php
function my_scripts_method() {
   // register your script location, dependencies and version
   wp_register_script('custom_script',
       get_template_directory_uri() . '/js/custom_script.js',
       array('jquery'),
       '1.0',
       true);
   // enqueue the script
   wp_enqueue_script('custom_script');
}
add_action('wp_enqueue_scripts', 'my_scripts_method');
?>

Mais que se passe-t-il si je veux ajouter juste un extrait normal de jquery inline, pas un fichier. Comment cela peut-il être fait.

Modifier

Je sais que je peux utiliser ce script pour ajouter quelque chose au pied de page:

<?php
function myscript() {
?>
<script type="text/javascript">
 // This depends on jquery
</script>
<?php
}
add_action('wp_footer', 'myscript');

Mais comment spécifier le script utilisé nécessite que jquery s'exécute.

plugin-developmentjquerywp-enqueue-script
27
Saif Bechan

La méthode la plus simple consiste à combiner wp_enqueue_script et les actions de pied de page déjà référencées par Saif et v0idless. J'utilise fréquemment jQuery dans mes thèmes et plugins, mais je mets également tous les autres scripts dans le pied de page.

La meilleure façon de mettre les choses en file d'attente serait la suivante:

function myscript() {
?>
<script type="text/javascript">
  if ( undefined !== window.jQuery ) {
    // script dependent on jQuery
  }
</script>
<?php
}
add_action( 'wp_footer', 'myscript' );

function myscript_jquery() {
    wp_enqueue_script( 'jquery' );
}
add_action( 'wp_head' , 'myscript_jquery' );

Mais ce code extrait suppose que c’est vous qui mettez le script en file d’attente, c’est-à-dire que vous le faites dans votre propre plugin ou thème.

Pour le moment, il est impossible d'ajouter un script en ligne au pied de page WordPress et de le charger avec des dépendances. Mais il existe une alternative, si vous le souhaitez.

L'alternative

Lorsque WordPress fonctionne avec des scripts, il les charge en interne dans un objet pour en assurer le suivi. Il y a essentiellement 3 listes à l'intérieur de l'objet:

  • inscrit
  • queue
  • terminé
  • faire

Lorsque vous commencez par register , un script avec wp_register_scripts() est placé dans la liste enregistrée. Lorsque vous wp_enqueue_script() le script, il est copié dans la liste des files d'attente. Une fois imprimé sur la page, il est ajouté à la liste des tâches effectuées.

Ainsi, plutôt que de mettre votre script de pied de page en file d'attente pour exiger jQuery, vous pouvez document qu'il doit utiliser jQuery et il suffit de vérifier par programme pour vous assurer que jQuery est chargé.

Ceci utilise wp_script_is() pour vérifier où le script est répertorié.

function myscript() {
    if( wp_script_is( 'jquery', 'done' ) ) {
    ?>
    <script type="text/javascript">
      // script dependent on jQuery
    </script>
    <?php
    }
}
add_action( 'wp_footer', 'myscript' );

Vous pourriez pourrez utiliser ce même code pour forcer le chargement de jQuery dans le pied de page, mais je n’ai pas testé cela ... donc votre kilométrage peut varier.

29
EAMann

Depuis wordpress 4.5, vous pouvez ajouter un script inline par wp_add_inline_script(). Pour ajouter un extrait de code javascript au pied de page qui nécessite jQuery, ce code vous aide à:

function enqueue_jquery_in_footer( &$scripts ) {

    if ( ! is_admin() )
        $scripts->add_data( 'jquery', 'group', 1 );
}
add_action( 'wp_default_scripts', 'enqueue_jquery_in_footer' );

function theme_prefix_enqueue_script() {
   if(!wp_script_is('jquery', 'done')) {
     wp_enqueue_script('jquery');
   }
   wp_add_inline_script( 'jquery-migrate', 'jQuery(document).ready(function(){});' );
}
add_action( 'wp_enqueue_scripts', 'theme_prefix_enqueue_script' );

wp_add_inline_script avec wordpress jquery

12
Dhinju Divakaran

Utilisez l'action wp_footer comme ceci:

add_action( 'wp_footer', 'wpse33008');
function wpse33008() {
?>
<script type="text/javascript">
    /** INSERT SCRIPT HERE **/
</script>
<?php
}
1
v0idless

Je sais queOPveut spécifier une exigence sur jQuery, et les auteurs de WordPress auraient dû autoriser les extraits de code à être mis en file d'attente à côté de fichiers de script, mais ils ne l'ont pas été. Par conséquent, je vous déconseille d'essayer de le forcer. Si vous ne voulez pas vous mêler de la file d'attente ou de son ordre, comme moi (parce que j'utilise d'autres plugins combinant et optimisant les scripts), la réponse consiste à utiliser l'action wp_footer comme suit:

<?php

add_action(
    'wp_footer'
    , function() {
        ?>
        <script>
            if (window.jQuery) {
                // your snippet
            }
        </script>
        <?php
    }
    , 21 # after enqueued footer scripts
);
0
Walf