Share
WordPress devenant de plus en plus populaire, une quantité énorme de code est générée par les utilisateurs, les agences et les marchés. Je travaille avec WordPress depuis longtemps et je suis étonné du nombre de développeurs qui font les mêmes erreurs encore et encore..
Je vais passer en revue certaines des erreurs de développement les plus courantes et expliquer comment vous pouvez les résoudre facilement, et améliorer le code à l'avenir.!
Si vous effectuez une recherche Google pour "WordPress", vous obtenez 1,9 milliard de résultats. Il existe des millions de sites avec des exemples de code, des didacticiels et des extraits de code très utiles en tant que développeur WordPress. Le problème est 2 fois:
Donc, en tant que nouveau développeur WordPress, vous effectuez une recherche Google, trouvez un article, copiez et collez le code et tout fonctionne! Génial, vous vous dites et vous vous souvenez du code ou enregistrez-le en signet. Le gros problème ici est que le code n'est peut-être pas parfait, mais vous êtes nouveau et vous ne le remarquerez pas. Comme cela fonctionne, vous pouvez simplement continuer à l'utiliser pour toujours.
Commençons par comment éviter certaines erreurs courantes!
WordPress admet lui-même que certaines parties de la structure de code WordPress pour le balisage PHP sont incohérentes dans leur style (leurs mots exacts). Ils travaillent pour nettoyer le code et le rendre cohérent et ont établi une norme pour TOUS le code WordPress. Peu importe qu'il s'agisse d'un plugin ou d'un thème, ils doivent tous suivre les mêmes normes..
Normes de codage WordPress
Si vous n'avez jamais lu cette page auparavant lis le! Cela devrait être l’un des premiers endroits où un développeur travaille avec des visites WordPress. Je ne vais pas passer en revue les points ici, mais vous devriez prendre le temps de lire et de le lire.
Je suis moi-même coupable d'avoir enfreint deux de ces règles, mais la vraie clé est la cohérence. La seule règle que je casse, je casse tout le temps. Personnellement, quand il s'agit de si Je préfère utiliser la syntaxe alternative pour les structures de contrôle. Pour moi, ils sont plus faciles à lire. En étant cohérent tout au long de mon code, au moins les gens peuvent voir instantanément que je fais quelque chose de différent et me suivre dans mon code.
Rappelles toi: La cohérence et les normes de codage contribuent vraiment à améliorer l'apparence et la lecture de votre code!
Dans la section précédente, nous avons examiné les normes de codage WordPress. Ce document se trouve dans la ressource de développement la plus utile pour les développeurs WordPress. Le codex WordPress. Disponible dans près de 50 langues, le Codex est la bible du développeur. Il contient de la documentation sur presque toutes les fonctions, classes et variables de WordPress, comment les utiliser et des exemples de code. J'ai habituellement 3 ou 4 onglets ouverts sur le codex à la fois, en fait au moment où j'en ai 4 ouverts! Que vous soyez nouveau sur WordPress ou que vous travailliez avec cela depuis des années, la documentation est inestimable..
La beauté du Codex est qu’il s’agit d’une communauté vivante et vivante pour la documentation. Vous pouvez apporter vos propres connaissances pour améliorer ou ajouter une page si elle manque, rappelez-vous simplement que si vous ajoutez du code pour suivre les normes de codage WordPress!
Mon plus gros conseil pour le Codex est de chercher! Comme avec tout site basé sur Wiki, la navigation est un peu délicate et n'a pas nécessairement de sens au début. La recherche intégrée devrait vous aider à trouver ce que vous cherchez. Si vous avez du mal à trouver ce que vous cherchez, puis passez au canal IRC #WordPress, il y a généralement quelques personnes qui vous dirigeront vers la bonne page du Codex..
Nous connaissons maintenant les normes de codage et où trouver la bonne documentation et l’aide, examinons certains de vos codes..
Bonjour
L'extrait ci-dessus est typique des premières lignes de la plupart des thèmes WordPress, mais ne devrait pas l'être. Les scripts et les styles peuvent être gérés beaucoup mieux avec WordPress et ils nous offrent de superbes fonctions pour travailler avec eux. Maintenant, je parle ici de thèmes, mais tout plugin qui a besoin de scripts ou de styles doit faire les choses exactement de la même manière. Présentation wp_enqueue_style () et wp_enqueue_script ()! Si vous ne savez pas ce que font ces fonctions, nous devons résoudre ce problème! Passons en revue ce que vous devez faire.
Que ce soit un script ou un style, la meilleure chose à faire est de le signaler à WordPress. Nous faisons cela en utilisant wp_register_script () ou wp_register_style (). Ce sont les deux moyens sûrs d’enregistrer un script ou un style avec WordPress afin que vous puissiez les utiliser plus tard. Maintenant, cette fonction n’affiche rien sur votre thème ou votre site, elle prépare simplement WordPress à les utiliser..
$ handle (Champs obligatoires) C'est votre nom de la feuille de style ou du script. Cela peut être ce que vous voulez tant que c'est unique. Vous pouvez toujours préfixer le nom pour éviter les conflits.
$ src (Champs obligatoires) C'est l'URL de la feuille de style ou du script. Cela peut être externe ou interne à votre site, selon ce que vous faites. Externe est utile si vous utilisez un service de polices tiers, tel que Type Kit ou Google Fonts, ou pour les réseaux sociaux Javascript. Vous devriez jamais coder en dur l'URL pour les feuilles de style ou les scripts locaux, il existe des fonctions appropriées que vous pouvez utiliser pour cela et que nous discuterons plus tard.
$ deps (Optionnel) C’est très utile bien que ce soit optionnel. Cela vous permet de spécifier un tableau de dépendances pour votre script ou votre feuille de style. Il s'assurera également que ces dépendances sont chargées avant que votre script ou votre style.
$ ver (Optionnel) Ici, vous pouvez spécifier le numéro de version du script ou du style, s'il en a un. Ceci est utile pour s'assurer que la version correcte est envoyée au navigateur de l'utilisateur, indépendamment de la mise en cache. Bien sûr, vous pouvez définir vos propres numéros de version pour vos propres scripts et styles ou utiliser un petit truc sympa pour obtenir des numéros de version dynamiques..
$ in_footer (Facultatif, script uniquement) Normalement, les scripts sont placés dans le Cependant, si vous définissez ce paramètre sur true, le script sera placé au bas de la . Si vous souhaitez afficher le pied de page, vous devez vous assurer que votre thème a la wp_footer () accrocher au bon endroit.
$ media (Facultatif, style seulement) Cela peut être une chaîne pour spécifier le support pour lequel la feuille de style a été définie. (Par exemple. 'tout', 'écran', 'ordinateur de poche', 'impression').
Mettons tout cela ensemble dans un bel exemple:
Très brièvement, nous avons un code JavaScript que nous appelons à partir de notre dossier de thèmes. Il dépend de jQuery, est défini sur la version 1 et nous voulons effectuer une sortie à la fin de notre page. Nous avons aussi notre style.css que nous appelons depuis notre dossier de thèmes, il n’a pas de dépendances, est la version 1.0 et est pour l’écran. Il est également important de garder à l'esprit qu'il est nécessaire d'exécuter ces scripts à l'aide d'un hook d'action. Dans ce cas, nous utilisons wp_enqueue_scripts comme notre crochet d'action tel que recommandé par le Codex.
C'est très facile une fois que vous maîtrisez le sujet et prenez l'habitude de le faire.!
Maintenant que nous avons enregistré nos scripts et styles, WordPress est au courant de tout et nous pouvons maintenant commencer à les utiliser. Revenons à notre wp_enqueue_script () et wp_enqueue_style () nous pouvons maintenant mettre en file d'attente les styles et les scripts que nous avons enregistrés à l'étape précédente. Le script de mise en file d'attente et les fonctions de style fonctionnent de manière très similaire aux fonctions de registre. La grande différence est que WordPress affichera maintenant le code JavaScript ou le style sur la page générée..
Parce que nous avons déjà enregistré nos scripts et que les styles, les mettre en file d'attente est extrêmement simple. La beauté de ceci est que nous pouvons conditionnellement mettre en file d'attente nos scripts et nos styles afin de ne les charger que sur les pages dont ils ont besoin. De plus, comme ils sont appelés dans le même crochet d’action, vous pouvez les faire tous dans une même fonction. Regardez l'exemple ci-dessous:
Nous avons donc enregistré nos styles et nos scripts de la bonne manière et les avons mis en file d'attente. Nous avons également un script et un style mis en file d'attente uniquement sur notre page d'accueil à l'aide d'une instruction conditionnelle..
C’est un exemple parfait de l’une des plus grandes erreurs que je constate lorsque je regarde des thèmes ou des plugins écrits par d’autres. En apprenant quelques fonctions simples de WordPress, vous pouvez charger vos styles et vos scripts en toute sécurité et vous assurer que toutes les dépendances sont en place. De plus, si une personne utilise un plug-in que vous avez écrit, il est facile pour elle d'apporter des modifications sans qu'elle soit effacée par les mises à jour. Tout ce qu’ils ont à faire est de copier votre CSS sur leur thème. Ils peuvent annuler l’enregistrement de votre style et enregistrer le leur.!
Vous pouvez voir un tutoriel complet sur l'utilisation de ces fonctions au bas de ce tutoriel..
Si vous avez déjà mis cela dans votre thème, plugin ou quoi que ce soit avec WordPress, vous venez de tuer un chaton. Nous avons déjà discuté de l’importance de l’enregistrement et de la mise en file d'attente de vos scripts et de vos styles, alors pourquoi annuler tout votre travail. WordPress est livré avec des charges de scripts que vous pouvez utiliser simplement en les mettant en file d'attente. Bien sûr, vous pouvez, même si vous faites les choses correctement, vous pouvez annuler l’enregistrement de la version fournie d’un script et enregistrer votre propre version. Comme ci-dessus, nous souhaitons peut-être utiliser la version de Google CDN. C'est bien si vous travaillez sur votre propre site, votre propre thème privé ou plugin et que vous n'allez pas le publier. Cependant, si vous publiez publiquement votre code s'en tenir aux bibliothèques incluses. D'autres plugins peuvent casser, les thèmes peuvent ne plus fonctionner car tous ne suivent pas les règles. Je trouve souvent des sites avec 3 ou 4 versions différentes de jQuery chargés simplement parce que les gens ne s'enregistrent pas et ne se mettent pas correctement en file d'attente ou qu'un auteur de plug-in veut utiliser une version différente de quelque chose.
Faisons-nous une faveur et suivons certaines normes!
Attention: Les plugins ou les thèmes utilisant une bibliothèque non intégrée seront refusés s'ils sont soumis à la fois à ThemeForest et au référentiel WordPress.org.!
Maintenant, il est également important de parler brièvement de jQuery. C'est énorme, tout le monde l'utilise, les thèmes l'adorent et les plugins l'adorent. Cependant, cela peut causer des problèmes s’il n’est pas utilisé correctement. La bibliothèque jQuery fournie avec WordPress se charge en mode "sans conflit". Cela lui permet de fonctionner aux côtés des autres bibliothèques que WordPress peut utiliser. Cependant, en mode sans conflit, le $ raccourci ne fonctionne pas et a été remplacé par le légèrement plus long jQuery.
$ (document) .ready (function () $ (# myfuntion)…);
Ce qui précède doit être réécrit pour fonctionner. Le moyen le plus simple consiste à utiliser le wrapper suivant:
jQuery (document) .ready (function ($) $ (# myfunction) // // $ () fonctionne maintenant comme un alias pour jQuery () dans cette fonction!);
Le problème avec le chargement d’une version externe de jQuery est qu’elle ne peut pas être chargée en mode sans conflit, elle peut casser d’autres scripts et l’auteur peut avoir écrit du JavaScript sans suivre les règles ci-dessus. Cela signifie que tout se brise lorsque vous essayez d'utiliser la version fournie de jQuery! Essayez toujours d'utiliser les bibliothèques fournies et écrivez toujours votre JavaScript / jQuery en mode sans conflit!
Vous pouvez obtenir plus d'informations sur WordPress et jQuery dans la page Codex.
Comment obtenez-vous votre chemin de répertoire de thème? Comment dirigez-vous les gens vers la page d'accueil du site? Beaucoup de développeurs ne savent toujours pas comment faire certaines choses de base avec WordPress. Je vais sortir quelques-uns des plus courants.
Accentsconagua
TEMPLATEPATH ou bloginfo ('template_directory'). Arrêtez! Vous devriez utiliser le très utile get_template_directory () comme on le voit dans mes exemples ci-dessus. Il existe actuellement 4 variantes de cette fonction:
get_template_directory () renvoie le PATH dans votre dossier de thème. Utile pour une utilisation dans les fonctions ou les inclusions de PHP.get_template_directory_uri () renvoie l'URL dans votre dossier de thème. Utile pour mettre en file d'attente et enregistrer vos scripts et vos styles et si vous souhaitez inclure une image.get_stylesheet_directory () renvoie le PATH dans le dossier de la feuille de style. Cela indiquera toujours le thème Enfant, le cas échéant, alors que get_template_directory () pointera toujours sur le thème parent.get_stylesheet_directory_uri () renvoie l'URL du dossier de la feuille de style. Comme dans ce qui précède, cela indiquera toujours le thème de l’enfant, le cas échéant..Assurez-vous d'utiliser la bonne fonction. Si vous attendez des utilisateurs qu'ils remplacent votre thème dans un thème enfant, il est préférable d'utiliser la fonction appropriée..
plugin_dir_url () renvoie l'URL du fichier de plugin transmis.plugin_dir_path () renvoie le chemin du répertoire du fichier de plugin transmis.Avec les plugins, il m'est toujours plus facile de définir une constante dès le début et de l'utiliser dans tout mon plugin.
bloginfo (). L'exemple ci-dessous donne un exemple très basique de la façon de le faire correctement.. "> Ceci est un lien vers notre page d'accueil
Si vous avez des doutes sur quelque chose, lisez le Codex, cela vous aidera vraiment! En utilisant les fonctions appropriées pour vous déplacer dans WordPress, vous augmentez considérablement les chances que votre plugin ou votre thème ne se heurte pas ou n'interfère pas avec le code des autres. Il n’ya rien de plus frustrant que d’essayer de résoudre un bogue dans votre propre code pour découvrir que c’est un autre plugin qui dérange tout le reste.!
Cela a été un sujet de discussion parmi la communauté pendant des siècles. Dois-je intégrer mes fonctionnalités dans mon thème ou dans un plugin? Je trouve toujours que la réponse simple est la suivante: votre fonctionnalité fonctionnera-t-elle si vous utilisiez un thème différent? Ce que je veux dire par là, c’est que si vous ajoutez des fonctionnalités supplémentaires, par exemple un type de publication personnalisé ou un effet lightbox personnalisé pour les images, cela fonctionnera-t-il avec n’importe quel thème ou avec tout autre thème? Il n'y a rien de pire que de passer du temps à configurer un site avec une multitude de types de publications personnalisés, à ajouter du contenu uniquement pour vous permettre de changer de thème. Tout cela disparaît..
Je suis généralement cette règle simple, si cela peut être un plugin en faire un. Les thèmes sont destinés à traiter spécifiquement du style visuel d'un site et non de ses fonctionnalités. Les plugins sont pour la fonctionnalité. Désormais, si votre plug-in génère quelque chose, comme la plupart d'entre eux, vous pouvez facilement vérifier si votre thème actif contient les fichiers de modèle requis et revenir aux fichiers de modèle de votre plug-in si besoin est. En fait, dans la plupart des cas, mes plugins sont comme ça. Au moins, vous donnez à l'utilisateur la possibilité de modifier son apparence sans perdre ses modifications si vous publiez une mise à jour. Je vais essayer de couvrir cela dans un prochain tutoriel, mais la leçon à suivre est de rester simple. Casser votre fonctionnalité en de beaux morceaux donne la possibilité à l’utilisateur, s’ils n’aiment pas vos boutons de partage social, de les laisser les désactiver ou les remplacer par les leurs. Plus de plugins, pages d'options de thème moins compliquées!
C’est un autre point que je voulais aborder très brièvement car je sais qu’il existe d'excellents tutoriels sur les actions et les filtres (l'un d'entre eux est lié au bas de la page pour vous). Quel que soit votre type de développement WordPress, découvrez Actions et Filtres. C’est l’une des plus grandes erreurs que je vois commettre. WordPress possède une excellente API pour le développement de thèmes et de plugins et vous pouvez améliorer considérablement votre développement en utilisant les outils mis à votre disposition par WordPress. Les meilleurs plug-ins utilisent largement les actions et les filtres. Si vous souhaitez personnaliser la façon dont cela fonctionne pour vous, rien de plus simple..
WooCommerce de WooThemes en est un exemple. Maintenant, même si je ne suis pas un fan des énormes panneaux d'options de thème qu'ils ont mis dans leurs thèmes, WooCommerce a été conçu pour les autres développeurs. Presque tout peut être personnalisé ou remplacé en supprimant simplement des actions ou en les remplaçant. Leur référence d'action et de filtre est vaste et vous permet vraiment de travailler à vos côtés, exactement comme vous le souhaitez. Maintenant, je ne m'attends pas à ce que vous alliez dans cette mesure pour vos propres projets, mais nous pouvons tirer d'importantes leçons ici. Si votre code est facile à personnaliser sans le pirater, il est plus probable que les utilisateurs l'utilisent, révisez-le et recommandez-le.!
Les actions et les filtres sont l’une des choses les plus importantes à apprendre sur le développement de WordPress. Prenez du temps et vous y arriverez.!
Nous avons beaucoup couvert dans cet article et j'espère que c'était utile. Je veux juste décomposer encore plus loin pour vous:
Lorsque vous copiez et collez le code trouvé sur Google, prenez une minute pour l'examiner, comprenez-le et essayez de lui appliquer ce qui précède. Est-ce qu'il respecte les normes de codage? Est-ce qu'il utilise les bonnes fonctions? Qu'est-ce que jQuery fait? Vous n'êtes qu'à 1 thème ou plugin de tous ces points qui deviennent une seconde nature. La prochaine fois que vous verrez une erreur, essayez de la réparer.!
Articles Similaires