Différences

Ci-dessous, les différences entre deux révisions de la page.

--- webdev:wordpress:insertion_javascript [21/09/2015 12:18] – dolo
+++ webdev:wordpress:insertion_javascript [16/01/2016 21:23] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 1: / Ligne 1: @@
+====== 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 :
+<Code: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');
+    }
+}
+</Code>
+Pour les scripts conditionnels, on ajoute ceci au début de la page :
+<Code:php>
+global $add_script_animation;
+$add_script_animation = true;
+</Code>
+Notre page javacsript de base en jQuery contiendra ceci pour tester :
+<Code:javascript>
+jQuery(document).ready(function()
+{
+    console.log('Yep');
+});
+</Code>
+Pour utiliser le raccourcis $ dans le code : [[http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers]]
+Version alternative :
+<Code:php>
+// -----------------------------------------------------------------------------
+//              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;
+}
+</Code>

Notes

Outils pour utilisateurs

Outils du site

Différences

Outils de la page