Le blog.

Développer son « instinct thème » WordPress.

Dans cette première étape de notre guide sur la création de thèmes WordPress, expliquons comment faire naître et aiguiser votre instinct de développeur de thème.

Avec quelques bonnes pratiques et en restant à l’écoute de certaines choses, vous adopterez l’attitude idéale pour créer des thèmes durables, sécurisés et à la pointe des techniques proposées par l’incroyable CMS qu’est WordPress.

Cet article fait partie d’une série d’articles issus de l’excellent site ThemeShaper.com. Leur tutoriel (The ThemeShaper WordPress Theme Tutorial: 2nd Edition) est une excellente référence pour apprendre à créer un thème WordPress. Ceci en est la traduction — accompagnée de quelques évolutions. Merci à ThemeShaper pour la rédaction du tutoriel d’origine et l’autorisation qu’ils m’ont donnée pour sa traduction.

Qu’est-ce que « l’instinct thème » ?

Avoir "l'instinct thème" pour créer un template WordPress

« L’instinct thème », ou Theme Sense en anglais, est une compréhension intuitive des thèmes WordPress : la relation des fichiers qui constituent un thème et comment ces fichiers s’intègrent avec le cœur de WordPress. Nous espèrons que vous posséderez votre nouvel instinct de thème à la fin de ce tutoriel.

« L’instinct thème », ce n’est pas apprendre bêtement du code

Prenons le temps de réfléchir un peu aux mathématiques et à l’instinct « chiffres » que l’on apprend très jeune. Si vous forcez un enfant à apprendre par cœur des faits arithmétiques avec des « cartes à mémoriser », sans expliquer le pourquoi du comment des bonnes réponses, l’enfant sera dans l’impossibilité de résoudre une équation qu’il n’a encore jamais rencontrée — car il ne l’aura pas mémorisée.

Comprendre la théorie des blocs d'un thème WordPress

En étant capable de démontrer, par exemple, que 5+2 font 7 en utilisant des blocs, l’enfant pourra visualiser comment les nombres fonctionnent et ce qu’ils impliquent réellement derrière leur représentation.

L’instinct de thème fonctionne de la même manière. Il est primordial de se concentrer sur le concept général illustré derrière un simple bout de code, plutôt que d’essayer de mémoriser une succession de bouts de code indigestes.

C’est bien beau tout ça, mais…

Comment faire naître mon instinct de développeur de thème WordPress ?

Si vous avec lu jusqu’ici, vous y êtes (déjà !) presque. Avoir l’instinct de thème, c’est être conscient de ce que vous faites et prendre des décisions sensées durant la phase de développement de votre thème.

Vous n’avez pas à déchiffrer la mécanique derrière chaque ligne de PHP

Par exemple, si je vous demande de me créer le design d’une voiture, vous saurez immédiatement les différents composants à inclure dans votre design : un moteur, un châssis, des pneus, des fenêtres, un tuyau d’échappement, etc.
Peut-être ne savez-vous pas comment chaque pièce fonctionne, mais vous êtes capable d’expliquer pourquoi elle est nécessaire dans votre design et vous savez vérifier sa qualité et son bon fonctionnement — point primordial pour la sécurité. Vos années d’expérience à conduire des voitures ont indirectement développé votre instinct « voiture ».

Utilisez la même approche lorsque vous aborderez votre prochain projet de thème WordPress. Posez-vous les bonnes questions :

  • quels fichiers dois-je inclure dans mon thème ?
  • quels rôles joue tel ou tel fichier ?
  • pourquoi ai-je besoin de ce bout de code dans mon thème ?
  • d’où vient ce bout de code et qui l’a écrit ?
  • est-ce que cette fonction est à jour et sécurisée ?

Vous n’avez pas à déchiffrer la mécanique derrière chaque ligne de PHP car elle changera peut-être d’ici la prochaine version, ou la suivante, ou celle d’après… L’important c’est que, comme avec les voitures, vous soyez capable d’avoir une compréhension globale de ce qui se passe sous le capot de votre thème.

Suite à cette explication, voyons quelques points spécifiques qui vous aideront à développer cette compréhension globale.

Aiguisez votre instinct « thème »

Restez à l’écoute des évolutions WordPress

Le code de WordPress est présent sur toute la toile. Il est même présent hors-ligne, dans des livres ou des magazines. Quand vous regardez les étoiles dans le ciel en pleine nuit, vous les voyez telles qu’elles étaient il y a des millions d’années. De la même manière, lorsque vous examinez un bout de code WordPress, cet extrait est une image d’un WordPress qui existait à l’époque de son écriture et peut être différent de la version actuelle de WordPress.

En étant conscient des derniers changements et grosses nouveautés qu’apportent les mises à jour de WordPress, vous apprendrez à évaluer la fraîcheur et estimer l’éventuelle date de péremption d’un tutoriel WordPress, d’un livre ou d’un plugin.

Pour rester au courant des dernières nouveautés WordPress, inscrivez-vous au blog officiel WordPress News.

Prenez l’habitude de vérifier les dates

La première chose à vérifier lorsque vous abordez un livre, tutoriel, article ou quelconque ressource WordPress, est de vérifier sa date de publication. Rappelez-vous, il est important de rester à l’écoute des nouveautés de WordPress. Cela vous permettra de déduire quelles parties d’un tutoriel sont encore d’actualité et quel(s) code(s) restent utilisables dans votre thème.

Comme vous le savez peut-être déjà, il est dangereux d’utiliser du code obsolète dans un thème car il peut potentiellement contenir des failles connues de vulnérabilités que les pirates savent exploiter.

Cependant, la fraîcheur d’un code ne doit pas non plus être rédhibitoire : il ne vient pas avec une date de péremption qui, une fois passée, l’empêche d’être utilisé. A vous de déterminer la validité d’un code au cas par cas.

Si vous utilisez des codes vieillissants et périmés dans votre thème, ce n’est pas la fin du monde. Il existe des plugins comme Developer ou Theme Check qui vous permettront d’optimiser votre environnement de développement de thème WordPress et scanneront le code de votre thème à la recherche de potentielles vulnérabilités et améliorations possibles.

En complément de ces plugins de développement, il est conseillé de prendre l’habitude d’opter pour les meilleures pratiques « sécurité » listées dans le « guide des bonnes pratiques de sécurité des données et options de thème » dans le Codex WordPress. Scannez cette liste et prenez note de tout ce qui tourne autour des fonctionnalités que propose votre thème.

Par exemple, les instructions mentionnées dans le Codex sur la validation et le nettoyage des données sont nécessaires pour protéger votre sites des attaques XSS cross-site scripting.

Je pense que le concept derrière le 7ème point est très pertinent et reprend bien ce que nous disions au sujet de la fraîcheur d’un code et sa présence dans le temps :

Les thèmes se doivent d’inclure une page d’options volontairement plutôt que de dépendre sur des scripts copiés-collés issus de tutoriels en ligne.

Les scripts copiés-collés deviennent vite obsolètes. Cela s’applique aussi bien aux pages d’options de thèmes qu’aux codes d’autres parties issus d’un tutoriel (même ceux présents sur notre site !). Je veux seulement que vous soyez au courant de l’importance de l’âge d’un code afin de garder votre thème aussi sécurisé que possible.

Familiarisez-vous avec les différents éléments d’un thème WordPress

La plupart des sites, qu’ils tournent sous WordPress ou non, possèdent des sections communes :

  1. une zone d’en-tête (dit header)
  2. une zone de contenu principal (dit main content)
  3. une barre latérale (dite sidebar)
  4. un pied de page (dit footer)

La structure des templates composant un thème WordPressIl peut être utile d’imaginer ces sections comme des blocs (comme les pièces d’une voiture, pour reprendre notre exemple précédent). Ces blocs sont répétitifs, comme l’en-tête, le pied de page, la barre latérale. Ils sont répétés sur toutes les pages, et dans tous les thèmes que vous développerez. D’un thème à l’autre, leur contenu et positionnement seront évidemment différents en fonction du design et de l’objectif du thème.

Dans un thème WordPress, les fichiers templates comme header.phpindex.phpsidebar.php et footer.php sont vos « blocs ». En conséquence, le thème est la structure complète que vous créerez avec ces blocs.

Prendre conscience de ces éléments essentiels vous aidera grandement à développer votre feeling de développeur de thème WordPress. Pour les jeunes novices des blocs de theming WordPress, découvrez-les en détails sur le Codex WordPress.

Dénichez les ressources et standards récents et à jour

Le Codex de WordPress.org est un excellent point de départ pour rechercher les fonctions et tags de templates que vous rencontrerez au gré de vos lectures de tutoriels. Si une fonction est dépreciée (obsolète), sa page dans le Codex indiquera une note à ce sujet et mentionnera l’alternative la plus récente.

Alerte d'une fonction WordPress obsolète

Vous pouvez également trouver une liste de toutes les fonctions dépreciées sur le Codex.

Le plugin Log Deprecated Notices scanne votre thème à la recherche de ces fonctions obsolètes. Il recherche également les fichiers templates périmés et les mauvais usages de fonctions.

L’équipe WordPress Theme Review — qui examine chaque thème avant sa publication dans le répertoire officiel — conseille un certain nombre de bonnes pratiques que chaque thème doit respecter afin d’être approuvé sur wordpress.org/extend/themes. Adapter votre code à ces standards assurera à votre thème de rester à jour en terme de sécurité et de performance.

Enfin, si vous avez un doute sur quelque chose, sachez qu’il existe des endroits où vous pouvez poser vos questions librement :

Tout ça pour dire qu’il est important de ne pas casser le « moule de standards » mis en place par WordPress. En fait, l’idée est d’être au courant de ces bonnes pratiques afin de prendre de bonnes décisions lors du développement de votre thème.

Ce qu’il faut retenir

En conclusion, voilà ce que l’on peut retenir de cette première leçon de tutoriel :

  1. Soyez conscient de l’état actuel de WordPress, de ses fonctionnalités et ses fonctions.
  2. Restez informés des grosses nouveautés introduites dans les dernières mises à jour de WordPress.
  3. Faites attention aux dates de publication des tutoriels et ressources WordPress que vous rencontrerez. Comparez ces dates avec vos connaissances des évolutions de WordPress pour estimer de l’intérêt et de la fraîcheur de chaque ressource.
  4. Comprenez que chaque code change régulièrement mais que la logique de base de construction par blocs d’un thème reste globalement la même.
  5. Soyez à l’écoute des bonnes pratiques et nouveaux standards WordPress. Cela peut également s’avérer utile pour estimer l’importance d’un tutoriel.
  6. Essayez de comprendre pourquoi vous prenez telle ou telle décision dans chaque étape de votre thème. Par exemple :
    • A quoi sert ce fichier de template ?
    • Si vous comptez copier-coller un gros morceau de code que vous venez de dénicher sur Google dans votre thème, quel est l’intérêt de ce code ?
    • Est-ce que ce code est important ?
    • Est-il à jour ?
    • Respecte-t-il les principes de base en terme de sécurité WordPress ?
  7. Vous n’avez pas à mémoriser chaque ligne de code PHP d’un tutoriel. L’important est de comprendre le fonctionnement global de la machine qu’est votre thème WordPress.

Comment créer un thème WordPress ?

Cet article fait partie d’une série composant notre guide de création de thème WordPress qui vous permettra de créer un thème puissant à partir de zéro. Lisez-le depuis le début et vous saurez coder l’extraordinaire !

  1. Introduction au guide de création de thèmes WordPress
  2. Développer son instinct « thème »
  3. Les outils de développement de thème
  4. Créer la structure HTML du thème
  5. Les templates et la structure dossier
  6. Mettre en place les fonctions propres au thème
  7. Securiser un thème WordPress
  8. Le template d’en-tête
  9. Le template index.php
  10. Article single, media attachment et template 404
  11. Le template des commentaires
  12. Le template de la recherche et le template de page
  13. Le template des archives
  14. Le template de sidebar et du footer
  15. Le reset CSS et la mise en page
  16. Arrière-plan et image d’en-tête personnalisés
  17. Distribuer votre thème WordPress
  18. Aller plus loin : ressources complémentaires

4 commentaires ont été rédigés, ajoutez le votre.

  1. Rétrolien: Créer un thème WordPress : l'introduction au tutoriel

  2. Geffray Répondre

    Mais et la suite … Là on reste un peu sur notre fin quand même pourtant c’était très bien parti :-) un effort

  3. Rétrolien: Les outils de développement de thème WordPress - Mosaika

Laisser un commentaire