Vous ne le savez peut être pas tous, mais aujourd’hui, les ressources javascript doivent être placé en pied de page et non dans l’entête.
Pourquoi : Optimiser le chargement de la page, ces ressources sont synchrone, donc tant qu’un fichier n’est pas téléchargé le reste de la page non plus.
Petit rappel, dans WordPress il faut utiliser les fonctions :
- Script JS : wp_register_script / wp_enqueue_script
- Feuille de styles :
wp_register_style / wp_enqueue_style
Une fonction pour enregistrer le script/style avec ses paramètres et l’autre pour l’appeler dans les bonnes pages.
Exemple :
[pastacode lang= »php » manual= »wp_register_script(%20’ctw-monscript’%2C%20JS.’%2Fmctw-monscript’.MINI.’.js’%2C%20array(‘jquery’)%2C%20 »%2C%20true%20)%3B » message= »Appel de script dans WordPress » highlight= » » provider= »manual »/]
Tous cela pour parler du JQuery..
Il est souvent appeler par défaut dans pas mal de thème WordPress et souvent en entête (Bouhouhou…). Dans ces cas là je ne le change pas car il faudrait reprendre tous les script pour vérifier que tous fonctionne correctement avec un Jquery en bas de page.
D’ailleurs comment fait-on quand le JQuery est déjà appelé.
Soit on modifie sont thème avec true à la fin de la fonction wp_register_script.
Soit on utilise un thème enfant et là il faut surcharger l’appel en désinscrivant la ressources puis en la remettant :
[pastacode lang= »php » manual= »if(%20!is_admin())%7B%0A%09wp_deregister_script(‘jquery’)%3B%0A%09wp_register_script(‘jquery’%2C%20includes_url(%20’%2Fjs%2Fjquery%2Fjquery.js’%20)%2C%20false%2C%20null%2C%20true)%3B%0A%09wp_enqueue_script(‘jquery’)%3B%0A%7D » message= »JQuery en pied de page » highlight= » » provider= »manual »/]
Pour ma part cela m’arrive souvent de mettre des scripts en pleine page car je n’ai pas besoin de faire un long script a charger en fin de page.
Le soucis est que la plupart du temps ces scripts utilisent la bibliothèque JQuery.
Si cette bibliothèque n’existe pas au moment ou le script est présent :
BOUM, ca pète !
En fait, la solution est de remplacer l’appel classique "ready" en JQuery,
Appel normal JQuery :
[pastacode lang= »php » manual= »jQuery(document).ready(function()%20%7B%0A%09%2F*%20moncodeJS%20*%2F%0A%09mafonctionJS()%3B%0A%7D)%3B » message= »ready » highlight= » » provider= »manual »/]
Par un Listener,
Solution : Appel du script au coeur de la page si JQuery est en bas de page
[pastacode lang= »php » manual= »window.addEventListener(‘load’%2C%20function%20()%20%7B%0A%09%2F*%20moncodeJS%20*%2F%0A%09mafonctionJS()%3B%0A%7D%2C%20false)%3B » message= »addEventListener » highlight= » » provider= »manual »/]
EDIT du 27/10/2016 : Ajout de la fonction includes_url() pour que le lien fonctionne sur toutes les installations WordPress.