Outils pour utilisateurs

Outils du site


Panneau latéral

webdev:wordpress:insertion_javascript

Insertion de javascript conforme

Utiliser wp_enqueue_script au lieu de wp_print_scripts, qui est dépréciée. Cette méthode s'avère la plus pratique à l'usage.

functions.php :

// -----------------------------------------------------------------------------
//              Intégration correcte de javascript dans wordpress

// Fonctions pour chargement conditionnel
global $add_script_animation;
$add_script_animation = false;

add_action('init', 'register_my_script');
add_action('wp_footer', 'print_my_script');

function register_my_script() {
    wp_register_script('menu-script', get_template_directory_uri().'/js/menu.js', array('jquery'), null, true);
    wp_register_script('animation-script', get_template_directory_uri().'/js/animation.js', array('jquery'), null, true);
}

function print_my_script() {
    global $add_script_animation;

    wp_enqueue_script('menu-script');// On suppose que le menu sera chargé sur toutes les pages
    
    if($add_script_animation)
    {
        wp_enqueue_script('animation-script');
    }
}

Pour les scripts conditionnels, on ajoute ceci au début de la page :

global $add_script_animation;
$add_script_animation = true;

Notre page javacsript de base en jQuery contiendra ceci pour tester :

jQuery(document).ready(function()
{
    console.log('Yep');
});

Pour utiliser le raccourcis $ dans le code : http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers

Version alternative :

// -----------------------------------------------------------------------------
//              Intégration correcte de javascript dans wordpress


// Fonctions pour chargement conditionnel


add_action('init', 'register_javascript');
add_action('wp_footer', 'add_footer_js');
add_action('wp_head', 'add_header_js');

function register_javascript() {
    wp_enqueue_script('jquery');
    wp_register_script('main-s', get_template_directory_uri().'/js/main.js', array('jquery'), null, true);
    wp_register_script('scroll-s', get_template_directory_uri().'/js/scroll.js', array('jquery'), null, true);
    wp_register_script('easing-s', get_template_directory_uri().'/js/jquery.easing.min.1.3.js', array('jquery'), null, false);
    wp_register_script('jcontent-s', get_template_directory_uri().'/js/jquery.jcontent.0.8.min.js', array('jquery'), null, false);
}

function add_footer_js() {
    wp_enqueue_script('easing-s');
    wp_enqueue_script('jcontent-s');
    
echo <<<JAVASCRIPT
<script>
jQuery(document).ready(function() {
    jQuery('#wrap').fadeIn(1500);
});
</script>
<script type="text/javascript">jQuery('a[href^="#"]').bind('click',function(){return false;});</script>
JAVASCRIPT;
}

function add_header_js() {
    wp_enqueue_script('main-s');
    wp_enqueue_script('scroll-s');
echo <<<JAVASCRIPT
<script type='text/javascript'>
jQuery(document).ready(function()
{
   jQuery('#toggle').hide();
   jQuery('a#toggler').click(function()
  {
      jQuery('#toggle').slideToggle(400);
      return false;
   });
});
</script>  
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-59251538-4', 'auto');
  ga('send', 'pageview');
</script>
JAVASCRIPT;
}
webdev/wordpress/insertion_javascript.txt · Dernière modification: 16/01/2016 21:23 (modification externe)