Développer son premier thème WordPress à partir d’une maquette HTML/CSS

Apprenez comment développer un thème WordPress simple en partant d’un template HTML/CSS.

L’objectif est de comprendre les fondamentaux et les bonnes pratiques de développement de thèmes WordPress :

  • Faire apparaître son thème dans l’administration de WordPress
  • Organiser les fichiers du thème de façon claire et lisible.
  • Comment WordPress choisit les templates (modèles de pages) à utiliser
  • Charger les ressources CSS/JS correctement
  • Mettre en place la boucle de WordPress (responsable de l’affichage du contenu), les menus, les zones de widgets.
  • Utiliser les templates tags de WordPress pour afficher les informations nécessaires, et créer ses propres templates tags.
  • S’assurer que le thème est sécurisé, traduisible et accessible.

Si le temps le permet, on pourra plonger dans des sujets plus avancés, comme :

  • Mettre en place les fonctionnalités comme l’image d’entête personnalisée, le logo personnalisé, etc…
  • Comment intégrer le thème à l’outil de personnalisation de WordPress.

Le but est que les utilisateurs/développeurs voulant développer un thème repartent avec une méthode simple, pas à pas et une bonne appréhension des spécificités de développement de thème pour WordPress.

Le thème développé ne sera donc pas d’une complexité élevée, au contraire, mais permettra d’avoir la vue d’ensemble la plus complète possible du process et des bonnes pratiques de développement.

Le code source du prototype HTML/CSS ainsi que le thème à différentes étapes de son développement seront disponibles sur GitHub.

Prérequis pour tirer le maximum de l’atelier :

  • Des connaissances de base en HTML/CSS/PHP. JavaScript pas forcément nécessaire.
  • Un environnement de développement WordPress local (MAMP / Local by Flywheel / Bitnami, etc…)
  • Un éditeur de code (VS Code, Atom, etc…)

La présentation

La vidéo en HD

Orateur·rice

Catégories

8 réponses sur “Développer son premier thème WordPress à partir d’une maquette HTML/CSS”

  1. Super tuto mais j’aimerai savoir comment on peut faire des menus imbriqués les uns dans les autres ?
    Cordialement.

  2. Bonjour,
    Désolé j’arrive tard !
    Qu’entends-tu par menu imbriqués ? Des dropdowns (déroulants) ?
    Dans l’administration de WordPress, tu peux créer des sous-menu en plaçant des éléments de menus sous d’autres, en les indentant légèrement.
    Le thème supporte les menu déroulants, mais sur un seul niveau. Les sous-sous-menus ne passent pas bien, si je ne dis pas de bêtises.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

WordCamp Paris 2018 is over. Check out the next edition!