Le projet le plus complet de ma formation. Le site souhaité par Nathalie Mota est relativement simple : un format de site internet qui permette au type de contenu qu’elle publie de s’afficher ou de se modifier simplement. Il faut que le site puisse afficher les photos ajoutées, avec les informations correspondantes. Le code source du projet se trouve ici.
I. Thème et début du projet Mota
Pour ce faire, j’ai d’abord cherché une base de code sur laquelle me reposer. Le thème Underscores (_S) est un « starter theme », un thème dépourvu de presque toutes les fonctionnalités avancées. Ainsi, on a une structure viable et malléable pour l’ajout de contenu ou la mise en page. J’ai pu éviter le syndrome de la page blanche au début du projet !
Enfin, même si on a une base, l’ensemble du code est à rédiger. Il en va de même pour la structure des pages en HTML, le php pour les fonctionnalités, etc.
Un ensemble d’extensions a été retenu pour le projet. Parmi elles Contact Form 7 pour les formulaires de contact, CPT UI pour les articles photos, ACF pour les champs spécifiques aux articles, et Converter For Media. Converter optimise le poids des images, ce qui s’avèrera crucial pour un site de photos ! Ces extensions couvrent les besoins généraux du site. On peut donc se concentrer sur la suite.
II. La galerie Nathalie Mota
On a fait de la page d’accueil par défaut de notre thème personnalisé une page d’archive des articles types photos. Cette galerie sera donc mise à jour à chaque photo ajoutée.
La galerie est générée par des boucles php. Si l’on regarde le fichier home.php, on a un query pour les 8 dernières photos ajoutées. Nos boutons de filtre récupèrent les catégories, format et dates par ACF ou par récupération du contenu de la page. Une fois les paramètres et les images chargées, on peut commencer à interagir avec les boutons. Les boutons de filtres vont appeler une fonction en JavaScript dans le fichier filter.js. Cela désactivera l’affichage des images ne correspondant pas aux critères.
Au clic sur le bouton de chargement de photos supplémentaires, le fichier functions.php entre en jeu et active la fonction load_posts_by_ajax_callback(). Elle fonctionne comme la boucle de base de la page.
Les photos de la galerie sont aussi doublées d’un overlay. L’overlay est constitué du fond noir transparent, d’un bouton plein écran et un lien vers l’article, et des infos en bas de l’image.
Les filtres pourraient ne pas fonctionner sur les photos appelées après le chargement initial. Ils fonctionnent pourtant, de par le fait que la fonction de filtrage écoute le body entier et pas seulement la galerie.
III. La modale de contact
Le fichier script.js contient le script qui va permettre l’affichage de la modale de contact.
En cliquant sur contact dans le menu du site, le formulaire de contact apparaît. Le formulaire se ferme lors de l’appui sur la touche échap, ou au clic en dehors de la boîte.
Il permet d’envoyer un message à Nathalie Mota au travers d’une interface simple.
En plus du formulaire générique de contact, chaque page de publication d’une photo dispose de son propre bouton de contact. Ce bouton va nous donner un formulaire dont la partie référence photo sera pré-remplie de la référence de la photo dans l’article.
IV. Les publications de Nathalie Mota
Le fichier single-photos.php est la page qui affichera le contenu de l’article photo.
On voit la structure de la page, l’appel du contenu de l’article et la fonction en dessous qui appellera des photos.
La majeure partie du travail sur cette page s’est fait par le CSS : le contenu de la page photo est plus ou moins l’ensemble des fonctions classiques d’un article WordPress (titre, image mise en avant, informations, articles suivant et précédents).
Les photos recommandées en bas de page le sont par une fonction retenant la catégorie de la photo d’article pour sélectionner des photos similaires.
Enfin, un bouton pour nous emmener sur la page d’archive voir toutes les photos.
V. Le menu
Le menu pour grand écran est simple au possible : les trois liens menant vers les pages concernées. Sur mobile en revanche, nous avons un menu burger.
On a donc besoin d’un overlay recouvrant l’ensemble du body du site, que l’on cachera sauf si l’on clique sur l’icône burger en haut à droite.
Les liens à l’intérieur sont transformés pour être blanc sur fond rouge. Quand le menu est actif sur mobile, on attribue la position fixed au body pour bloquer la page.
L’en-tête n’étant pas sticky, il faudra être en haut de page pour accéder au menu, ce qui répond à la question de réinitialisation du défilement lors de l’application de l’attribut position: fixed; au body.
Avec ces fonctionnalités, on a un site que l’on peut maintenir et modifier pour ajouter des catégories des formats et d’autres critères pour les photos, et on a aussi un moyen de contact de la part de clients.
On peut toujours imaginer la suite : une newsletter pour fidéliser un audimat, des liens vers les réseaux sociaux de Nathalie Mota, une partie vidéo si le besoin s’en fait sentir, etc. Il n’y pas de limite !