Comprendre l'importance des normes de codage
Les normes de codage sont comme les règles de grammaire de la programmation. Tout comme une grammaire correcte rend le langage écrit clair et compréhensible, les normes de codage rendent votre code cohérent et lisible.
- Pour vous: Il vous sera plus facile de lire et de mettre à jour votre code à l'avenir.
- Pour les autres: Si vous partagez votre code ou travaillez en équipe, les autres apprécieront la clarté.
- Pour WordPress: Comme il s'agit d'un logiciel libre, de nombreuses personnes y contribuent. Les normes permettent d'unifier l'ensemble.
Application concrète des normes de codage dans le travail d'équipe
Imaginez que vous travaillez sur un projet WordPress au sein d'une grande équipe. Chacun contribue à différentes parties du code - certains se concentrent sur le backend, d'autres sur le style et d'autres encore sur l'accessibilité. Sans normes cohérentes, le projet peut rapidement devenir chaotique. Les normes de codage garantissent que :
- Collaboration harmonieuse: Lorsque tout le monde suit les mêmes règles, il est plus facile pour les développeurs de lire et de comprendre le travail des autres.
- Moins de conflits de fusion: Une mise en forme incohérente entraîne souvent des conflits de code lors de la fusion des modifications. Les normes minimisent ces conflits et permettent à l'équipe de travailler plus efficacement.
- Meilleur accueil: Les nouveaux développeurs qui rejoignent le projet peuvent rapidement se mettre au diapason en suivant un style de codage standardisé, ce qui réduit le temps consacré à la compréhension du code existant.
Imaginez qu'un développeur quitte le projet et qu'un nouveau membre de l'équipe doive le remplacer. Si le développeur précédent a respecté les normes de codage appropriées, le nouveau membre peut intervenir rapidement, maintenir le code et y apporter des améliorations sans avoir besoin de beaucoup de temps pour le comprendre.
WordPress Normes de codage PHP
PHP est le langage de base de WordPress. Le respect des normes de codage PHP garantit que votre code s'intègre parfaitement à WordPress et qu'il est facile à comprendre.
1. balises PHP : Utilisez toujours les balises PHP complètes <?php ?>
. Évitez les balises courtes comme <? ?>
car ils peuvent ne pas fonctionner sur tous les serveurs.
<?php
// Your PHP code here
?>
2. encodage des fichiers : Enregistrez vos fichiers PHP en UTF-8 sans marque d'ordre des octets (BOM).
3. fin de ligne : Utilisez des fins de ligne de style Unix (\n
).
4. indentation : Utilisez les tabulations pour l'indentation (et non les espaces). Cela permet d'assurer la cohérence du code entre les différents éditeurs.
Conventions d'appellation
1. fonctions et méthodes : Utilisez des lettres minuscules et des caractères de soulignement.
function get_user_data( $user_id ) {
// Code de la fonction
}
2. les variables : Identiques aux fonctions - minuscules et caractères de soulignement.
$user_name = 'John Doe' ;
3.Classes : Utilisez des mots en majuscules (StudlyCaps).
class UserProfile {
// Code de la classe
}
4. constantes : Toutes les lettres majuscules et les caractères de soulignement.
define('MAX_UPLOAD_SIZE', 1048576 ) ;
Espaces blancs et indentation
1) Espaces après les virgules : Lorsque vous énumérez des paramètres ou des éléments de tableau, ajoutez un espace après chaque virgule.
$colors = array('red', 'green', 'blue' ) ;
2. structures de contrôle : Placez un espace entre les mots-clés de contrôle et la parenthèse ouvrante.
if ( $condition ) {
// Code
}
3. opérateurs : Incluez des espaces autour des opérateurs d'affectation, de comparaison et logiques.
$total = $price + $ax ;
if ( $total > 100 ) {
// Code
}
Structures de contrôle
1) Placement des accolades : Utilisez le style Allman, où l'accolade d'ouverture se trouve sur une nouvelle ligne.
if ( $condition )
{
// Code
}
else
{
// Code
}
2.elseif
** Mot clé** : Utilisation elseif
au lieu de sinon si
.
if ( $condition )
{
// Code
}
elseif ( $other_condition )
{
// Code
}
3. les conditions Yoda : Placez la constante ou le littéral à gauche des comparaisons.
if ( true === $is_active )
{
// Code
}
Cela permet d'éviter une affectation accidentelle (=
au lieu de ==
).
Meilleures pratiques
1. évitez les balises PHP abrégées : Utilisez toujours les balises complètes pour une meilleure compatibilité.
2.Arguments de fonction : Utilisez des noms de variables clairs et descriptifs.
function calculate_total( $subtotal, $ax_rate ) {
// Code
}
3. assainir les entrées : Vérifiez toujours les entrées des utilisateurs et validez-les.
$user_id = intval( $_GET['user_id'] ) ;
4) Échapper aux sorties : Avant de sortir des données, échappez-les pour éviter les problèmes de sécurité.
echo esc_html( $user_name ) ;
5.Commentaires : Utilisez les commentaires pour expliquer une logique complexe ou des remarques importantes.
// Calculer le prix total avec les taxes
Normes de documentation en ligne
Une documentation appropriée facilite la compréhension et la maintenance de votre code.
1. commentaires sur les fonctions : Chaque fonction est précédée d'un bloc de commentaires.
/**
* Calcule le prix total TTC.
*
* @param float $subtotal Le montant du sous-total.
* @param float $tax_rate Le taux d'imposition sous forme décimale.
* @return float Le prix total.
*/
function calculate_total( $subtotal, $tax_rate ) {
// Code de la fonction
}
2. les types de paramètres et de valeurs de retour : Indiquez le type de chaque paramètre et la valeur de retour.
3. les commentaires en ligne : Utilisez-les avec parcimonie pour expliquer les parties complexes de votre code.
$discount = 0.0 ; // Initialisation de la variable discount
Normes de codage HTML dans WordPress
Le langage HTML est l'épine dorsale du contenu web. L'écriture d'un code HTML propre et sémantique est cruciale pour l'accessibilité et le référencement.
Lignes directrices générales
1. Doctype : Commencez toujours par le doctype HTML5.
<!DOCTYPE html>
2. l'attribut Language : Spécifiez la langue dans l'attribut <html>
étiquette.
<html lang="en">
3. codage des caractères : Utilisez le codage UTF-8.
<meta charset="UTF-8">
Structurer votre HTML
1. éléments sémantiques : Utilisez les éléments sémantiques HTML5 tels que En-tête>
, ,
,
,
.
2. l'indentation : Utilisez deux espaces (ou des tabulations si vous préférez) pour indenter les éléments imbriqués.
- Item 1
- Item 2
3.Attributs : Utilisez des minuscules pour les noms d'attributs et mettez les valeurs d'attributs entre guillemets.
<img src="image.jpg" alt="Une photo impressionnante">
Meilleures pratiques
1. l'accessibilité : Incluez toujours alt
pour les images et utiliser les rôles ARIA le cas échéant.
<img src="logo.png" alt="Logo de l'entreprise">
2. les balises à fermeture automatique : Pour HTML5, vous n'avez pas besoin de fermer automatiquement les éléments void tels que <br>
, <img>
, <input>
.
<br>
<img src="image.jpg" alt="Description">
3. les commentaires : Utilisez des commentaires HTML pour expliquer des sections de votre code si nécessaire.
Normes de codage CSS dans WordPress
Les feuilles de style CSS contrôlent la présentation de votre site web. La rédaction d'une feuille de style CSS propre et efficace permet à votre site d'être agréable à regarder et de se charger plus rapidement.
Lignes directrices générales
1. syntaxe : Respectez la syntaxe CSS standard - sélecteur, accolades, paires propriété-valeur.
.class-selector {
propriété : valeur ;
}
2. indentation : Utilisez deux espaces (ou tabulations) pour l'indentation à l'intérieur des règles.
3. les commentaires : Utilisez les commentaires pour séparer les sections et expliquer les règles complexes.
/* Styles d'en-tête */
header {
/* Propriétés */
}
Écrire des feuilles de style CSS propres
1. noms des sélecteurs : Utilisez des lettres minuscules et des traits d'union.
.main-navigation {
/* Styles */
}
2. évitez les ID pour le style : Utilisez des classes au lieu d'identifiants pour limiter la spécificité.
/* Correct */
.button {
/* Styles */
}
/* A éviter */
#submit-button {
/* Styles */
}
3. les propriétés abrégées : Utilisez des propriétés abrégées dans la mesure du possible.
/* Correct */
marge : 10px 5px 15px 0 ;
/* Développé */
margin-top : 10px ;
margin-right : 5px ;
margin-bottom : 15px ;
marge-gauche : 0 ;
4. valeurs nulles : Omettre les unités pour les valeurs nulles.
padding : 0 ;
Meilleures pratiques
1. organiser les styles : Regroupez les styles apparentés, tels que la mise en page, la typographie et les couleurs.
2. les commentaires pour les sections : Utilisez des commentaires pour diviser votre feuille de style en sections.
/* Typographie / / Couleurs / / Mise en page */
3.Évitez !important : Utilisez la spécificité au lieu de la !important
pour remplacer les styles.
4. les requêtes de médias : Placez les requêtes de médias à proximité des styles associés ou dans une section distincte.
@media (max-width : 768px) {
.main-navigation {
display : none ;
}
}
Outils et plugins recommandés
Pour vous assurer que vous respectez les normes de codage de WordPress, envisagez d'utiliser les outils suivants :
- CodeSniffer PHP: Cet outil permet de détecter les violations des normes de codage PHP de WordPress. Vous pouvez l'utiliser avec le jeu de règles WordPress Coding Standards pour vérifier automatiquement votre code.
- EditorConfig: De nombreux IDE et éditeurs de code prennent en charge les fichiers .editorconfig, qui aident à maintenir des styles de codage cohérents entre différents éditeurs et développeurs.
- ESLint et Stylelint: Utilisez ces outils pour lester JavaScript et CSS afin de repérer les erreurs courantes et d'assurer la cohérence.
- Plus jolie: Un formateur de code qui peut automatiquement appliquer un style cohérent pour HTML, CSS et JavaScript, facilitant ainsi le maintien d'un style de code unifié pour les équipes.
- Extensions du VSCode:
- PHP Intelephense: Fournit une autocomplétion intelligente et des indications sur les fonctions, et détecte les problèmes potentiels.
- Extraits WordPress: Une collection de fonctions et de snippets WordPress couramment utilisés pour accélérer le développement.
Erreurs courantes à éviter
1. des noms incohérents : Le mélange de camelCase et de snake_case peut prêter à confusion. Respectez donc les conventions de dénomination prescrites tout au long de votre projet.
2.Ne pas échapper à la sortie : Échappez toujours le contenu généré par l'utilisateur avant de l'afficher pour éviter les failles de sécurité telles que XSS.
// Correct
echo esc_html( $user_input ) ;
// Incorrect
echo $user_input ;
3. mauvaise utilisation des globaux: Évitez d'utiliser des variables globales à moins que cela ne soit nécessaire. Au lieu de cela, passez les variables explicitement aux fonctions pour que votre code reste modulaire et plus accessible aux tests.
4.Utilisation des styles en ligne: Les styles en ligne doivent être évités, car ils compliquent la maintenance et le remplacement des feuilles de style CSS. Utilisez toujours des feuilles de style externes.
La mise en place de l'ensemble
Prenons un exemple qui combine PHP, HTML et CSS en suivant les normes de codage de WordPress.
Exemple : Un modèle PHP simple
Fichier PHP (template-example.php):
<?php
/**
* Template Name: Example Template
*
* A template to demonstrate coding standards.
*
* @package WordPress
* @subpackage Your_Theme
*/
get_header(); ?>
<main id="main-content" class="site-main">
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post(); ?>
<article id="post-<?php the_ID(); ?>" no numeric noise key 1006>
<header class="entry-header">
<?php the_title( '<h1>', '</h1>' ); ?>
</header>
<div class="entry-content">
<?php the_content(); ?>
</div>
</article>
<?php endwhile;
else : ?>
<p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'your-text-domain' ); ?></p>
<?php endif; ?>
</main>
<?php get_footer(); ?>
Fichier CSS (style.css
):
/* Styles de contenu principal */
.site-main {
margin : 0 auto ;
max-width : 800px ;
padding : 20px ;
}
.entry-header h1 {
font-size : 2em ;
margin-bottom : 0.5em ;
}
.entry-content {
line-height : 1.6 ;
}
Ressources complémentaires
- Manuel du développeur WordPress: developer.wordpress.org
- Documentation PHP: php.net
- Réseau des développeurs Mozilla (MDN) Documents Web:
- Service de validation des balises du W3C: validator.w3.org
- Normes de codage de WordPress:
Conclusion
Le respect des normes de codage de WordPress garantit que votre code est propre, cohérent et professionnel. Cela vous aide à maintenir vos projets et permet aux autres membres de la communauté WordPress de collaborer plus facilement avec vous.
Rappelez-vous :
- C'est en pratiquant qu'on devient parfait: Plus vous codifiez en suivant ces normes, plus cela deviendra naturel.
- Restez informé: Les normes de codage évoluent, alors gardez un œil sur la documentation officielle de WordPress.
- Demandez de l'aide: Si vous avez besoin d'éclaircissements, la communauté WordPress est amicale et prête à vous aider.
Bon codage !
Réponses