Audry Perez - P11-NathalieMota

Créez un site WordPress complexe pour une photographe freelance

Audry Zeneth Pérez - Projet 11 - Formation: Développeur WordPress

< AudryWP Solutions __/>

Sommaire

Développement sous WordPress

Introduction au Projet

Resultat et livraison

Ressources

Conclusion

Cahier des Charges

Objectif: Créer un site WordPress personnalisé permettant à Nathalie de gérer son contenu et de choisir son propre hébergeur. - Mettre en avant ses travaux pour attirer de nouveaux clients. - Offrir une interface conviviale pour que ses clients puissent accéder facilement aux galeries de photos. - Avoir un site qui s'adapte parfaitement aux dispositifs desktop et mobiles, respectant les maquettes fournies par son graphiste.

INTRODUTION

Contexte: Nathalie Mota, est une photographe professionnelle spécialisée dans l'événementiel. Avec plusieurs années d'expérience

Récemment, Nathalie a rencontré un problème majeur : la plateforme sur laquelle elle avait construit et hébergé son site web a soudainement fermé, entraînant la perte de son site internet. Cette situation imprévue a non seulement perturbé sa visibilité en ligne, mais a aussi compromis son principal outil de communication avec ses clients.

Ressources

Cahier des Charges

Spécifications Fonctionnelles

Accès aux galeries de photos par les clients:

- Fonctionnalité: Les clients doivent pouvoir accéder facilement aux galeries de photos spécifiques à leurs événements. - Interface Utilisateur: Une page dédiée pour chaque photo. - Expérience Utilisateur: Navigation intuitive et rapide à travers les galeries, avec la possibilité de visualiser les photos en haute résolution.

Design respectant les maquettes fournies:

- Respect du Design: Implémentation fidèle des maquettes fournies par le graphiste de Nathalie pour assurer une cohérence visuelle. - Éléments de Design: Utilisation des couleurs, typographies, et mise en page exactement comme spécifié dans les maquettes. - Personnalisation: Création d’un thème WordPress pour correspondre précisément aux maquettes.

Adaptabilité en mode desktop et mobile:

- Responsive Design: Assurer que le site est entièrement responsive, fonctionnant parfaitement sur tous les appareils (ordinateurs, tablettes, smartphones). - Tests de Compatibilité: Réalisation de tests sur différents appareils et navigateurs pour garantir une expérience utilisateur fluide et uniforme.

Creer le theme personnalisé

● Installation de Wordpress en local ● Création d’une Base De Données sur phpMyAdmin ● Création du thème personnalisé “PhotographeNathalieMota” ● Ajout des fichiers index.php, style.css et functions.php obligatoire pour le site.

Développement sous WordPress

Header et footer

Modale de contact

structure du contenu

IntégrATION DU template “single”

● Création d’un template part “single-photo.php” ● Intégration du header, du template part et du footer dans “single-photo.php” ● Intégration du code html et php en récupérant les champs et taxonomies que j’identifie dans des variables afin de pouvoir les faire apparaître dans mon code ● Intégration d’un nouveau template “block-photo.php” afin de faire apparaître les photos similaires ● Ajout de l'icône de l’oeil permettant l’accès à leurs pages respectives ● Dynamisation du template en ajoutant les effets sur les flèches, l’auto remplissage de la référence lors du clique sur le CTA

IntégrATION page d’accueil

La section 'hero' affiche une bannière en haut de la page d'accueil avec une image de fond choisie aléatoirement parmi les photos du site. Grâce à la fonction get_random_background_image() On récupére l'URL d'une image mise en avant d'une photo sélectionnée aléatoirement, puis affiche le titre de la section avec le contenu spécifié dans le champ personnalisé avec l'extension ACF hero_title.

IntégrATION page d’accueil

La page d'accueil affiche huit photos dynamiques grâce au fichier: liste-photos.php, qui utilise WP_Query pour récupérer les publications de type photo et appelle block-photo.php pour afficher chaque photo avec ses détails (titre, catégorie, icônes).

Dans la page d'accueil j'utilise des templates réutilisables pour une meilleure organisation et maintenance.

IntégrATION page d’accueil

La pagination: Bouton "Afficher Plus" permet de charger dynamiquement des photos supplémentaires sur la page d'accueil. Dans functions.php: - La fonction enqueue_load_more_photos_script() enregistre et localise les scripts JavaScript nécessaires pour la pagination et les filtres. - La fonction load_more_photos() gère les requêtes AJAX pour récupérer les photos supplémentaires selon l'offset et les filtres. Le script pagination.js écoute le clic sur le bouton "Charger plus", envoie une requête AJAX pour récupérer les nouvelles photos, puis met à jour la page avec ces photos tout en augmentant l'offset pour la prochaine requête. Le bouton "Charger plus" est défini dans front-page.php.

IntégrATION page d’accueil

Dans 'functions.php':

• On enregistre et charge les scripts et styles nécessaires pour le plugin Select2, qui améliore les menus déroulants.
• On enregistre les scripts pour la pagination et les filtres, puis nous localisons les paramètres AJAX pour les utiliser dans le front-end.
• La fonction load_more_photos() traite les requêtes AJAX, vérifie le nonce pour la sécurité, récupère les paramètres, et exécute une requête WP_Query pour récupérer les photos selon les filtres sélectionnés.

Dans 'filtres.js ':

• On gère la mise à jour des photos en fonction des filtres sélectionnés par l'utilisateur.

Dans 'filtres.php' :

• On génère les menus déroulants pour les filtres des catégories, formats et années.

IntégrATION DE la lightbox

Pour intégrer la lightbox dans ce projet, j'ai créé une structure HTML et un script JavaScript .

resultaT

Et voilà, nous avons parcouru toutes les étapes de la création de ce thème personnalisé pour la photographe freelance Nathalie Mota ! Maintenant il est temps de voir le résultat en action...

Conclusion

Grâce à ce projet:

- Nous avons créé un thème WordPress complètement personnalisé pour une photographe freelance, mettant en avant ses œuvres de manière élégante et fonctionnelle. - Nous avons intégré des fonctionnalités avancées telles que la pagination dynamique, des filtres interactifs et une lightbox intuitive pour une expérience utilisateur optimale. - Ce projet démontre notre capacité à développer des solutions sur mesure qui répondent aux besoins spécifiques des clients, en combinant design et technologie pour offrir une plateforme professionnelle et esthétique. Nous espèrons que ce projet permettra à notre cliente de présenter ses travaux photographiques de manière impactante et engageante.

Templates-parts.php lightbox.php : - Structure : Contient un overlay sombre en arrière-plan, un conteneur pour l'image en grand, un bouton de fermeture, et des boutons de navigation (précédente/suivante). - Conteneur : Comprend l'image, la légende avec la catégorie et la référence, et des boutons de navigation.

lightbox.js - Chargement : Attend que la page soit entièrement chargée avant d'attacher les événements. - Ouverture : Lorsqu'on clique sur une image, la lightbox s'ouvre et affiche l'image en grand avec ses détails. - Navigation : Permet de passer à l'image suivante ou précédente. - Fermeture : Un bouton permet de fermer la lightbox.