Projet Planty de OpenClassrooms
Contexte de la mission
Dans le cadre de la formation Développeur WordPress chez OpenClassrooms, j’ai accompagné des étudiants dans la réalisation du projet Planty, un site vitrine pour une marque de boissons énergisantes à base de plantes.
L’objectif était de créer un site WordPress fidèle à une maquette Figma, en utilisant Gutenberg et un thème enfant, tout en respectant les spécifications techniques (performance, responsive, validation W3C, gestion de contenu accessible au client).
Mon rôle a été d’aider les étudiants à comprendre les enjeux du projet, à progresser dans l’utilisation de Gutenberg et du CSS avancé, et à les guider dans l’intégration de fonctionnalités spécifiques comme le lien “Admin” conditionnel ou la stylisation des formulaires.
Description du projet
Le projet Planty combinait plusieurs aspects avancés du développement front-end et WordPress :
- Stylisation avancée des formulaires (commande et contact) avec gestion des états (hover, focus) et cohérence multi-navigateurs.
- Mise en page avec Gutenberg : comprendre l’éditeur, gérer ses limitations et maintenir une cohérence visuelle.
- Gestion du z-index et positionnement : intégration spécifique de la canette de boisson et ajustements en responsive design.
- Fonctionnalités WordPress : ajout d’un lien Admin visible uniquement pour les utilisateurs connectés, via un hook dans
functions.php. - Performance & validation : respect des standards W3C, optimisation responsive (≥320px), et versionning Git/GitHub.
- Accessibilité client : tous les contenus (textes, images) devaient être modifiables sans écrire de code.
Les étudiants devaient livrer un site finalisé accompagné de la base de données et de l’archive du projet.
Technologies et outils étudiés
- WordPress (thème enfant, Gutenberg)
- HTML5 / CSS3 (validateur W3C, responsive, z-index)
- PHP / MySQL (ajout de fonctionnalités, gestion du thème enfant)
- Git / GitHub (versionnement du projet)
- Contact Form 7 (formulaires fonctionnels)
- Figma (maquette et prototype)
Étapes guidées
- Analyse de la maquette Figma et des spécifications techniques.
- Mise en place de l’environnement de développement WordPress (Local, PHP 8.1, MySQL 8.0).
- Structuration des pages principales : Accueil, Nous rencontrer, Commander, Mentions légales.
- Stylisation avancée des formulaires de commande et de contact.
- Ajout du lien Admin conditionnel via hook WordPress.
- Optimisation du design responsive et validation W3C.
- Tests finaux et préparation de l’archive complète du projet.
Points pédagogiques clés
- Maîtriser Gutenberg comme outil de mise en page tout en dépassant ses limites.
- Apprendre à gérer la stylisation avancée des formulaires et des blocs.
- Comprendre la logique des hooks WordPress et leur application pratique.
- Développer une rigueur dans le responsive design et la performance.
- S’initier à une démarche professionnelle : versionning Git, validation W3C, documentation.
Mon rôle : accompagner les étudiants dans la traduction d’une maquette en site WordPress fonctionnel, en leur transmettant les bonnes pratiques du front-end, de Gutenberg et de la maintenance WordPress.