web-dev-qa-db-fra.com

Problème de chargement de javascript dans le pied de page

J'ai écrit un petit plugin où j'ai chargé les scripts suivants

wp_enqueue_script('jquery', plugins_url('/js/jquery.min.js', __FILE__),'','1.7',true);
wp_enqueue_script('new-cycle', plugins_url('/js/cycle.js', __FILE__),array( 'jquery' ),'1.0',true);
wp_enqueue_script('new-jcarousellite', plugins_url('/js/jcarousellite.js', __FILE__),array( 'jquery' ),'1.0',true);
wp_enqueue_script('new-fancybox', plugins_url('/js/fancybox.js', __FILE__),array( 'jquery' ),'1.0',true);

et j'ai aussi un code javascript pour appeler les fonctions cycle et fancybox (avec les paramètres/options chargés depuis les options et les tables post_meta)

function front_js(){ ?>   
<script>
    $(document).ready(function(){
      $(".video-popup").fancybox();
      $(".video_msgs").cycle({speed:'<?php echo get_option("cycle_speed");?>'});
    });
    </script>
<?php }

ce code est ajouté au pied de page à l'aide de add_action('wp_footer', 'front_js');

Maintenant, mon code javascript est chargé avant tous les scripts requis comme

<script>
$(document).ready(function(){
  $(".video-popup").fancybox();
  $(".video_msgs").cycle();
});
</script>
<script type='text/javascript' src='http://localhost/wordpress/wp-content/themes/twentyfifteen/js/functions.js?ver=20141212'></script>
<script type='text/javascript' src='http://localhost/wordpress/wp-content/plugins/myplugin/js/cycle.js?ver=1.0'></script>
<script type='text/javascript' src='http://localhost/wordpress/wp-content/plugins/myplugin/js/jcarousellite.js?ver=1.0'></script>
<script type='text/javascript' src='http://localhost/wordpress/wp-content/plugins/myplugin/js/fancybox.js?ver=1.0'></script>
<script type='text/javascript' src='http://localhost/wordpress/wp-content/plugins/myplugin/js/counter.js?ver=1.0'></script>

et en donnant l'erreur $('...').fancybox() pas une fonction

Je pense que c'est parce que le code est chargé avant le fichier fancybox.js où cette fonction est écrite. J'ai essayé d'utiliser les fonctions print_scripts, mais il est recommandé de ne pas utiliser ceci et wp_enqueue_script fonctionne uniquement avec des fichiers ne contenant pas de code javascript personnalisé.

Existe-t-il une méthode pour charger mon code personnalisé après le chargement des fichiers requis ou toute autre façon de résoudre ce type de problème?.

Cela fonctionne si je charge tous les fichiers dans l'en-tête, mais cela augmente le temps de chargement des pages, ce qui n'est également pas une bonne approche.

pluginsjqueryjavascriptwp-enqueue-scriptfooter
1
Vikram Singh

Essayez d’ajouter le code au pied de page à l’aide de add_action('wp_footer', 'front_js', 99); où 99 spécifie l’ordre dans lequel les fonctions sont exécutées. Maintenant, il devrait être exécuté après le chargement de vos scripts.

1
Stefan

Au lieu de mettre le code en fonction et de le lier à wp_footer.

Vous pouvez avoir un autre fichier JS stocké dans votre dossier de plug-in et le mettre en file d'attente comme les autres scripts que vous avez mis en file d'attente.

OR

<?php
function front_js() {
  if ( wp_script_is( 'jquery', 'done' ) ) {
?>
<script type="text/javascript">

$(document).ready(function(){
      $(".video-popup").fancybox();
      $(".video_msgs").cycle();
    });

</script>
<?php
  }
}
add_action( 'wp_footer', 'front_js' );
?>
0
Abhishek Deshpande