Le blog.

Les outils de développement de thème WordPress.

Avant de rentrer dans le vif du sujet sur le développement de thèmes WordPress, prenons le temps de mettre en place tous les outils nécessaire pour bien créer. Dans cet article, découvrez comment faire tourner un serveur en local et quels logiciels et extensions nous recommandons pour rendre facile et efficace la création de votre nouveau thème.

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.

Avant d’attaquer la création de thèmes WordPress, nous allons devoir mettre en place nos outils de développement. Dans cet article, nous analyserons les différentes solutions afin d’installer un environnement de développement de thèmes WordPress multi-plateformes qui rendrait tout développeur WordPress jaloux :)

Quels outils utiliser pour développer un thème WordPress ?

Un serveur de test local : XAMPP ou MAMP

Le meilleur endroit pour développer votre thème WordPress fait-maison est hors-ligne, sur votre ordinateur. Pas la peine de dépendre d’une connexion Internet pour développer un thème, et encore moins la peine de rendre son développement public aux yeux de tous.

Pour faire cela, nous devons transformer notre ordinateur en « serveur local », en y faisant tourner les mêmes logiciels qu’un serveur « normal » hébergé professionnellement (Apache ou nginx, MySQl et PHP). Cela signifie que vous pouvez installer WordPress sur votre ordinateur de travail.

Installer chaque technologie requise peut s’avérer un casse-tête technique, mais fort heureusement pour nous des solutions tout-en-un et gratuites permettent de gérer tout ça de manière centralisée.

Si vous êtes sur un ordinateur Windows, vous devez installer XAMPP.

Si vous tournez sous Mac, vous aurez le choix entre XAMPP ou MAMP.

Développer sur un serveur distant

Si vous préférez développer sur un serveur distant (comme OVH, Gandi, 1&1, etc.), vous aurez besoin d’un accès FTP et donc d’un client FTP. Pour plus d’information sur les FTP, visitez le Codex WordPress sur ce sujet.

Vous n’avez pas de client FTP ? Il faudra en installer un ! Voici quelques possibilités gratuites :

  1. CyberDuck pour Mac ou Windows
  2. l’incontournable FileZilla pour Mac, Windows ou Linux
  3. WinSCP pour Windows

Après avoir téléchargé et installé un client FTP, vous devrez vous connecter à votre site via ce logiciel FTP. Consultez la documentation du logiciel pour faire cela et armez-vous des informations fournies par votre hébergeur : la connexion à un serveur distant via FTP nécessite une adresse de serveur, un nom d’utilisateur, un mot de passe et un port (souvent 21).

Une fois connecté à votre FTP, vous êtes prêt à installer WordPress !

Installer WordPress

Bien évidemment, il va nous falloir télécharger la dernière version de WordPress et l’installer correctement sur notre serveur local.

Si vous utilisez XAMPP, je vous conseille de suivre ce tutoriel pour installer WordPress sur votre machine de travail.

Si vous utilisez MAMP, suivez ce tutoriel pour installer WordPress localement.

Enfin, si vous travaillez sur un serveur distant, ce guide détaillé du Codex vous accompagnera pour installer WordPress.

Dummy Content, ou « contenu bidon »

Votre installation WordPress va désormais devoir être remplie avec d’un contenu factice. Une base à styliser, du faux contenu pour travailler avec du concret, plutôt qu’une coquille vide. Dans votre administration WordPress, naviguez vers Outils > Importer et choisissez WordPress dans la liste des options. Maintenant, il ne nous manque plus qu’un fichier de données XML à importer.

Plusieurs options :

  1. les données du The Theme Unit Test
  2. le faux contenu WPCandy Sample Content

Chacun de ces deux sets de faux contenus ont leurs avantages et leurs inconvénients. Une chose intéressante à faire est d’importer tous les Dummy Content que vous pouvez. Tous. Comme ça, rien n’est oublié, tous les cas sont couverts. Lorsque vous pensez en avoir terminé avec le développement de votre thème, utilisez la navigation d’articles pour passer d’un article à l’autre. Vérifiez les pages, les archives mensuelles, annuelles et par catégories. Avec de bons faux contenus, vous devriez facilement remarquer si quelque chose est absent.

Ajoutez aussi un peu de « vrai » contenu !

En plus des contenus factices, c’est une bonne idée d’avoir du vrai contenu. Du vrai contenu lisible, qui ne se limite pas à du « Lorem Ipsum » répété en boucle. Prenez du contenu — de votre blog si vous en avez un, d’un document sur votre ordinateur — et créez du contenu avec. Moins prévisible que du contenu factice, le « vrai contenu » reflète plus adéquatement l’utilisation réelle (future) de votre thème, et ce sur votre environnement de travail local.

Manifesto du développement de thème

Hélas pour l’instant seulement en anglais, je vous conseille de lire le Theme Review Guidelines sur le Codex afin d’en savoir plus sur les bonnes pratiques et les conseils de développement de thèmes WordPress.

Les extensions essentielles

Installez l’extension Developer, développé par les fous du code chez Automattic. A l’activation, il vous proposera d’installer bon nombre d’extensions complémentaires que vous pourrez activer en un simple clic de bouton. Ils vous aideront à optimiser et fluidifier votre développement WordPress en testant votre thème selon les bonnes pratiques du Theme Review.

Un autre incontournable pour les développeurs de thèmes est l’extension Monster Widget. En activant un seul et unique « widget monstre » dans votre ou vos sidebar(s), vous pourrez tester d’une traite tous les widgets natifs WordPress dans votre thème.

Un éditeur de texte

Pas besoin de logiciel graphique ou IDE spécifique pour le développement de thèmes, un bon vieil éditeur de texte peut faire l’affaire. Mais quitte à écrire des lignes de code toute la journée, autant le faire avec un outil pratique et joli.

Chaque développeur y trouvera ses avantages et inconvénients, l’idéal est d’essayer quelques logiciels pour faire son choix : certains aiment tout centraliser dans leur logiciel de développement (FTP, Git, préprocessage des fichiers, etc.), d’autres préfèrent n’avoir qu’un simple éditeur de texte pour coder et s’armer de logiciels complémentaires pour chaque tâche annexe.

A vous d’expérimenter et tester !

Je travaille entre PHPStorm (payant) et Sublime Text (gratuit), mais vous pouvez essayer :

  1. Sublime Text
  2. Brackets d’Adobe
  3. Atom de GitHub
  4. Visual Studio
  5. Notepad++
  6. Aptana Studio

A part Notedpad++, tous sont aussi bien disponibles pour Windows que pour Mac OS.

Firefox

Evidemment, vous pouvez utiliser n’importe quel navigateur pour tester vos thèmes en développement. Il est d’ailleurs conseillé, une fois votre thème prêt, de le tester (et de l’éprouver !) sous tous les navigateurs possibles et imaginables, sur tous les supports possibles. Nous recommandons cependant Firefox de Mozilla, surtout avec les 2 extensions suivantes qui faciliteront votre processus de développement WordPress.

L’extension Web Developer ajoute une barre de menu qui vous donne accès à de nombreuses options pour inspecter et débugger votre code ; désactiver tout le CSS, valider le HTML, etc.

L'inspecteur natif de Firefox
L’inspecteur natif de Firefox

L’incontournable extension Firebug est indispensable. Une fois activée, vous pouvez cliquer avec le bouton droit de votre souris sur n’importe quel élément présent sur la page d’un site et voir — dans une petite fenêtre séparée — le code source derrière cet élément (HTML & CSS). Vous pourrez également voir chaque ligne de CSS d’une page, l’éditer ou la désactiver et voir les résultats en temps réel sur la page ouverte.

Depuis la version 10 de Firefox, ce navigateur possède maintenant un inspecteur de code intégré qui vous permettra d’analyser le code derrière un élément. Bien qu’utile, cet inspecteur ne propose pas autant d’outils que Firebug.

Chrome et Safari

Si vous n’aimez pas Firefox, Safari ou Google Chrome sont deux alternatives efficaces. Les deux possèdent des outils de développement similaires à Firebug. Vous trouverez (ici ou ) pour découvrir ces inspecteurs.

Les coulisses d'une page web avec l'inspecteur de Google Chrome
Les coulisses d’une page web avec l’inspecteur de Google Chrome

HTML & CSS

On ne va pas se mentir, une bonne base de connaissances en HTML et CSS est nécessaire. Vous trouverez sur la toile de nombreux tutoriels et vidéos pour apprendre tout ça, mais la meilleure solution reste selon moi l’excellent livre Relooker son thème d’Alex Bortolotti : en plus d’y aborder les bases de l’HTML et du CSS, il apporte des informations intéressantes sur la personnalisation de thèmes WordPress et s’avèrera être une publication idéale en complément de cette série de tutoriels.

PHP

Quid du PHP ? Pas besoin de connaître le PHP pour créer un thème WordPress ? Et bien… si ! C’est plus que nécessaire. Si vous n’avez aucune base, mieux vaut suivre un petit cours introductif sur le PHP.

Mais pas d’inquiétude, nous vous enseignerons ici ce qu’il faut pour coder comme un chef pour WordPress. Et si vous voulez vraiment rentrer dans l’univers du PHP — ce qui est fortement recommandé — vous pouvez suivre des cours en ligne comme ceux listés sur developpez.com.

Développer un thème WordPress sur-mesure

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

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

  1. Rétrolien: Développer son instinct "thème" WordPress pour bien coder

  2. jeanmarie.huchet Répondre

    Vivement la suite ! :)
    Je suis impatient de continuer à apprendre. Bon courage et merci !

Laisser un commentaire