Manipulation du DOM dans WordPress à l'aide de JQuery

Publié: 2023-02-12

Grâce à la plate-forme open source de WordPress et à la communauté de développeurs dynamique, la création de thèmes pour la plate-forme a un attrait assez large. Cependant, la navigation dans tous les éléments et contenus nécessaires à la création d'un site WordPress peut être difficile, en fonction de vos connaissances et de votre expérience en programmation.

Heureusement, le modèle d'objet de document (DOM) peut faciliter la manipulation ou la navigation dans le code HTML d'un site. Le DOM fonctionne en vous permettant de créer un arbre composé de différents nœuds ou objets. Cela ouvre la possibilité de modifier l'affichage, la structure ou la fonction du site, en utilisant des bibliothèques JavaScript telles que jQuery.

Dans cet article, nous expliquerons ce qu'est le DOM et pourquoi vous voudrez peut-être l'utiliser. Nous fournirons ensuite quelques techniques de manipulation jQuery standard pour utiliser le DOM avec WordPress. Plongeons dedans !

Qu'est-ce que le DOM ?

En termes simples, le DOM est une interface de programmation d'application (API) pour HTML. Il crée une arborescence d'objets qui représente le contenu et la structure d'une page Web. C'est aussi un script indépendant de la plate-forme et de la langue, ce qui le rend assez polyvalent. Lorsque le DOM représente le code source HTML de cette manière, il le rend accessible afin que divers langages de programmation puissent s'y connecter.

Pourquoi utiliser le DOM ?

En tant qu'utilisateur de WordPress, vous voyez probablement le DOM en action chaque fois que vous rencontrez une interactivité dynamique. Cela peut inclure lorsqu'une erreur est renvoyée si un formulaire est soumis avec des informations manquantes. Les curseurs de contenu sont un autre exemple du DOM utilisé :

Les développeurs peuvent utiliser le DOM pour mettre à jour et modifier presque tous les éléments d'une page Web. Vous pouvez l'utiliser pour créer des documents et naviguer dans leur structure. Le DOM peut également être utilisé pour ajouter, modifier ou supprimer des éléments et des objets.

Manipulation DOM avec JQuery

Pour être clair, le DOM et le HTML ne sont pas les mêmes, bien qu'ils doivent contenir les mêmes éléments. Le DOM est une représentation modélisée du code source HTML et peut être modifié par JavaScript côté client.

Ci-dessous, nous examinerons les méthodes de la bibliothèque jQuery pour tester certaines techniques de manipulation du DOM. Gardez à l'esprit que différents navigateurs gèrent le DOM à leur manière, mais vous n'avez rien à faire de spécial pour commencer à l'utiliser. Tous les navigateurs utilisent une forme du DOM pour rendre les pages accessibles à JavaScript.

Techniques de manipulation DOM

Le DOM peut être utilisé de différentes manières. Pour illustrer sa flexibilité, examinons six techniques qui peuvent vous aider à démarrer avec cette API utile.

1. La méthode Before()

Fidèle à son nom, la méthode before() est utilisée lorsque vous souhaitez insérer un élément avant un autre élément cible, comme indiqué dans le code.

Dans cet exemple, la méthode peut être utilisée pour ajouter un élément carré avec du texte au-dessus d'un élément désigné, tel qu'un bouton, une fois qu'il a été cliqué :

 $(this).before( "<div class='square'>Un autre carré</div>" );

Le placement et la mise en page de la page sont des considérations à garder à l'esprit lors de l'utilisation de cette méthode. Vous voudrez vous assurer que votre nouvel élément ne va pas casser votre mise en page ou causer des problèmes visuels.

2. La méthode After()

De la même manière que la méthode before() permet d'insérer des éléments avant un autre élément indiqué, la méthode after() permet l'inverse. Par exemple, il pourrait être utilisé pour ajouter un élément juste en dessous d'un bouton, une fois le bouton sélectionné :

 $(this).after( "<div class='square'>Un autre carré</div>" );

Ajouter du contenu interactif en manipulant le DOM avec jQuery comme celui-ci est un moyen solide de gagner en interactivité, sans perdre de vitesse dans le processus.

3. La méthode Append()

Au lieu de faire apparaître de nouveaux éléments individuels, vous pouvez ajouter votre nouvel élément à un élément existant. Par exemple, vous souhaitez peut-être ajouter le texte "Joyeux anniversaire !" dans une zone colorée chaque fois qu'un bouton spécifique est cliqué.

Pour ajouter votre nouvel élément au contenu existant de l'élément cible, vous devez insérer la commande append() jQuery dans le code source HTML :

 $( ".box" ).append( "<p>Joyeux anniversaire !</p>" );

Cette méthode ajoute la manipulation à la fin de l'élément que vous indiquez dans la chaîne, plutôt que de la placer avant ou après. Dans le contexte du document HTML complet, vous pouvez voir comment se déroule la manipulation :

 <!doctypehtml>
 <title>Exemple</title>
 <style>
 .boîte {
 fond : orange ;
 Couleur blanche;
 Couleur blanche;
 largeur : 150 pixels ;
 rembourrage : 20px ;
 marge : 10px ;
 }
 </style>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
 $( fonction() {
 $( "bouton" ).click( fonction() {
 $(this).after( "<div class='box'>Joyeux anniversaire !</div>" );
 });
 });
 </script>
 <button>Créer une boîte</button>

Cette technique vous donne une option simple pour créer de l'interactivité dans un espace confiné. N'oubliez pas qu'avec cette méthode particulière, les manipulations apparaîtront comme une extension de l'élément que vous indiquez, plutôt que comme de nouveaux éléments individuels.

4. La méthode Prepend()

En tant qu'équilibre de la méthode append() , prepend() ajoutera un élément à la fin de l'élément cible que vous indiquez dans la commande jQuery :

 $( ".banner" ).prepend( "<p>Joyeux anniversaire !</p>" );

Dans cet exemple, le texte « Joyeux anniversaire ! » apparaîtrait au début de la bannière indiquée dans la chaîne de code.

Il convient de noter que ces méthodes (y compris before() , after() et append() ) sont toutes des approches acceptables pour des utilisations simples. Cependant, nous recommandons d'autres techniques pour les insertions plus complexes.

5. La méthode Clone()

Ensuite, la méthode clone() est une option assez puissante pour manipuler le DOM avec jQuery. Alors que les quatre techniques précédentes vous permettent d'insérer des éléments et de les déplacer, clone() permet de copier un élément, de le supprimer de son emplacement d'origine et de le réinsérer ou de l'ajouter ailleurs.

Par exemple, cette ligne signifie que l'élément boîte d'origine restera là où il se trouve, tandis qu'un clone de celui-ci sera ajouté à l'élément triangle :

 $( ".box" ).clone().appendTo( ".triangle" );

L'inconvénient de cette méthode est qu'elle peut entraîner la duplication de l'attribut id de l'élément. Ces attributs sont censés être uniques. Vous pouvez éviter ce problème en utilisant les attributs de classe comme identificateurs et en utilisant la méthode clone avec parcimonie.

6. La méthode Wrap()

Enfin, la méthode wrap() est utile si vous souhaitez envelopper un élément autour d'une chaîne existante. Par exemple, vous pouvez envelopper plusieurs paragraphes dans une nouvelle structure HTML en identifiant la classe et en indiquant quelle structure est implémentée :

 $( ".targetclass" ).wrap( "<div class='new'></div>" );

Avec cette technique, vous créez un <div> autour de tout élément qui correspond à la classe cible dans la chaîne wrap() . Bien que vous puissiez créer une enveloppe de plusieurs niveaux de profondeur, vous devez vous assurer qu'il n'y a qu'un seul élément le plus interne.

Dépannage du DOM

Lorsqu'il s'agit de travailler avec le DOM, nous voulons souligner un aspect clé auquel vous voudrez prêter attention. Afin de maintenir le chargement rapide de vos pages et d'éviter le code inutile (surtout si vous développez un thème), vous devez faire attention à ne pas utiliser d'éléments qui ne font pas partie de l'arborescence DOM.

Si vous n'êtes pas sûr qu'un élément fasse partie du DOM ou non, vous pouvez vérifier chacun d'entre eux via votre navigateur sur le front-end de votre site. Vous pouvez inspecter les éléments de la page et déterminer où ils sont inclus dans l'arborescence DOM.

Ceci est particulièrement utile lorsqu'un autre script a modifié le code HTML d'origine de votre site. Sinon, votre HTML et votre DOM peuvent parfois apparaître exactement de la même manière.

Explorez d'autres ressources et outils WP Engine

Si vous considérez le DOM comme une partie organique de votre site, une ressource vivante qui répond au code source HTML, la puissance de son accessibilité est assez étonnante. C'est pourquoi comprendre le DOM et comment il peut être utilisé pour améliorer vos projets peut vous aider à faire passer votre site au niveau supérieur.

La manipulation du DOM avec jQuery met en évidence la beauté de la plate-forme open source de WordPress. Chez WP Engine, nous comprenons comment des ressources de développement de haute qualité peuvent faire toute la différence. C'est pourquoi nous offrons beaucoup d'aide aux utilisateurs de WordPres, ainsi que des plans d'hébergement de premier ordre !