Un guide des options pour le développement de thèmes WordPress

admin 0 Comments Articles

Un guide des options pour le développement de thèmes WordPress

  • 14 min de lecture
  • WordPress,Techniques (WP)
  • Enregistré pour une lecture hors ligne
  • Partagez sur Twitter, LinkedIn
Au récent WordCamp Edinburgh, j’ai participé à une discussion en panel sur le développement de thèmes WordPress et les options disponibles pour les développeurs lors de la création de thèmes. La conclusion primordiale de la session était qu’il n’y a pas de réponse unique et que la meilleure méthode dépend des besoins du site Web et des capacités du développeur.

Au récent WordCamp Edinburgh, j’ai pris part à une discussion en panel sur le développement de thèmes WordPress et les options disponibles aux développeurs lors de la construction de thèmes. La conclusion dominante de la session était qu’il n’y a pas une réponse unique et que la meilleure méthode dépend des besoins du site Web et des capacités du développeur.

Mais si vous commencez à construire des thèmes WordPress ou si vous voulez développer un système pour les construire plus efficacement ou plus solidement, comment décider de l’approche à adopter ? Dans cet article, nous décrirons brièvement le fonctionnement des thèmes WordPress, puis nous examinerons certaines des différentes approches pour les développer, avec des conseils sur l’approche qui pourrait être la plus adaptée à votre site Web et aux circonstances.

Lectures complémentaires sur SmashingMag:

  • La migration d’un site Web vers WordPress est plus facile que vous ne le pensez
  • L’utilisation de WP_Query dans WordPress
  • Planifier des événements à l’aide de WordPress Cron
  • Comment améliorer le déploiement des sites Web WordPress

Comment fonctionne un thème WordPress ?

Dans WordPress, les thèmes pilotent un site web et déterminent ce qu’il contient, comment il se comporte et à quoi il ressemble. Le thème est distinct du contenu, qui est conservé dans la base de données. Cela signifie que vous pouvez utiliser le même thème sur plusieurs sites Web, quel que soit leur contenu – ce que vous faites peut-être déjà si vous avez téléchargé des thèmes à partir du dépôt de thèmes de WordPress.

Un thème se compose d’un certain nombre de fichiers de modèle, tous stockés dans le dossier theme, que vous trouverez dans wp-content/themes dans votre installation de WordPress. Chaque thème WordPress doit inclure au moins deux fichiers : index.php et style.css. Le fichier index définit le contenu affiché par le thème, et la feuille de style (vous l’avez deviné) le stylise, ainsi que contient des informations méta sur le thème que WordPress utilise pour que le thème fonctionne correctement.

En fait, la plupart des thèmes ont quelques fichiers supplémentaires :

  • header.php Contient la section <head> de chaque page, plus l’en-tête du design du site web.
  • sidebar.php Contient la barre latérale, y compris les éventuelles zones de widgets.
  • footer.php Contient le pied de page, qui peut ou non comporter des zones de widgets.
  • functions.php Contient toutes les fonctions spécifiques à votre thème. Vous pouvez trouver des informations sur le fichier des fonctions dans le Codex de WordPress.
  • Fichiers qui contiennent la boucle, qui appelle le contenu de la base de données. Selon la partie du site Web dans laquelle vous travaillez, il peut s’agir d’un des nombreux fichiers suivants :
    • page.php Pour les pages statiques
    • single.php Pour les articles individuels (articles de blog, par exemple)
    • index.php, archive.php, category.php, etc. Pour les pages qui énumèrent un certain nombre d’articles

Yoast a écrit une excellente représentation visuelle de la façon dont les fichiers de thème fonctionnent, et le Codex de WordPress comprend une description détaillée des thèmes, y compris des détails sur les différents fichiers et quand ils sont appelés.

Je dirais que la feuille de style, cependant, est le fichier le plus important et celui avec lequel vous êtes susceptible de commencer, parce qu’un « thème enfant » (plus de cela bientôt) a besoin d’une feuille de style même s’il ne contient rien d’autre. La feuille de style contient des informations méta importantes sur le thème lui-même, qui sont commentées avant tous les styles. Voici les commentaires d’ouverture du thème par défaut actuel de WordPress, Twenty Eleven:

Ces informations sont commentées pour ne pas être lues par les navigateurs, mais elles sont lues par WordPress, et elles fournissent des informations à toute personne utilisant votre thème. Nous y reviendrons prochainement lorsque nous verrons comment créer un thème enfant.

Maintenant que vous savez comment fonctionnent les thèmes, l’étape suivante consiste à déterminer comment procéder pour créer le vôtre. Avant de commencer, il serait bon de considérer certains points qui vous aideront à prendre cette décision.

Que considérer lors du développement d’un thème WordPress?

Avant de décider de l’approche à adopter pour développer votre thème, identifiez vos contraintes. Celles-ci comprennent probablement les éléments suivants :

  • Le temps. De combien de temps disposez-vous pour développer votre thème, ou pour apprendre à le faire ?
  • Budget. Ceci est lié au temps mais a également à voir avec le fait que vous pouvez vous permettre de payer pour un thème premium ou un framework de thème.
  • Capacité. Dans quelle mesure êtes-vous familier avec le développement de thèmes, avec CSS et PHP et avec le fonctionnement des thèmes ? Si vous n’êtes pas familier, dans quelle mesure voulez-vous apprendre ?
  • Protection de l’avenir. Votre thème devra-t-il être mis à jour à l’avenir ? D’autres développeurs travailleront-ils dessus en plus de vous ? Si oui, alors votre approche devra être aussi robuste que possible.
  • Répétition. Vous voyez-vous développer un certain nombre de thèmes similaires à l’avenir ? Si oui, votre approche devra permettre la réutilisation du code.

Nous reviendrons sur ces considérations à la fin de l’article et identifierons les options de développement les plus adaptées aux différentes situations.

Développement de thèmes : Vos options

Quelques options sont disponibles pour développer votre ou vos thèmes, et les étudier avant de retrousser vos manches et de commencer à coder serait utile. En choisissant la bonne approche, vous obtiendrez un meilleur thème, avec un code plus robuste, et cela minimisera la quantité de révisions que vous aurez à faire plus tard. Cela vous aidera également à construire le thème de manière plus efficace.

Les options que nous allons examiner ici sont :

  • Construire un thème à partir de zéro,
  • Éditer (ou « hacker », diront certains) un thème existant,
  • Utiliser le personnalisateur de thème pour peaufiner un thème existant,
  • Créer un thème enfant pour apporter des modifications à un thème existant,
  • Créer votre propre thème parent (en utilisant l’une des approches ci-dessus) et des thèmes enfants,
  • Utiliser un framework de thème.

1. Construire un thème à partir de zéro

Cette approche est la plus difficile si vous êtes inexpérimenté. Mais si vous êtes un développeur WordPress chevronné, elle vous donnera le plus de contrôle. Ce pourrait être la méthode la plus appropriée si vous importez le HTML d’un site web statique existant qui est mis à niveau vers WordPress sans autres changements.

Cependant, lorsque vous transférez un site web vers WordPress, effectuer un examen de celui-ci dans le cadre du processus, plutôt que de simplement copier le code à travers, est une bonne idée. Si vous copiez un site web statique, vous devrez garder un œil attentif sur votre code pour vous assurer qu’il est propre, efficace et valide.

2. Modifier (ou pirater) un thème existant

C’est ainsi que la plupart des gens commencent avec le développement de thèmes WordPress : en travaillant sur un thème qu’ils ont téléchargé, ils voient que certains styles ne sont pas tout à fait corrects, alors ils se plongent dans la feuille de style et font quelques modifications. Commencer ainsi est tentant car cela semble être un moyen rapide et facile d’obtenir l’effet désiré. Mais il y a quelques dangers :

  • Si jamais vous changez de thème, cette mise à jour annulera tous les changements que vous avez faits.
  • Il est facile d’ajouter du code répétitif en ajoutant de nouveaux styles plus bas dans la feuille de style qui annulent les styles plus haut, plutôt que de supprimer ce dont vous n’avez pas besoin.
  • Le site Web pourrait se retrouver avec beaucoup plus de code qu’il n’en a besoin.
  • Si le thème n’est pas bien codé ou commenté pour commencer, vous pourriez vous mettre dans un plus grand désordre et trouver que vous devez faire beaucoup de corrections.

Cependant, le piratage d’un thème peut fonctionner si vous y allez avec les yeux ouverts. Cela peut être une option si les éléments suivants sont vrais :

  • Le thème que vous utilisez est bien écrit, valide et commenté (ex, le thème WP par défaut, Twenty Eleven);
  • Les changements que vous faites sont si drastiques que vous n’auriez pas besoin de mettre à jour le thème original;
  • Vous comprenez le PHP et le CSS contenus dans le thème et êtes à l’aise pour les modifier, les ajouter et les supprimer sans casser le thème.

Si vous décidez de suivre cette voie, il est important de garder une sauvegarde du thème original et de bien commenter votre code. Je conseillerais également de commenter tout code que vous ne voulez pas et de tester pour voir ce qui se passe avant de supprimer quoi que ce soit.

3. Utiliser le personnalisateur de thème pour modifier un thème existant

Le personnalisateur de thème a été publié avec WordPress 3.4. Il vous donne la possibilité de personnaliser un thème sans écrire de code, simplement en utilisant une interface WYSIWYG. Selon la façon dont le personnalisateur est intégré au thème lui-même, vous pouvez l’utiliser pour modifier les images, les titres, les couleurs et même la mise en page. Attendez-vous à voir plus de thèmes avec le personnalisateur intégré en eux.

Utilisation du personnalisateur de thème WordPress avec le thème Twenty Ten.

Le personnalisateur de thème stocke vos modifications dans un fichier séparé, pas dans la feuille de style du thème, donc il y aura du code répétitif.

Pour plus d’informations, jetez un œil au tutoriel vidéo ou au guide d’Otto on WordPress sur l’intégration du personnalisateur de thème dans vos propres thèmes.

4. Créer un thème enfant pour apporter des modifications à un thème existant

Cette approche est similaire à l’édition d’un thème existant, mais plus sûre. Elle consiste à créer un tout nouveau thème qui est défini comme un enfant du thème existant. Lorsque votre thème enfant ne dispose pas d’un fichier particulier mais que le thème parent en dispose, il l’utilisera. Si le thème enfant dispose d’un fichier, ce dernier remplacera l’équivalent dans le thème parent. Prenons un exemple :

Fichiers du thème parent Fichiers du thème enfant
  • style.css
  • page.php
  • single.php
  • archive.php

    • .

  • header.php
  • sidebar.php
  • footer.php
  • style.css
  • page.php
  • header.php

Dans l’exemple ci-dessus, WordPress utiliserait les fichiers suivants pour livrer le contenu :

  • style.css du thème enfant,
  • page.php du thème enfant,
  • single.php du thème parent,
  • archive.php du thème parent,
  • header.php du thème enfant,
  • sidebar.php du thème parent,
  • footer.php du thème parent.

Vous pouvez voir comment cela serait utile si vous vouliez utiliser la plupart du balisage du thème parent mais modifier le contenu de l’en-tête (en ajoutant, par exemple, votre logo et les détails de l’adresse) et toute page statique (peut-être en changeant la façon dont les métadonnées sont affichées).

Le seul fichier que chaque thème enfant doit avoir pour fonctionner est la feuille de style, car elle contient les informations dont WordPress a besoin pour que le thème enfant fonctionne correctement. Pour ce faire, ajoutez du code supplémentaire dans les commentaires de la feuille de style:

Pouvez-vous repérer les lignes supplémentaires ? La première est:

Template: twentyeleven

Cette ligne indique à WordPress que le thème est un thème enfant et que Twenty Eleven est son parent. Vous ajouteriez le nom du répertoire du thème parent, et non son nom complet.

Et la deuxième:

@import url("../twentyeleven/style.css");

Cette ligne indique au navigateur de charger la feuille de style du thème parent avant de rendre n’importe lequel des styles de la feuille de style actuelle. Cela vous libère de la nécessité de dupliquer tous les styles du thème parent que vous voulez utiliser.

Donc, c’est ainsi que les thèmes enfants fonctionnent. Mais quand est-ce que cette approche est la meilleure ? Je suggérerais de l’utiliser dans les cas suivants :

  • Vous avez déjà un thème (à utiliser comme parent) qui contient la plupart de ce dont vous avez besoin pour votre thème;
  • Vous voulez être en mesure de mettre à jour votre thème parent (par exemple, lorsque des mises à jour de thème sont publiées suite à une mise à jour de WordPress) ;
  • Vous ne voulez pas vous faire des nœuds en piratant un thème existant;
  • Vous voulez avoir la possibilité de revenir au thème parent ou de développer un autre thème similaire à l’avenir (qui serait un nouveau thème enfant) ;
  • Vous développez un certain nombre de sites Web similaires avec quelques différences mineures de style ou de contenu (j’ai fait cela lors de la construction de sites Web similaires pour un client qui possédait plusieurs entreprises);
  • La différence entre vos thèmes enfant et parent n’est pas si énorme que vous devez repartir de zéro, ou pas si énorme que le code de votre thème enfant remplacera tout ce qui est affecté par les mises à jour du thème parent.

5. Créer votre propre thème parent (en utilisant l’une des approches ci-dessus) et des thèmes enfants

La situation à laquelle je viens de faire allusion, de construire un ensemble de sites Web pour un client avec plusieurs entreprises, est une occasion où vous pourriez créer un thème parent et ensuite configurer des thèmes enfants pour les sites Web individuels. Vous pourriez également vouloir le faire dans les cas suivants:

  • Vous prévoyez de développer beaucoup de sites Web avec un contenu et un balisage similaires à l’avenir (pas seulement pour un client);
  • Vous gérez beaucoup de sites Web et devez plonger dans chacun d’eux régulièrement, et vous voulez que le code soit très similaire;
  • Vous êtes à l’aise pour créer votre propre thème parent, en modifiant le code pour créer un parent robuste qui fonctionnera bien avec les thèmes enfants.

Si vous décidez d’adopter cette approche, vous pourriez soit construire votre thème parent à partir de zéro, soit pirater un thème existant. Pour la plupart des sites web que je construis, j’utilise un thème parent que j’ai développé en piratant le thème Twenty Ten, l’ancien thème par défaut de WordPress. J’ai apporté tellement de modifications que je n’avais plus besoin d’activer les mises à jour du thème d’origine. J’étais également à l’aise avec le code du thème et je voulais y apporter des modifications importantes, en réduisant le code, en le restructurant pour l’adapter à ma façon de travailler et en supprimant le code dont je savais que je n’aurais pas besoin.

Vous pourriez également créer un thème enfant basé sur un thème existant, puis créer des thèmes enfants pour cela – en fait, des petits-enfants du thème original. L’avantage de cette méthode est que vous n’écraserez pas le code du thème original, tout en ayant la flexibilité d’apporter des modifications au thème enfant qui seront transmises aux thèmes petits-enfants. Une mise en garde s’impose toutefois : avec trois thèmes utilisés, il est facile de s’embrouiller sur ce qui se passe, et vous pourriez vous retrouver avec beaucoup de code inutile.

6. Utiliser un framework de thème

La dernière option est celle utilisée par des milliers d’utilisateurs et de développeurs WordPress. Il existe un certain nombre de frameworks de thèmes que vous pouvez utiliser comme une sorte de thème parent, mais avec beaucoup plus de fonctionnalités, et dans certains cas avec la possibilité de faire des changements de mise en page et de style assez fantaisistes sans écrire une ligne de code. Certains frameworks sont gratuits, d’autres sont payants. Ils ont déjà été examinés en détail sur Smashing Magazine, mais les principaux sont énumérés ci-dessous.

Cadres WordPress gratuits:

  • Theme Hybrid comprend une myriade de crochets et de zones de widgets pour vous aider à personnaliser vos thèmes. Il dispose également de quelques thèmes enfants disponibles. Le framework et les thèmes enfants sont tous gratuits, mais si vous souhaitez bénéficier d’une assistance, vous devrez la payer en vous inscrivant sur le site Web de Theme Hybrid. Travailler avec lui peut être assez complexe, sauf si vous comprenez le PHP ou si vous utilisez l’un des thèmes enfants.
  • Wonderflux est basé sur un système de grille flexible. Il dispose d’options pour ajuster la mise en page et les styles sans avoir à écrire de code, et il comprend de nombreux crochets et zones de widgets. Il est gratuit à utiliser et soutenu via les forums WordPress.
  • Carrington est le plus établi des frameworks gratuits, et il a un certain nombre de thèmes enfants.
  • Thematic est développé par Automattic, qui développe WordPress lui-même. Il comprend un certain nombre de crochets, de filtres et de zones de widgets.
Cadres WordPress premium:
  • Ses développeurs décrivent Genesis comme « la norme de l’industrie ». Il est livré avec une grande variété de thèmes enfants, des options de personnalisation sans écrire de code, et des fonctionnalités de référencement.
  • Thesis est l’autre grand framework premium, et il vous donne également la possibilité de personnaliser des thèmes enfants sans écrire de code.

Résumé : Choisir une approche

Il y a des chances que, après avoir lu ceci, vous ayez une idée de l’approche à adopter. Mais au cas où vous vous grattez encore la tête, voici un résumé des cas où chaque méthode est appropriée :

.

.

.

.

.

.

Approche Temps Coût Capacité Futur-épreuve Répétition
Construire à partir de zéro Haut Bas Faible Haut Bas Bas
Pirer un thème existant Bas Bas Moyen Bas Bas
Utiliser le personnalisateur de thème Bas Bas Low Low Low
Créer un thème enfant basé sur le parent existant Medium Low Medium High High
Créer un thème parent High Basse Haute Haute Haute
Cadre du thème (gratuit) Moyenne Low Medium High High
Cadre thématique (premium) Moyen Haut Faible à moyen Haut Haut

En somme, chaque approche a sa place ; cela dépend simplement du site web et de vous. L’important est de choisir une approche après avoir pesé le pour et le contre – et non pas de plonger et d’essayer, pour découvrir ensuite que vous avez cassé un thème ou que vous vous êtes créé beaucoup de travail.

Et comme toujours, quelle que soit votre décision, n’oubliez pas de conserver des sauvegardes !

(al)

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.