Objectifs
- Comprendre l’architecture et la hiérarchie des fichiers d’un thème WordPress.
- Intégrer une maquette HTML et CSS dans WordPress.
- Créer les principaux templates nécessaires à l’affichage du site.
- Personnaliser les différentes zones d’un thème.
- Produire un thème conforme aux standards du Web et aux bonnes pratiques de WordPress.
Compétences visées
- Transformer une maquette graphique en thème WordPress.
- Structurer les fichiers et templates d’un thème.
- Intégrer les contenus dynamiques à l’aide de la boucle WordPress.
- Personnaliser l’apparence des différentes zones du site avec CSS.
- Concevoir un thème cohérent, maintenable et adapté aux contenus administrables.
Pré-requis
Maîtriser HTML et CSS et disposer d’une bonne connaissance de l’administration de WordPress. Des notions de PHP sont recommandées.
Quel profil ?
Cette formation s’adresse aux intégrateurs Web, webdesigners, directeurs artistiques, développeurs front-end et à toute personne souhaitant transformer une maquette graphique en thème WordPress personnalisé.
Formations associées
Au programme de la formation
Intégrer une maquette dans un thème WordPress
Découvrir l’architecture d’un thème WordPress
- Comprendre le fonctionnement général d’un thème WordPress
- Identifier la hiérarchie des templates
- Découvrir la structure et les fichiers principaux d’un thème
- Respecter les conventions de nommage de WordPress
- Comprendre l’anatomie d’une page générée par le CMS
Préparer l’intégration d’une maquette
- Analyser et découper une maquette graphique
- Organiser les fichiers HTML, CSS, images et scripts
- Créer la structure de base du thème
- Déclarer les informations du thème dans le fichier
style.css - Préparer une intégration responsive
Construire les principaux templates
- Créer le fichier
header.php - Créer le fichier
footer.php - Créer le template principal
index.php - Créer les templates
page.phpetsingle.php - Créer les templates d’archives et de catégories
- Créer une page d’erreur avec
404.php - Créer et réutiliser des sous-templates avec les Template Parts
Intégrer les contenus WordPress
- Comprendre et utiliser la boucle WordPress
- Afficher les titres, contenus, extraits et métadonnées
- Intégrer les images mises en avant
- Ajouter les menus de navigation
- Afficher les commentaires
- Intégrer une sidebar et des zones de widgets
Mettre en forme le thème avec CSS
- Organiser les feuilles de style du thème
- Mettre en forme l’en-tête, la navigation et le contenu
- Personnaliser la sidebar et le pied de page
- Mettre en forme les commentaires et les formulaires
- Adapter les composants aux différents formats d’écran
- Utiliser Flexbox et Grid pour construire les mises en page
Finaliser et contrôler le thème
- Vérifier la conformité du code HTML et CSS
- Contrôler le comportement responsive
- Tester la compatibilité avec les principaux navigateurs
- Optimiser le chargement des ressources
- Préparer le thème pour son installation et sa livraison
Comment se déroule la formation ?
Chaque notion est abordée de manière concrète, puis appliquée à travers des exercices et des cas pratiques. Les groupes sont limités à 8 participants pour favoriser les échanges et permettre un accompagnement adapté à chacun.
Un support pédagogique est remis à l'issue de la formation pour retrouver facilement les notions abordées.
Comment les acquis sont-ils évalués ?
En fin de parcours, une évaluation permet de mesurer l'atteinte des objectifs pédagogiques. Selon la formation, elle peut prendre la forme d'un questionnaire, d'un exercice pratique ou d'une certification.
Le suivi est formalisé par une feuille d'émargement et une évaluation des compétences.
Autres formations de la même catégorie
Apprenez les fondamentaux du HTML5 et du CSS3 afin de créer des pages Web modernes, structurées, responsives et conformes aux standards du Web.
Approfondissez votre maîtrise du HTML5, du CSS3 et de JavaScript afin de concevoir des interfaces Web modernes, responsives et interactives.
Apprenez les fondamentaux de JavaScript afin de créer des pages Web interactives, manipuler le DOM et développer vos premières fonctionnalités côté client.
Approfondissez votre maîtrise de JavaScript en découvrant la programmation orientée objet, les design patterns et les techniques utilisées dans le développement d’applications Web modernes.
Apprenez à concevoir des interfaces Web responsives, ergonomiques et adaptées aux usages actuels sur ordinateur, tablette et smartphone.
Apprenez les fondamentaux de PHP et MySQL pour créer des sites Web dynamiques, traiter des formulaires et exploiter une base de données.
Approfondissez votre maîtrise de PHP et MySQL afin de développer des applications Web plus robustes, maintenables et évolutives.
Apprenez à développer un thème WordPress personnalisé en exploitant le système de templates, les contenus dynamiques, les Custom Post Types et les champs personnalisés.
Apprenez à développer des plugins WordPress sur mesure afin d’ajouter des fonctionnalités fiables, sécurisées et adaptées aux besoins d’un projet.
Apprenez à développer et personnaliser une boutique PrestaShop en créant des modules, des hooks, des contrôleurs et des fonctionnalités adaptées aux besoins métier.
