Jquery est un framework Javascript très facile d’utilisation, totalement gratuit et qui permet de réagencer intégralement un site. Dynamiser du contenu sans rechargement de la page est désormais une technologie à maîtriser impérativement pour donner un « coup de boost » à un site, marchand ou non.
WordPress inclut la librairie Jquery, nécessaire au développement de scripts. Il est donc tout-à-fait possible d’inclure du code personnalisé, afin de réécrire une mise en page (pour conserver la compatibilité des mises à jour des thèmes), ou pour ajouter du contenu dynamique, c’est-à-dire des éléments qui vont évoluer selon certains critères (comme un texte qui s’affiche à mesure que l’utilisateur le saisit, ou un prix qui diminue à mesure que le client augmente la quantité de produits).
(Pour info, Prestashop aussi inclut la bibliothèque, et de très nombreux sites le font également).
Cela correspond bien souvent à un besoin d’ergonomie, mais répond également à une demande pour les utilisateurs d’avoir toutes les informations le plus rapidement possible, donc sans recharger la page. Il est d’ailleurs même possible d’envoyer et de récupérer des informations conjointement avec PHP, grâce à Ajax (non ce n’est pas qu’une marque de solvant ménager…)
Sur cet article, je serais plutôt simple. Nous allons tout simplement réécrire des éléments d’une mise en page, comme ces post-its que j’ai ajouté sur mes widgets.
Pour commencer, il faut ajouter une fonction au thème afin d’insérer proprement un lien vers notre futur script.
Ma fonction est donc la suivante :
// Enqueue custom_design.js
function my_scripts_design() {
wp_enqueue_script(
'custom_design',
get_stylesheet_directory_uri() . '/chemin/vers/MonScript.js',
array('jquery')
);
}
add_action('wp_enqueue_scripts', 'my_scripts_method');
// Fin enqueue custom_design.js
A coller bien évidemment dans functions.php à la racine de votre thème (mais depuis le temps que je le précise, cela ne devrait être plus qu’une formalité pour vous !).
Créons à présent le script Jquery à insérer. Forcément, l’extension du fichier sera .js, mais afin d’éviter tout conflit avec les plugins de WordPress, nous allons ajouter la ligne de code suivante d’emblée dans notre fichier :
$j=jQuery.noConflict();
Un élément ciblé avec Jquery se saisit comme ceci : $(‘.MaClass’) ou alors $(‘#MonID’)
Avec Jquery.noConflict, nous allons plutôt saisir nos éléments comme ceci : $j(‘.MaClass’) ou alors $j(‘#MonID’). Ceci empêchera les conflits (essayez sans, vous verrez que rien ne s’exécute !).
La première chose à faire est de déterminer à quel moment votre script doit s’exécuter. Voulez-vous lancer votre code au chargement de la page, ou une fois que celle-ci est complètement chargée ? Idéalement, afin de ne pas surcharger le navigateur de l’utilisateur, nous allons exécuter notre code une fois que la page est chargée. Il s’agit donc d’encadrer le Jquery que nous taperons avec ceci :
$j(document).ready(function(){
//Ici sera tapé votre code personnalisé
});
En bon français, cela signifie « quand la page (document) est prête (ready), on lance le script (function) ». Et comme tout code qui se respecte, on referme les balises avec }); (un bon éditeur de code vous le signalera de toutes façons).
Nous sommes donc prêts à coder ! N’ayez pas peur, le Jquery est d’une facilité déconcertante, même pour des profanes !
Nous allons insérer une punaise en png sur les post-its de ma sidebar. Cela se passe en deux étapes. Premièrement, testons voir si les post-its sont bien présent dans la page. S’ils ne le sont pas, le navigateur ignorera le code, sinon il l’exécutera. Pour tester si un élément existe, il suffit de tester sa longueur. Si celle-ci est supérieure à zéro, c’est que l’élément existe. Dans le cas contraire… Ai-je besoin de préciser ?
Donc, testons si mes widgets sont bien présents avec ceci :
if ($j('.widget').length) { //Si mon widget a une longueur (mes widgets portant la class widget)
}
Nous avons testé si notre élément existe, passons à la deuxième étape : insérer du code html. La fonction Jquery .prepend() est alors d’un grand secours : grâce à elle nous allons insérer du code html qui n’existait pas auparavant (magie !). Pour information, il existe deux fonctions utiles dans ce sens : append() et prepend(). Des notions latines vous rappelerons que la première fonction insère un élément avant, la seconde juste après.
Nous aurons donc du code html à taper, pour insérer l’image. Voici ce que cela donne :
if ($j('.widget').length) { //Si mon widget a une longueur (mes widgets portant la class widget)
$ j('.widget') . prepend ('< img style="width: 25px; height: 25px; margin-left: 45%;" src="Chemin/Vers/Ma/punaise.png" alt="" />');
}
Bien évidemment, pensez à enlever les espaces pour img et .prepend(). Un simple coup d’oeil à droite vous montrera que cela fonctionne à merveille ! Et Jquery ne s’arrête pas là : vous pouvez utiliser la fonction html() pour réécrire intégralement du code, afin d’effectuer des traductions par exemple, intégralement en JS !
Je ne donnerai que trois avertissements cependant à l’utilisation du Jquery dans vos thèmes :
1/ Attention à ne pas trop en mettre, un bon site doit être capable de tourner sans Jquery
2/ Attention aux conflits ou au code mal développé : il existe des bibliothèques et des forums qui vous donneront des conseils (comme StackOverFlow)
3/ Ne donnez pas à manger à votre Jquery passé minuit Ne chargez pas vos scripts comme des malades, les navigateurs en pâtiront et votre travail n’aura plus aucun sens.
Sinon, RAS, à vous le code !
Imprimer
Laisser un commentaire