Le blog.

Créer un thème WordPress de A à Z : l’introduction.

Vous êtes graphiste, intégrateur HTML ou développeur web et souhaitez apprendre à créer votre propre thème WordPress ?

Excellent, vous êtes au bon endroit ! Nous avons pris le temps de traduire une suite d’excellents articles rédigés par des professionnels américains du CMS WordPress. Cette succession de différents articles constituent le manuel parfait pour découvrir et apprendre de A à Z la création de thèmes WordPress sur-mesure.

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.

Objectif

En seulement 16 leçons, ce tutoriel sur la création de thèmes WordPress va vous montrer comment construire un thème solide, puissant et à jour et — surtout — à partir de zéro.

Au fur et à mesure, j’expliquerai ce qui se passe vraiment et inclurai (pour le meilleur ou pour le pire !) mes pensées sur certaines techniques et pourquoi je choisis une solution plutôt qu’une autre. Et ce dans l’unique but de vous apprendre tout ce que vous devez savoir en ce qui concerne le développement de thèmes WordPress.

A la fin de ce tutoriel, vous serez capables de faire presque tout ce que vous souhaitez avec WordPress.

Tutoriel sur la création d'un thème WordPress de A à Z

Présentation du thème Underscores (_s)

Si vous n’avez jamais entendu parlé de _s, c’est un starter thème 100% sous licence GPL et créé par la communauté WordPress. Il contient des templates modernes, un CSS de base et une structure de fichiers organisée — tout ce dont vous aurez besoin pour vous faciliter la mise en place de vos designs web en un joli thème WordPress.

Vous pouvez également utiliser _s comme un point de départ pour vos futurs projets de thèmes WordPress. Si vous souhaitez en savoir plus sur la réflexion derrière Underscores, n’hésitez pas à prendre le temps de lire A 1000-Hour Head Start: Introducing the _s Theme. Et revenez donc ici après votre lecture.

Non non, vraiment, on vous attend !

Petit aperçu du thème WordPress que l'on développera
Petit aperçu du thème que l’on développera
Le thème minimaliste que nous allons construire durant ce tutoriel est basé sur _s est s’appelle le Shape Theme. Téléchargez-le et découvrez-le si vous voulez voir à quoi ressemble le code final que nous allons créer ensemble. Nous avons encore du chemin avant d’arriver à la leçon sur le CSS, mais si vous voulez jeter un œil au design que nous créerons pour le Shape Theme, téléchargez ce fichier ZIP.

Est-ce toujours d’actualité ?

Le tutoriel d’origine dont est issu cette série d’articles date d’Octobre 2012, ce qui peut paraître lointain pour une technologie web. Il est fort probable que certains codes dans ce tutoriel soient périmés.

Pas d’inquiétude, car le plus important ici est de se concentrer sur les concepts généraux — les pourquois — et qui seront présenter dans ces leçons. Certaines petites techniques auront peut-être évoluées depuis l’écriture de ce tutoriel, mais la logique générale de création d’un thème WordPress est fort probablement toujours la même.

En plus, vous pourrez aussi toujours récupérer la dernière version du code source de _s sur le repo GitHub pour être sûr de profiter d’un thème à jour.

Les fonctionnalités du thème créé

Voila une liste des points forts du thème final que nous allons développé tout au long de ces articles :

  1. une structure de fichiers bien organisée, standardisée et flexible
  2. une optimisation pour les moteurs de recherche pour un référencement naturel optimal
  3. l’utilisation des microformats pour des données structurées Google-friendly
  4. un balisage sémantiquement logique et valide déclinable sur tout type de mise en page
  5. un CSS de base bien pensé
  6. les possibilités de traduction (le thème est codé de manière à être facilement traduisible) et une feuille de styles RTL pour les langages de droite à gauche
  7. des classes CSS dynamiques sur la balise body, les pages d’articles et les commentaires
  8. la séparation des commentaires et des rétroliens
  9. deux zones widgetisées : la première avec des widgets par défaut et la seconde codée de manière à disparaître si elle est vide
  10. l’activation du format d’articles Aside (et après ce tutoriel, vous saurez facilement activer et supporter d’autres formats d’articles)
  11. un menu personnalisé, une image d’en-tête sur-mesure et un arrière-plan custom
  12. une mise en page responsive simple incluant une navigation légère pour les smartphones
  13. et tout l’attirail WordPress typique que l’on peut attendre d’un thème !

Je trouve que c’est tout de même impressionnant pour un thème WordPress, non ;) ?

Sommaire

Prêt à suivre ce tutoriel pour savoir créer un thème WordPress à partir de zéro ? Lisez-le depuis le début et vous saurez coder l’extraordinaire !

Si une leçon n’a pas de lien, c’est qu’elle n’est pas encore publiée ! Revenez chaque semaine pour découvrir de nouvelles leçons.

  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

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

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

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

  3. Flamentjm Répondre

    Super tuto milles bravos a quand la suite ???

  4. Kouassi Répondre

    Mais où est ce tutoriel, moi je n’ai rien vu.

  5. Martin Répondre

    Merci pour tout trés intéressant. J’ai hate a la suite :-)

Laisser un commentaire