Développeur WordPress javascript: comment commencer à utiliser jquery

Jquery est une bibliothèque JavaScript open source populaire qui vous permet de rendre vos sites interactifs et de créer des animations. Il a été conçu pour simplifier les scripts HTML côté client et a été largement utilisé, installé dans 65% des 10 premiers millions de sites Web les plus occupés. Il s’agit du troisième d’une série en cinq parties axée sur Javascript pour les développeurs WordPress. Dans cette série, vous apprendrez les bases, mais je suppose que vous avez une connaissance pratique du HTML et du CSS. Si vous avez besoin d’aide avec ces blocs de construction, consultez notre collection de développement wordpress pour débutants.
Dans les deux premiers tutoriels, nous avons examiné Base Javascript, y compris Syntaxe, variables et fonctions, et Objets JavaScript . Ces tutoriels devraient vous préparer à utiliser jquery, que nous utiliserons pour ajouter des fonctionnalités puissantes à notre site WordPress. Avez – vous manqué les tutoriels de la série Javascript pour les développeurs WordPress? Vous pouvez récupérer les cinq messages ici: Javascript pour les développeurs WordPress: apprendre le javascript de base pour les développeurs WordPress: démarrer avec des objets Javascript pour les développeurs WordPress: démarrer avec jquery Javascript pour les développeurs WordPress: charger JavaScript dans WordPress Javascript pour les développeurs WordPress: utiliser Ajax
Avant de commencer, assurez – vous que nous commençons tous au même point. La seule condition préalable à ce tutoriel est l’accès à un site WordPress capable d’éditer des fichiers. Je ne recommande pas les essais sur le terrain, donc utilisez l’installation d’essai ou une copie locale. Nous avons plusieurs articles pour vous aider à installer WordPress localement, ce qui rendra les tests plus rapides car vous n’avez pas besoin de compter sur une connexion Internet. Si vous êtes un utilisateur de Windows, voyez comment installer xampp et WordPress
Local sur PC \/ Windows. Si vous utilisez Linux ou OSX, consultez notre article \
Lorsque nous créons des sous – thèmes, nous les testons avec le thème WordPress par défaut 216th. Changer le Code d’un sujet existant est une mauvaise pratique, donc nous allons créer un sous – thème. Les sous – thèmes héritent de toutes les fonctions du thème parent, sauf indication contraire. Créez un nouveau répertoire dans le dossier sujet appelé jquery test theme. Créez trois lignes dans: style. CSS, script. JS et fonctions. Php. Ajouter ce qui suit à la Feuille de style et enregistrer: charger les instructions 36d467f72129e4c6177ce13d8f61c032 ajouter ce qui suit à la fonction. PHP et enregistrez – le: instructions pour charger 36d467f72129e4c6177ce13d8f61c032 si vous ne comprenez pas ce qui se passe ici, ne vous inquiétez pas, nous configurons simplement notre environnement de test et regardons maintenant le code JavaScript suivant. Après avoir entré le Code, vous devriez voir le thème de l’enfant dans la section apparence. Le thème de notre enfant est dans la section apparence. Jquery WordPress sans WordPress va charger jquery pour vous, mais si vous ne travaillez pas dans WordPress, vous devez inclure tout code jquery vous – même avant de l’écrire. Allez sur le site jquery pour une copie. Jquery Getting started jquery est un cadre JavaScript qui est principalement utilisé pour traverser et manipuler le Dom (trouver et modifier le contenu sur la page), gérer les événements (modifier le comportement des éléments en cliquant, en stationnant, etc.) Et Ajax (chargement asynchrone des données). Dans ce tutoriel, nous nous concentrerons sur les deux premiers. Commençons par croiser et manipuler le Dom.
Remarque: jquery vous permet généralement d’utiliser la fonction $. Pour s’assurer qu’il n’y a pas de conflit, WordPress utis
Sélectionnez le noeud DOM et utilisez la fonction de traversée pour atteindre la destination finale.
Nous utilisons certaines de ces propriétés pour renommer les titres des widgets de différentes façons. Instructions de chargement 36d467f72129e4c6177ce13d8f61c032 À l’origine, nous avons choisi de laisser tomber, qui est le conteneur de la barre latérale. Ensuite, nous utilisons la fonction enfants () pour saisir tous les enfants directs du noeud. Dans notre exemple, ce sont des éléments de section qui contiennent des widgets. Enfin, nous utilisons find () pour trouver et réorganiser les éléments avec le sélecteur H2 donné. Faites attention à vos choix! Comme nous sélectionnons tous les éléments H2 du Widget, nous pouvons renommer le titre du Widget au lieu du titre du Widget.
La fonction vérifie que le sélecteur existe dans l’élément. Nous pouvons l’utiliser pour ré – ombrager l’arrière – plan d’un widget avec un titre de Widget. Ceci exclut les widgets de recherche sans titre. Instructions de chargement 36d467f72129e4c6177ce13d8f61c032 il existe de nombreuses fonctions de traversée utiles qui peuvent être utilisées pour localiser avec précision un projet. Vous pouvez également utiliser certaines fonctionnalités jquery pour supprimer, ajouter ou modifier le contenu de la page. La façon la plus simple d’ajouter du contenu est de sélectionner un élément et d’y injecter du contenu en utilisant HTML () ou text ().
36d467f72129e4c6177ce13d8f61c032 HTML () traite la chaîne saisie comme HTML et les balises sont converties en éléments appropriés. Le texte traite la chaîne comme du texte et l’étiquette n’est pas convertie, mais émise telle quelle. Les fonctions Append () et prepend () peuvent ajouter du contenu avant et après le contenu de l’élément sélectionné. Instructions de chargement 36d467f72129e4c6177ce13d8f61c032 Ajouter des attributs et des éléments de modification de texte à la description du site
Styles vous avez vu quelques styles: J’ai utilisé la fonction CSS () dans la plupart des exemples de code ci – dessus. Cette fonction accepte les objets qui peuvent être utilisés pour appliquer plusieurs propriétés et valeurs CSS. Voici un exemple de modification du titre d’un message: instructions pour charger 36d467f72129e4c6177ce13d8f61c032 Utilisez jquery Pour styliser Notez que l’attribut CSS avec un tiret est converti en cas de bosse, donc vous devriez utiliser marginbottom, borderladius, et ainsi de suite. Camel Wrap est très populaire en javascript, donc vous devriez vous y habituer maintenant! Bien que cela semble génial, le travail de jquery n’est pas de rendre les choses belles, mais l’expertise de CSS. Si vous devez vraiment ajouter un style en utilisant jquery, je vous recommande de changer le nom de la classe et d’utiliser la Feuille de style pour implémenter le style. La fonction 36d467f72129e4c6177ce13d8f61c032 ajoute la classe donnée afin que nous puissions ajouter des styles à la Feuille de style. Vous pouvez utiliser removeclass () pour supprimer une classe ou toggleclass () pour supprimer toggleclass (). La fonction ATTR () est nécessaire pour modifier les propriétés HTML. Obtient l’attribut s’il est utilisé avec un paramètre; obtient l’attribut pour une valeur donnée s’il est utilisé avec deux ensembles. 36d467f72129e4c6177ce13d8f61c032 la première ligne renvoie l’id de l’élément donné. La deuxième ligne change l’ID en utilisant l’ID fourni. Avec la popularité du Javascript, les attributs de données deviennent de plus en plus courants. Ceux – ci sont utilisés pour ajouter des données personnalisées à un élément HTML. Si je veux supprimer un message en utilisant jquery, j’a i besoin d’un moyen de lire son ID à partir d’un élément HTML. Pour l’instant, c’est possible, mais je dois voir l’id, supprimer la chaîne \
– Oui. Cette valeur peut être récupérée en utilisant ATTR (‘Data id’), mais jquery a un raccourci: la fonction Data (). Il fonctionne de la même manière qu’ATTR (). Si vous lui donnez un paramètre comme ID, il obtient la valeur de l’id de données. Les événements dans les événements jquery vous permettent de répondre à certaines actions de l’utilisateur. Vous pouvez créer un menu déroulant qui s’ouvre pendant le vol stationnaire, un menu contextuel qui se produit lorsque l’utilisateur atteint le bas de l’écran, et ainsi de suite. W3schools a une liste d’événements jquery couramment utilisés. Nous verrons comment en réaliser un ici. Instructions de chargement 36d467f72129e4c6177ce13d8f61c032 le résultat de cette fonctionnalité est qu’il y a un oeuf de Pâques sur votre site. Si l’utilisateur double – clique sur l’en – tête, le texte de la description du site change. Il existe plusieurs façons d’associer un événement à un élément. Je préfère cette approche parce que même si un projet est ajouté après le chargement de la page, il fonctionne: ce sera un problème lors de l’examen d’Ajax dans le prochain article. La fonction on () prend trois arguments. Le premier est l’événement à écouter, le second est l’élément à associer, et le troisième est une fonction anonyme qui effectue une opération spécifique. Utilisez jquery pour activer et désactiver les widgets nous utilisons les connaissances que nous avons apprises pour créer une fonction simple d’activation \/ désactivation des widgets sans avoir à toucher aucun code dans le fichier sujet. Nous prévisualisons un élément du Widget qui change le contenu du Widget en un clic. Il ne nous faut que quatre lignes de code! La première ligne du chargement 36d467f72129e4c6177ce13d8f61c032 précède l’élément span et chaque Widget a une classe de Widget Switch. Cliquez sur l’événement pour l’attacher à ce projet. Dans la fonction anonyme, nous utilisons jquery (ceci), qui fait référence à l’élément réellement cliqué. Ceci est différent pour chaque Widget parce que chaque plage de commutation est un élément distinct. Nous trouvons l’élément parent de l’élément en traversant le Dom, puis
Nous trouvons tous les éléments du Widget qui ne sont pas des titres ou des boutons de basculement et les activons en utilisant la fonction TOGGLE (). C’est tout! Utilisez la pratique jquery, la pratique, la pratique pour activer \/ désactiver le Widget! Vous en savez beaucoup sur jquery à ce stade. Vous pouvez créer des fonctionnalités, vous apporter à l’article lorsque vous cliquez sur n’importe quelle partie de l’extrait, vous pouvez créer une peau optionnelle pour votre site, et ainsi de suite. Je vous suggère de vous entraîner autant que possible. Dans le prochain tutoriel, nous apprendrons comment utiliser les plugins jquery et jquery dans les thèmes et plugins WordPress. Pensez – vous que ce tutoriel est utile? Pourquoi apprendre le javascript dans le développement WordPress? Que voulez – vous en savoir plus? Veuillez nous le faire savoir dans les commentaires ci – dessous. Tags: Javascript jquery Development