Nathalie Mota
Créez un site WordPress complexe pour une photographe freelance
Projet 11 de la formation "Développeur WordPress" d'OpenClassrooms
Détails du projet
En tant que développeur Freelance, je trouve une mission de développement d’un site pour une Photographe Professionnelle dans l’événementiel.
Il s’agit de Nathalie Mota, qui avait un site préconstruit sur une plateforme mais qu’elle a totalement perdu suite à la fermeture de celle-ci.
C’est pourquoi elle aimerait avoir un site directement sur WordPress et chez un hébergeur.
Elle aimerait à travers celui-ci se faire connaître, partager ses photos avec ses clients qui pourront en acheter les droits, les imprimer ou les commander.
Pour ce faire, elle me transmet une maquette, les spécifications fonctionnelles du site, les images à intégrer ainsi que leurs informations.
Processus de réalisation du projet
Pour entamer la création du site, il me faut créer un thème personnalisé pour pouvoir le modifier de manière à ce qu’il ressemble à la maquette.
Je vais créer mes pages header.php et footer.php.
Nathalie Mota aimerait avoir une Pop-up de contact qui serait appelée dans le footer, comme on a pu le voir dans le code de celui-ci.
Celle-ci contiendrait un formulaire que j’ai créé en amont sur Contact Form 7.
Pour récupérer certaines données des images envoyées par Nathalie et les associer aux images, il me faut créer un custom post type « Photo » et les taxonomies « format » et « catégorie » grâce à CPT UI.
Puis les champs ACF « référence » et « type ».
Nos informations étant stockées dans la nouvelle section photo, nous allons les afficher sur une page single.
Grâce à cela, je vais pouvoir créer la page type pour une photo seule, avec ses informations, la photo, un bouton de contact, une petite navigation sous forme de vignettes et une section "images similaires".
Puis je vais me pencher sur la page d'accueil, je commence tout d’abord par le hero, qui affichera une image aléatoire. Suite à cela, j'ajoute une génération de photo-block.php pour intégrer mes photos sous forme de Grid. Enfin, je rajoute une pagination infinie, et les filtres permettant de les trier par catégorie, format et date.
Pour finaliser ce projet, je crée une lightbox au clic d'une icône en hover sur les images pour permettre de les voir en fullsize et permettre de naviguer entre elles.
Langages utilisés
