Beaucoup d’astuces et de tutos sur le web pour son site WordPress demandent d’insérer du code javascript et/ou jQuery pour qu’il fasse le café, qu’il coupe du bois ou qu’il repeigne les volets ! Parfois c’est juste pour ajouter un effet sympa sur le survol de la souris ou pour harmoniser la hauteur de 2 colonnes qui sont côte à côte. Mais comment faire pour ajouter du code jQuery sur son site web ? On prend un café, on se détend et on lis ce qui suit !
Menu de navigation rapide
Créer le dossier et le fichier pour insérer le code jQuery dans son site Web
Pour commencer il faut créer l’écrin qui va accueillir les différentes merveilles glanées ici et là pour embellir son site web. On va ouvrir son logiciel de FTP préféré et ajouter dans son thème enfant un dossier pour y mettre son fichier jQuery :
On va donc faire un clic droit et « créer un dossier » que l’on va appeler « custom-js » et y placer un fichier « custom-jquery.js »
Il ne reste plus qu’à ouvrir le fichier dans son éditeur de texte/code préféré et on va commencer à faire les paramétrages de base pour relier le code à son site web.
Paramétrer son site WordPress pour qu’il prenne en compte le code
Maintenant que l’on a un fichier prêt à être utilisé on va aller prévenir son site Web qu’il va devoir prendre en compte ce nouveau code lorsqu’il va charger la page sur un écran. Sans rentrer dans le détail, les fichiers de ce type sont chargés dans le <head> de la page web et ce script est chargé de façon bien spécifique par WordPress. On va aller faire un tour du côté du fichier « functions.php » qui se trouve dans le thème enfant (child-theme) de son site WordPress.
On va ajouter ce code :
/* fonction ajouter script externe */
add_action( 'wp_enqueue_scripts', 'enqueue_mon_script' );
function enqueue_mon_script() {
wp_enqueue_script( 'script-perso', get_stylesheet_directory_uri() . 'custom-js/custom-jquery.js', array( 'jquery' ) );
}
Quelques explications :
- Ligne 2 : on ajoute la fonction enqueue_mon_script (traduire par « mettre en file d’attente ») dans les scripts à charger lors du chargement de la page sur le navigateur,
- Ligne 5 : on ajoute le script à qui on attribue l’identifiant ‘script-perso’ (à ne pas confondre avec le nom du fichier) et qui se trouve dans le dossier du thème enfant (get_stylesheet_directory_uri()), dans le dossier custom-js et qui s’appelle ‘custom-jquery.js’,
- On ajoute la librairie ‘jquery’ à ce script directement avec cette fonction grâce à « array(‘jquery’) » comme ça on est sûr que l’on peut utiliser directement du jquery dans le fichier.
Il ne reste plus qu’à aller dans le fichier ‘custom-jquery.js’ pour mettre en place nos formules magiques pour que notre site web soit le plus beau de la terre entière !
Préparer le fichier pour que le code jQuery de son site web fonctionne au mieux
Maintenant que son site web charge le fichier on va faire en sorte que le code soit pris en compte correctement et s’assurer que tout se passe au mieux en faisant un petit test !
JQuery est une bibliothèque de fonctions qui est à javascript ce que le prêt-à-porter est aux vêtements : du rapide, du facile, de l’accessible. Une des caractéristiques de javascript/jQuery sur le web, c’est sa capacité à utiliser le DOM de la page et le manipuler pour faire de son site. Prendre un texte, le faire tourner comme une hélice, le faire onduler comme une vague ou mettre un effet dessus au survol de la souris un peu plus complexes que ceux disponibles en CSS demande certains prérequis. Et le premier d’entre eux c’est que le texte que l’on veut animer soit prêt à être modifié sur la page AVANT d’y appliquer un effet ! (oui, logique en effet !)
Pour demander à jQuery d’attendre que la page soit prête avant d’y appliquer les codes qui sont dedans, on va donc ajouter une fonction qui va englober la totalité du code jQuery perso :
jQuery(document).ready(function( $ ){
/* mon super code */
});
Quelques explications :
- Ligne 1 : on attend que la page soit prête pour appliquer ‘mon super code’ avec la fonction « ready »
- Ligne 1 : on intègre la bibliothèque jQuery dans notre code avec ‘jQuery’ qui sera remplacé par ‘$’ à l’intérieur de la fonction
- Tout le code sera mis à l’intérieur afin qu’il ne soit exécuté que lorsque la page sera prête
Il ne reste plus qu’à faire un petit test pour savoir si tout est ok et pour cela on va inclure dans le code d’afficher le grand titre de la page, en général celui qui possède la balise <h1></h1>.
jQuery(document).ready(function( $ ){
console.log($('h1').html());
});
Le code doit afficher dans la console du navigateur le titre de la page (s’il n’y en a pas c’est qu’il faut revoir sa stratégie de référencement !). Pour vérifier si son code marche, il faut bien penser à vider tous les caches (navigateur ET site web) et aller ensuite vérifier sur l’inspecteur :
- Clic droit sur la page d’accueil de son site internet
- Cliquer sur ‘Inspecter’ sur Chrome, ‘examiner l’élément’ sur Firefox ou ‘inspecter l’élément’ sur Internet Explorer
Sur la fenêtre qui s’ouvre, aller dans l’onglet « Console », on devrait voir le titre H1 de sa page dans la console :
BONUS : Cibler une page unique où le code jQuery sera exécuté et exclure toutes les autres
Afin de cibler une page précise où exécuter du code jQuery, soit pour éviter que du code s’applique aux éléments qui ont le même nom sur une autre page soit pour éviter des lourdeurs ou des problèmes de chargement, on va utiliser encore une fois l’inspecteur (clic droit sur sa page, ‘inspecter’ ou ‘examiner’).
On va regarder ensuite les classes utilisées sur la balise <body></body> et repérer celle qui serait unique sur tout le site. Utilisant le thème Divi, mon site possède une classe unique pour la page d’accueil :
Et on va donc avoir le code :
jQuery(document).ready(function( $ ){
if($('body.page-id-89').length > 0){
console.log($('h1').html());
}
});
Quelques explications :
- Ligne 3 : On va mettre une condition : « si il y a au moins un élément dans la balise <body> qui a comme classe ‘page-id-89’, alors tu peux exécuter le code ci-après. Il y aura toujours un élément dans la balise <body> d’une page (sauf exception rarissime et assez étrange…) donc si il n’y en a pas c’est que l’on n’est pas sur la bonne page et donc qu’il ne faut pas exécuter le code.
- Ligne 4 : On met le code que l’on veut exécuter exclusivement sur la page indiquée ligne 3.
Voilà, c’est terminé ! Maintenant vous pouvez intégrer tous les codes jQuery que vous trouverez à droite à gauche ! Attention à ne pas copier-coller n’importe quoi puisque du code jQuery pourrait ouvrir une brèche sur votre site Internet.