Faire le thème WordPress parfait Comment bien coder

Dans la partie précédente de cette série; nous avons étudié différentes API WordPress dont nous devrions nous familiariser, nous avons parlé de l’importance de rendre un thème traduisible (ou mieux, en les publiant déjà traduites dans d’autres langues) et avons compris le concept de licence de thèmes et d’utilisation de produits sous licence associés aux thèmes..

Dans cet article, nous allons nous concentrer sur le code: nous verrons comment coder avec les normes de codage WordPress, comment commenter correctement notre code et comment valider et tester le thème..

Normes de codage WordPress

Oui, je sais, vous avez votre propre style de codage préféré: vous aimez compresser une grande fonction avec une seule ligne de code, vous n'aimez pas beaucoup les espaces - Ah, j'étais une fois juste comme ça.

Mais si vous allez développer pour d'autres personnes et littéralement vendre votre code, vous devez rendre votre code compréhensible. Et même si vous pensez que votre code est "assez clair", il existe des normes universelles pour aider tous les internautes à coder avec le même style, ainsi que tous les marchés et centres de téléchargement de thèmes sérieux (de WordPress.org à ThemeForest). exiger vous coder avec des normes.

Pour développer des thèmes WordPress, quatre principaux langages de programmation et de balisage sont nécessaires: HTML, CSS, JavaScript et bien sûr, PHP. Regardons chacun:

Normes HTML

Il existe des règles relativement simples pour l'écriture de code HTML conforme aux normes:

Validez votre code avec W3C. Toujours. Nous y viendrons plus tard.
Soyez prudent avec les éléments à fermeture automatique: vous devez terminer l'élément par un espace, une barre oblique et le signe "supérieur à".
Lors de la saisie des valeurs d'attributs, tapez-les toutes en minuscules - sauf si c'est pour l'homme.
Toujours envelopper vos valeurs d'attribut avec des guillemets. Les guillemets simples et doubles sont acceptables.
L'indentation doit être logique et lisible. Le code PHP mélangé au HTML ne devrait pas être une exception.

Consultez la page des normes HTML de WordPress sur Make WordPress pour plus d'informations..

Normes CSS

La liste est un peu plus longue, mais encore une fois, il existe des règles simples pour un codage CSS correct:

Les propriétés doivent être en retrait avec des onglets.
Vous pouvez grouper les sélecteurs, mais chaque sélecteur doit avoir sa propre ligne pour plus de lisibilité..
Nommez tous vos classe et identifiant sélecteurs avec des lettres minuscules et n'oubliez pas de séparer les mots avec des traits d'union.
Utiliser des sélecteurs lisibles. .c6 n'est pas un bon nom - nommez-le .sixième colonne!
Pas de surqualification. div.column n'a pas de sens quand vous pouvez simplement utiliser .colonne.
Les propriétés et leurs valeurs doivent également être en minuscules, à l'exception des noms de police et des propriétés propres au fournisseur..
La commande pour les propriétés doit être "affichage, positionnement, modèle de boîte, couleurs, typographie et autres".
Vous devez également commander les préfixes du fournisseur au plus long (-webkit-) au plus court (sans préfixe).
Gardez vos requêtes média au bas de votre feuille de style.
Commentez votre code CSS lorsque vous commentez en PHP. Plus sur cela plus tard.

Voir la page des normes CSS de WordPress à Make WordPress pour une explication plus détaillée..

Normes JavaScript

Puisque de nos jours le JavaScript devient crucial pour de nombreux thèmes WordPress, nous avons également besoin de normes et de règles:

Les accolades peuvent ne pas ouvrir et fermer dans la même ligne.
Préférez les guillemets simples aux guillemets doubles, sauf si une chaîne contient des guillemets simples.
Vous êtes libre d'utiliser des espaces à votre guise dans votre code - n'utilisez pas d'espaces sur des lignes vides, cependant. Et n'oubliez pas que vous utilisez des espaces pour la lisibilité - pas pour le plaisir.
Nommez vos fonctions et variables en utilisant affaire de chameau, not_with_underscores. Les constructeurs doivent être en TitleCase.
Vous pouvez déclarer plusieurs variables sur une seule ligne. mais si vous voulez attribuer des valeurs, vous aurez besoin de lignes séparées.
le new Array () et nouvel objet () les notations sont "non-non" s. Utilisez des équivalents abrégés ([] et ) au lieu.
Traiter les conditionnels et les boucles très délicatement - ils sont généralement les plus faciles à lire mal. L’utilisation d’accolades et d’espaces en est la clé.
Si vous allez utiliser jQuery; Définissez une fonction anonyme et passez jQuery comme argument avant de faire autre chose. Vérifiez l'exemple pour vous assurer.

La page des normes JavaScript de WordPress située sur Make WordPress contient davantage d'informations, signet cette page et l'utiliser.

Normes PHP:

C'est la partie la plus difficile. Il y a des tonnes de règles à considérer:

Conventions de nommage
Guillemets simples et doubles
Utilisation des espaces
Expressions régulières
"Conditions de Yoda"
Invité spécial star SQL et requêtes de mise en forme de la base de données

Si vous ne savez pas ce qu’ils sont, alors peut-être que votre meilleur moyen est de marcher légèrement.

Il existe deux ressources géniales pour vous apprendre, cependant:

WordPress page des normes PHP sur Make WordPress
La série Wptuts + intitulée "Les normes de codage WordPress" par Tom McFarlin

Commenter correctement votre code

Pour que les autres développeurs comprennent comment vous avez créé votre thème, vous devez le rendre clair et lisible, ce qui nécessite de commenter votre code..

La meilleure pratique pour PHP consiste à utiliser PHPDoc, le style de documentation de phpDocumentor. Il est largement utilisé par les développeurs WordPress et recommandé dans la page des normes de la documentation PHP de Make WordPress. Il fournit un style de documentation propre pour votre code PHP.

En ce qui concerne les CSS, la page des normes CSS de WordPress sur Make WordPress vous recommande de le faire comme PHPDoc, avec quelques autres suggestions..

En ce qui concerne votre code HTML et JavaScript, il semble qu’il n’y ait pas de moyen recommandé ou obligatoire de commenter votre code, mais cela ne signifie pas que vous n’avez rien à faire: essayez d’être aussi clair que possible avec votre code et de fournir petites informations en commentant où que vous soyez nécessaire.

Valider et tester le thème

Le thème fonctionne peut-être comme un site Web soigné dans votre tête, mais nous espérons que des centaines (voire des milliers) de personnes apprendront à utiliser votre thème et s’assureront qu’elles essaieront de créer des sites Web auxquels vous ne pouvez penser. de. De plus, il existe des exigences pour les marchés à thèmes et les répertoires de thèmes pour que vous puissiez rassembler votre thème..

C'est pourquoi vous devez tester votre thème et valider votre code. J'ai trois idées pour ça:

Validez votre code HTML et CSS avec les validateurs du W3C

La première chose à faire est de valider votre code avec les services de validation du W3C. Les services HTML Markup Validator et CSS Validator sont utilisés et développés depuis des années et sont les meilleurs services de validation disponibles..

Après avoir effectué les deux opérations ci-dessous, vérifiez simplement les pages de démonstration avec ces deux services pour vous assurer qu'il n'y a pas d'erreurs ou d'avertissements..

Utilisez le plugin "Developer" pour corriger votre thème

Developer est un plugin gratuit développé par Automattic qui, dans leurs mots, aider les développeurs WordPress à développer. Il s’agit en réalité d’un programme d’installation de plugins: le plugin a pour objectif principal de fournir les plugins indispensables à votre environnement de développement..

Le développeur suggère 16 plugins différents. Certains facilitent grandement votre processus de développement (comme le changement d’utilisateur et le test de thème), mais vous aident également à déboguer votre thème (comme les notifications de journal obsolètes et la vérification de thème)..

Ceux que je trouve les plus utiles sont la vérification du thème, le test de thème et la barre de débogage, mais les 16 plug-ins offrent d'excellentes fonctionnalités. Je vous suggère de les installer tous pour tester le thème de votre thème.

Testez votre thème avec des données de test

Vous ne pouvez pas simplement coder le thème et dire qu'il est terminé - vous devez le tester avec du contenu. Vous pouvez créer votre propre contenu, mais vous devriez envisager de tester avec certaines "données de test":

Utilisez les exemples de données WordPress. Cet exemple de données contient certains des types de contenu les plus utilisés et vous aidera à remarquer les lacunes de votre thème par rapport au contenu que vous avez oublié de prendre en compte..
Utilisez plus complet données de test. WPTest.io est un petit site Web avec un effrayant collection d'échantillons de contenu WordPress. Je ne plaisante pas: parmi les éléments de menu allant jusqu'à 10 niveaux et intégrant Amazon Store, il s'agit des données de test les plus exhaustives que j'ai jamais vues. Je n'ai jamais testé de thème avec cet exemple de contenu, mais si vous parvenez à faire en sorte que votre thème fonctionne avec ces données, vous n'avez probablement pas à vous soucier de l'apparence terne de votre thème..

Le seul inconvénient de ces deux tests est que vous ne pourrez pas tester votre contenu avec des codes abrégés ou le type de contenu spécifique que vous aviez en tête lors du développement du thème. Je vous suggère de tester le thème avec au moins les exemples de données WordPress, puis de créer votre propre contenu. Après tout, vous allez avoir besoin de contenu solide lorsque vous créez le site Web de démonstration pour votre thème..

Emballer

Dans cet article; nous avons suivi le processus de codage et de commentaire corrects avec certaines normes, puis nous avons vu comment valider notre code et tester notre thème. Dans la prochaine partie de la série, nous examinerons quelques mauvaises pratiques.

Restez à l'écoute et n'oubliez pas de partager l'article, si vous l'avez aimé.!

Code