CHAMPS PERSONNALISABLES: TravelEU
Réalisation sur le CMS WordPress, à l’aide du builder Elementor et de plugin adaptés, du site web de l’agence de voyage TravelEU, avec backoffice client permettant de personnaliser le contenu.
En amont, un branding et une charte graphique sont réalisés.
Il est demandé dans le cahier des charges :
- Existence d’une page d’accueil avec texte de présentation (modifiable par le client) et une liste exhaustive des voyages proposés.
- Existence d’une page pour chaque voyage (détail des voyages modifiables par le client).
- Existence d’une page « Qui sommes-nous », avec description de l’agence (modifiable par le client).
- Existence d’une page contenant un formulaire de contact.
- Existence d’une page contenant la politique de confidentialité.
- Site respectant le Règlement Général sur la Protection des Données.
- Call to action « back to top ».
- Site responsive Mobile / Tablet / Laptop 1366×768/ Desktop.
- Back office client lisible, permettant d’effectuer facilement les modifications sans mettre en danger le design ou la fonctionnalité du site.
- Attention donnée à la base de donnée: limitation des révisions durant la phase d’élaboration, nettoyage de la BDD avant livraison.
- Site réalisé sur un serveur dédié au développement, migration du site sur l’hébergeur du client.
Une fois WordPress déployé, j’installe l’ensemble des plug in qui me seront nécessaires, à commencer par Elementor.
Puis je règle le plugin WP Revisions Control pour limiter le nombre de révision de chaque article durant la conception.
Ensuite je crée les pages selon l’architecture du site, et je crée le menu avec un lien sur les pages.
Création des champs personnalisables:
Il s’agit tout d’abord de créer une nouvelle ‘catégorie’ de publications. En utilisant le plugin Custom Post Type UI (CPTUI), je crée une catégorie ‘Voyages’. Je retire la possibilité d’éditer cette catégorie autrement que par des champs personnalisés :
Il est maintenant temps de créer les champs personnalisés à remplir pour cette catégorie:
Avec le plug in ACF, je crée un groupe de champs (nommé « Pour ajouter un voyage ») que j’attribue aux publications de la catégorie « Voyages ».
Désormais, donc, il existe une catégorie de publications nommée Voyages qui ne s’édite qu’avec des champs personnalisables déterminés.
Je crée des exemple de « Voyages » en remplissant les champs demandés (ici: Nom du voyage, description, photo, détails supplémentaires).
Mais pour le moment ces publication ne sont pas visibles: on n’a pas précisé comment ces informations doivent s’afficher!
Je crée un modèle de SinglePost dans le theme builder d’Elementor. Je le nomme « Modele_de_Voyage ».
Dans ce modèle je crée l’emplacement du contenu des champs. Puis je crée un lien vers ces champs grâce aux balises dynamiques.
Désormais, chaque publication de type « Voyage » apparaitra selon le modèle déterminé, avec le contenu des champs personnalisés.
Je crée de la même façon une catégorie de publication « Qui sommes-nous » avec ajout de champs personnalisables (photo + descriptif), mais sans créer de modèle.
Et puis une catégorie « Equipe » avec ACF pour les nom, fonction et photo des collaborateurs. Je n’ai pas besoin de créer un modèle non plus.
Création d'une boucle liée aux ACF:
Je crée un exemplaire de publication de type « Qui sommes-nous ». Ce sera la seule, et constituera la page « Qui sommes-nous ».
On y trouvera un descriptif et une photo de l’agence. Il suffit pour cela de créer à l’aide d’Elementor l’emplacement de ces éléments, et d’utiliser les balises dynamiques pour « aller chercher » le contenu des ACF correspondants.
Je souhaite qu’on puisse y trouver le détail des membres des collaborateurs de l’agence, quel que soit leur nombre.
Pour cela j’ai besoin de créer une boucle pour appeler sur la page les éléments des ACF de chaque collaborateur.
Le plugin ElementorCustomSkin permet de créer des modèles de boucle.
Dans le ThemeBuilder, je crée un modèle de boucle.
Dans ce modèle, je mets en page selon ma volonté les éléments des collaborateurs (nom, fonction, photo) et je crée dynamiquement le lien vers les ACF.
J’enregistre ce modèle de boucle. (ici sous le nom de boucle_equipe)
Une fois de retour sur ma publication « Qui sommes-nous », j’utilise le widget Elementor « posts ».
Dans les options du widgets, je choisis l’habillage « personnalisé », et le modèle choisi (« boucle_equipe »).
Je précise dans le Query du widget d’aller chercher les données des publications « Equipes ».
Ainsi, une boucle se crée automatiquement en fonction du modèle établi et des ACF remplis.
De la même façon, une boucle est créée en fonction des ACF des publications « Voyages ». Elle est placée sur la page « Accueil » pour présenter une liste exhaustive des destinations proposées.
Header, footer, et design:
