Share
L'une des meilleures choses à propos de WordPress est son économie dynamique. Pour de nombreux utilisateurs, il est très facile de trouver des thèmes correspondant au design auquel ils s'adressent, ou de rechercher des plug-ins offrant des fonctionnalités qu'ils souhaitent intégrer à leur site..
Mais combien d'entre vous - en tant que développeurs ou concepteurs - avez reçu cet appel téléphonique ou cet e-mail dans lequel le client affirme que quelque chose ne va pas sur son site, mais découvre que la console du navigateur affiche quelque chose à propos d'une erreur liée à JavaScript ou jQuery?
Exactement. Très probablement, toute personne ayant construit et / ou mis à jour un site pour quelqu'un a rencontré ce problème notamment si l'utilisateur final est autorisé à ajouter ses propres plugins, autoriser ses propres mises à jour, etc..
Dans cet article, nous allons passer en revue quelques concepts autour de jQuery et WordPress pour nous assurer qu'en tant que développeurs, nous ne travaillons pas seulement à la construction correcte de nos produits, mais que nous savons également comment diagnostiquer correctement les problèmes lorsqu'ils surviennent. les sites de nos clients.
Ce sujet particulier n'est pas nouveau dans Wptuts +. En fait, nous avons écrit un article complet à ce sujet, avec plusieurs exemples de code qui devraient vous fournir tout ce dont vous avez besoin pour comprendre comment utiliser JavaScript dans WordPress..
Mais alors que nous continuons à observer certaines pratiques en cours dans la communauté que nous aimerions aider à résoudre, cela ne nous dérange pas de couvrir plusieurs facettes du même sujet..
Donc, avant de lire cet article, assurez-vous que vous savez comment inclure JavaScript et CSS dans vos thèmes et plugins WordPress..
En ce qui concerne la création de produits dans WordPress, nous devons, en tant que développeurs, essayer de traiter l'application WordPress comme un fondement..
Pour le moment, l’API nous offre une grande flexibilité pour la création de thèmes, de plugins et d’applications, ce qui est une bonne chose..
Mais lorsque nous commençons à supprimer les bibliothèques fournies avec WordPress au profit des nôtres, c'est presque comme si nous créons un "mini-fork" du projet..
Ce n'est pas une bonne pratique à adopter.
En ce qui me concerne, WordPress est livré avec son ensemble de base de fonctions et de bibliothèques qui lui permettent de fonctionner comme il le fait. Changer des éléments cruciaux de l'application, tels que jQuery, n'affecte pas uniquement WordPress, mais tout l'écosystème de produits qui le composent.
Les bons thèmes et plugins dépendent de la présence de ces bibliothèques. Lorsque nous modifions cette fonctionnalité, nous interrompons potentiellement chaque tâche qui en dépend..
Nous devons cesser de considérer WordPress comme quelque chose que nous pouvons démonter et réassembler au besoin, et le considérer comme une base sur laquelle bâtir notre propre travail unique..
De manière générale, le problème des conflits JavaScript existe pour l'une des trois raisons suivantes. Un développeur a soit:
Premièrement, chacun des trois cas susmentionnés peut être traité en même temps, mais le plus souvent, c’est l’un des cas susmentionnés. Deuxièmement, je ne pense pas que les développeurs le fassent généralement avec de mauvaises intentions.
Je pense que c'est plus un manque d'éducation et / ou une compréhension des conséquences.
J'entends par là que le développeur n'a pas correctement accédé à la bibliothèque jQuery en exécutant pas de conflit, ne ramenant pas correctement la variable à son état d'origine, ou simplement en renommant la fonction de raccourci.
Nous verrons plus loin dans cet article la meilleure pratique pour écrire du jQuery spécifique à WordPress, de sorte que cela nous permette de tirer pleinement parti de la bibliothèque sans entrer en conflit avec d'autres plugins, thèmes ou projets..
C’est quelque chose qui est souvent fait avec de bonnes intentions: l’idée est que le développeur fournisse une mise à jour de la version de jQuery incluse dans WordPress afin d’écrire de nouvelles fonctionnalités ou des versions plus modernes de jQuery..
Le problème, c'est que les projets précédemment développés ne contiennent pas certaines des fonctionnalités les plus récentes de la dernière version de jQuery. De plus, si jQuery a obsolète ou complètement supprimé une fonction de la nouvelle version qui était présente dans l'ancienne version, cela empêchera ce code de fonctionner.
Bien que ce problème soit moins courant, cela se produit parfois: pour tenter de rendre le chargement d'un site plus rapide, les développeurs déplaceront l'ordre dans lequel jQuery est chargé plus bas dans la page, généralement dans le pied de page..
Bien que le chargement de JavaScript dans le pied de page soit encouragé par un certain nombre de sites de premier plan, cela revient à penser à WordPress, de manière globale, en tant que fondement du développement d'applications..
Si WordPress, par défaut, charge jQuery à un emplacement donné, nous devons nous rappeler de le laisser là car tous les travaux construits sur l'application sont dépendants du fait qu'il se trouve à cet emplacement et nulle part ailleurs..
Bien que jQuery puisse être préparé de différentes manières pour préparer vos fichiers source JavaScript, il existe un moyen que j'ai tendance à suivre car il protège et encapsule complètement le $ une fonction.
(function ($) "use strict"; $ (function () // Votre code ici); (jQuery));
Vous pouvez également voir le GistHub gist ici.
En bref:
Ceci fournit une version correctement chargée de jQuery qui utilise la norme
$référence de fonction pour nous permettre de continuer notre travail.
Notez que le "utiliser strict"déclaration fournit ce qui suit:
Le mode strict est une nouvelle fonctionnalité d'ECMAScript 5 qui vous permet de placer un programme ou une fonction dans un contexte d'exploitation «strict». Ce contexte strict empêche de prendre certaines actions et génère plus d'exceptions
Pour ceux qui sont intéressés, vous pouvez en lire plus sur ce site..
Enfin, le réel document.ready la fonction est facultative. Ici, il est simplement utilisé pour montrer comment vous pouvez commencer à utiliser les fonctions jQuery standard dans le contexte du code..
Notez que la prochaine version de WordPress prévoit d’être livrée avec un correctif qui rendra cette discussion obsolète, du moins en ce qui concerne le tableau de bord..
Plus précisément, il existe actuellement un ticket dans Trac dans lequel WordPress ne nous permettra pas de supprimer jQuery du tableau de bord. C'est une bonne chose.
En bref, les principaux points à retenir pour cet article sont les suivants:
Accentsconagua
$ fonctionne en utilisant les fonctionnalités JavaScript appropriéesJe dirais que faire autre chose, c'est se préparer à des résultats potentiellement mauvais.
