6. Elementor Pro – Créer des publications et des champs personnalisés

Objectif :

  • Créer des nouveaux types de publications
  • Créer des nouveaux champs pour personnaliser ces publications
  • Intégrer les valeurs dynamiquement dans votre template Elementor

Intro aux Custom Post Types

CPT signifie “Custom Post Type” → Cet outil va permettre de créer des types de publication. Vous connaissez déjà 2 types de publications : les posts (articles) et les pages.

Qu’est-ce qui définit un type de publication ? C’est tout simplement la façon dont l’information entrée en base de donnée va s’afficher sur le front. En effet, si on décortique WordPress, et qu’on analyse la base de données, tout est enregistré dans une seule table : la table “posts”. C’est la colonne “post_type” qui va définir son utilité :

Cependant les développeurs de WordPress ont développé une fonctionnalité qui permet à n’importe qui de créer d’autres types de publication : la manière “technique” consiste à les déclarer dans un fichier de fonctions à inclure dans le thème appelé “functions.php”. Pour plus d’infos sur la manipulation technique, je vous invite à lire cet article de WP Marmite qui résume bien la chose → **https://wpmarmite.com/snippet/creer-custom-post-type/**

Nous allons voir une version plus simple et qui ne risque pas d’endommager le thème : utiliser le plugin Custom Post Type UI.

Pourquoi utiliser cette fonctionnalité ?

  • Associé à l’extension Custom Post Fields et à Elementor, cela vous permettra de créer des templates de pages uniques et simple à administrer pour vos clients / utilisateurs / ou vous-même !

Voici un exemple concret de ce qu’on va pouvoir créer :

  • Côté back office : un type de publication “Fiche recette” qui va contenir des champs propres a une recette de cuisine (temps de cuisson, ingrédients, étapes de la recette, etc.)
  • Côté Front : une fiche recette qui va se structurer toute seule à partir des données entrées dans les champs du back office

Etape 1 : ajouter et configurer l’extension CPT UI

Vous utilisez déjà des articles pour alimenter un blog ou une section actualités, des pages pour afficher des informations “statiques” ; voyons maintenant comment faire pour, par exemple, ajouter des fiches de recettes qui pourront avoir

Voilà à quoi l’extension ressemble dans la base des extensions :

Comme son nom l’indique, il s’agit d’une interface (UI) simplifiée pour créer les différents types de publications.

Etape 2 : créer votre premier type de publication

  • Rdv dans CPT UI → Ajouter/modifier des types de publication
  • Et remplissez la partie haute comme indiqué dans la capture d’écran ci-jointe :
  • Laissez tous les champs suivants avec leurs valeurs par défaut, descendez jusqu’à “Icône du menu” : choisissez par exemple le “dashicon-food” en guise d’illustration
  • Dans la partie “Supports”, vous pouvez décider des options accessibles aux utilisateurs. Cochez les options suivantes par exemple :
  • Cliquez ensuite sur “enregistrer le type de publication”
  • Normalement, vous devriez voir un nouvel élément dans le menu du back-office :

Bravo, vous avez rempli la première partie du travail ! Si vous cliquez sur “ajouter”, l’interface sera peu ou prou la même que pour une page classique.

On va maintenant voir comment ajouter quelques champs sur cette fiche afin de la rendre plus simple à manipuler par la suite.

❓ En résumé

  • CPT UI signifie Custom Post Types UI (Interface Utilisateur pour Types de Publications Personnalisés).
  • C’est une extension pour WordPress qui permet de créer et de gérer des types de publications personnalisés et des taxonomies personnalisées.

Pourquoi l’utiliser ?

  1. Extension des fonctionnalités : WordPress vient avec des types de publications standards comme les articles (posts) et les pages. CPT UI permet d’ajouter des types de publications supplémentaires selon les besoins spécifiques de votre site.
  2. Organisation et Gestion : Vous pouvez organiser votre contenu de manière plus efficace. Par exemple, un site de recettes peut avoir des types de publications personnalisés pour « Recettes », « Ingrédients », « Ustensiles », etc.
  3. Flexibilité : CPT UI offre une grande flexibilité dans la gestion du contenu. Vous pouvez définir des modèles spécifiques, des métadonnées, et des fonctionnalités pour chaque type de publication personnalisé.

Exemples concrets d’utilisation

Site Web d’une École :

  • Types de publications personnalisés : « Cours », « Professeurs », « Événements ».
  • Chaque « Cours » peut avoir des informations spécifiques comme le programme, la durée, les crédits.
  • Les « Professeurs » peuvent être classés avec des détails sur leurs spécialités, biographies, et horaires de consultation.

Site E-commerce de Mode :

  • Types de publications personnalisés : « Vêtements », « Accessoires », « Marques ».
  • « Vêtements » peut inclure des catégories comme « Robes », « Pantalons », « Chaussures ».
  • Chaque produit peut avoir des détails comme le prix, la taille, le matériau, etc.

Blog de Voyage :

  • Types de publications personnalisés : « Destinations », « Conseils de Voyage », « Critiques d’Hôtels ».
  • « Destinations » pourrait inclure des informations sur le climat, les attractions, les moyens de transport.

… Et bien d’autres encore !

Etape 2 : installer et utiliser Advanced Custom Fields

Voici à quoi l’extension ressemble dans la base des extensions :

Une fois l’extension activée, vous verrez là encore un nouvel item dans le menu de WordPress : “Champs personnalisés”

Nous allons créer une structure pour une fiche de recette qui comprendra les champs suivants :

  • Durée de préparation
  • Liste des ingrédients
  • Etapes de la recette
  • Durée de cuisson

Voici comment procéder pour structurer vos fiches recettes :

  • Cliquez sur “Ajouter un groupe de champs”
  • Donnez un nom à ce groupe. Exemple : fiche recette
  • Ensuite, vous allez pouvoir créer les champs à remplir :
    • Un champ “nombre” pour la durée de préparation

Notez que vous pouvez définir des conditions de validation, ajouter une petite aide contextuelle et ajouter des conditions d’affichage via les onglets qui se trouvent en haut (”Général”, “Validation”, “Présentation” et “Logique conditionnelle”)

Cliquez ensuite sur “ajouter un champ” en bas à droite :

Et répétez l’opération pour les différents autres champs prévus, à savoir :

  • Un champ “éditeur WYSIWIG” pour la liste des ingrédientsUn champ “éditeur WYSIWIG” pour les étapes de la recetteUn champ “nombre” pour la durée de cuisson
(l’éditeur WYSIWIG désigne un champ dans lequel il est possible d’utiliser des options de mise en forme)

Un peu plus bas, dans “Réglages”, attachez les règles de localisation au type de publication “fiche recette”

Puis vous pouvez valider les modifications

Si tout est bien rempli, lorsque vous cliquerez de nouveau sur “ajouter” dans l’onglet “fiches recettes”, vous devriez voir votre groupe de champs apparaitre en bas :

Remplissez chaque champ en copiant-collant par exemple le contenu de cette fiche : https://www.papillesetpupilles.fr/2013/08/spaghetti-bolognese.html/ (c’est pour l’exercice, on ne vous en voudra pas !)

Ensuite, enregistrez puis allez voir en front ce que ça donne…

… C’est la douche froide hein ? Vous vous attendiez à voir le contenu des différents champs apparaître comme par magie ?

Et bien non, il va falloir travailler un peu plus et gérer leur apparence !

❓ En résumé

  • ACF signifie Advanced Custom Fields (Champs Personnalisés Avancés).
  • C’est un plugin pour WordPress qui permet d’ajouter des champs personnalisés à vos pages, articles, et types de publications personnalisés.
  • ACF rend la saisie de données plus structurée et facile pour les utilisateurs de WordPress.

Pourquoi l’utiliser ?

  1. Personnalisation Avancée : ACF permet d’ajouter différents types de champs (texte, image, sélection, etc.) aux éditeurs WordPress, rendant la personnalisation de votre contenu plus facile et plus flexible.
  2. Facilité d’Utilisation : Avec ACF, même ceux qui n’ont pas de compétences en programmation peuvent ajouter et gérer des données complexes sur leur site.
  3. Intégration et Flexibilité : ACF s’intègre bien avec d’autres plugins et thèmes WordPress, permettant une personnalisation avancée sans perturber les fonctionnalités existantes.

Exemples concrets d’utilisation

Blog Culinaire :

  • Ajout de champs personnalisés pour les recettes : ingrédients, temps de préparation, niveau de difficulté, etc.
  • Ces champs facilitent la saisie des informations par l’auteur et la présentation uniforme des recettes aux lecteurs.

Site d’Agence Immobilière :

  • Utilisation d’ACF pour ajouter des détails sur les propriétés : surface, nombre de chambres, localisation, prix.
  • Ces champs aident à structurer les informations des annonces et à faciliter la recherche pour les utilisateurs.

Portfolio d’un Photographe :

  • Champs personnalisés pour chaque photo : date de prise de vue, équipement utilisé, lieu, description.
  • Permet au photographe de présenter des détails pertinents de manière organisée.

… Bref vous l’aurez compris, chaque métier peut y trouver son utilité !

Etape 3 : gérer l’affichage des champs avec Elementor pro et le constructeur de thème

Maintenant que vous avez quelques connaissances sur Elementor, vous allez pouvoir entrer dans le vif du sujet : rdv dans le constructeur de thème

Pour ce faire nous allons passer par le template “single page” :

Pour aller + vite dans la construction de notre fiche recette, nous pouvons prendre un bloc pré-construit (après tout, c’est fait pour ça 😉 )

Pour avoir un aperçu de notre fiche recette, avant la moindre modification nous allons appliquer le design à la fiche des spaghettis déjà créée via les réglages généraux de la page

Cliquez ensuite sur “Apply and preview” pour valider votre choix. Le contenu du champ “description” ainsi que le titre de la fiche doivent s’afficher :

Nous allons pouvoir ajouter le contenu des différents champs en utilisant l’option “champ dynamique” des widgets d’Elementor…

Commençons par mettre un compteur qui indique le nombre de minutes que vous avez entré dans la fiche :

  • Ajoutez une section en 2 colonnes au dessus de la description
  • Mettez un widget “compteur” dans la colonne gauche
  • Dans les paramètres de mise en page du compteur, voici comment appeler dynamiquement la valeur entrée dans le champ du formulaire “temps de préparation” de la fiche recette
    • Cliquez sur l’icone à côté du nombre de fin, qui représente un attribut dynamique (= qui va piocher ses valeurs dans la base de données directement 😉 )
    • Sélectionnez le champ ACF Number Field
  • Ensuite, le champ ressemble à cela – cliquez sur la petite clé à molettes puis choisissez la durée de préparation dans le champ “Key”
  • Ajoutez le symbole “ dans le suffixe du nombre, cela devrait vous donner quelque chose comme ça visuellement :

Et voilà : vous avez appris une chose hyper utile et fondamentale quand on parle sérieusement de WordPress : vous avez utilisé et présenté sur le front une valeur dynamique enregistrée dans la base de donnée grâce à un champ personnalisé.

La classe n’est-ce pas ?! Imaginez le potentiel de WordPress maintenant : vous allez pouvoir créer des interfaces d’administration entièrement personnalisables pour vous faciliter le travail de gestion de vos sites au quotidien.

Allez jeter un oeil aux autres widgets dans WordPress, comme par exemple l’éditeur de texte. Vous ne remarquez pas une icône familière en haut à droite ?

Cliquez dessus et voyez ce que ça vous propose… Ah tiens, un champ ACF ?

A priori on peut récupérer toutes les valeurs ici !

Choisissons la liste des ingrédients… Et ça doit normalement vous donner ça →

On peut terminer le travail en mettant les étapes dans un autre champ texte, puis mettre le temps de cuisson à droite du temps de préparation par exemple…

Une fois le template terminé, on va l’appliquer à toutes les futures fiches créées de la sorte :

  • Cliquez sur “Publier” en bas à gauche
  • Dans les options d’affichage (”Display”) choisissez toutes les fiches recettes
  • Puis sauvegardez.

Vous pouvez désormais créer autant de fiches recettes que vous le désirez : elles auront toutes la même allure :

Vous voilà armés pour tout type de projet désormais !

Checkpoint

Pour valider votre travail, merci d’envoyer sur Google Classroom les éléments suivants :

  • Une capture d’écran de votre type de publication personnalisée côté administration (on doit voir le type de publication + les champs personnalisés)
  • Une capture d’écran du rendu de votre publication côté public, intégrée dans un template créé avec Elementor.