Projet Nathalie Mota – Site WordPress photo sur mesure

Projet Koukaki – Étude technique et accompagnement

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 Nathalie Mota Photographe.
Ce projet visait à concevoir un site vitrine pour une photographe professionnelle, combinant un haut niveau d’exigence esthétique et des fonctionnalités avancées en WordPress.

Mon rôle a consisté à guider les étudiants pas à pas, à clarifier les attendus, et à leur transmettre des méthodes pour surmonter les difficultés techniques, sans jamais fournir de solution clé en main.

Description du projet

Le projet se distingue par sa complexité, car il demandait aux étudiants d’intégrer à la fois :

• Custom Post Types (CPT) et taxonomies personnalisées pour organiser les photos.
• ACF avancés pour enrichir les fiches photos.
• Filtres AJAX pour naviguer dynamiquement dans les galeries.
• Lightbox personnalisée en JavaScript pour mettre en valeur les clichés.
• Une approche responsive et optimisée en performance, essentielle sur un site photo.

J’ai encouragé les étudiants à adopter une approche progressive : poser d’abord les bases (CPT, templates, intégration des images), puis ajouter les filtres, la lightbox et enfin les optimisations visuelles.

Technologies étudiées

• WordPress (CPT, taxonomies, thème personnalisé)
• Advanced Custom Fields (ACF)
• JavaScript ES6 / AJAX (filtres, interactions)
• HTML5 / CSS3 (responsive, animations, modularité CSS)
• PHP (gestion des templates WordPress)

Étapes guidées

1. Analyse des maquettes et cadrage des besoins.
2. Mise en place des CPT et des taxonomies.
3. Intégration des champs personnalisés via ACF.
4. Développement des filtres AJAX.
5. Implémentation d’une lightbox en JavaScript.
6. Optimisation responsive et performance.
7. Vérifications finales et ajustements UX.

Points pédagogiques clés

• Importance d’un naming CSS cohérent et d’une liaison claire avec le JavaScript.
• Séparation nette entre Shortcodes et CPT pour une meilleure maintenabilité.
• Modularité du code (ex. isoler block-photo.php dans /template-parts/).
• Sensibilisation au design responsive et aux bonnes pratiques de performance.

Mon rôle : accompagner, clarifier, et outiller les étudiants pour qu’ils développent eux-mêmes les solutions, tout en comprenant les logiques avancées d’un projet WordPress professionnel.