Apprendre WordPress : Advanced Custom Fields (ACF)

Custom Post Type (CPT), Custom Taxonomy (CT) et Advanced Custom Fields (ACF) : personnalisez WordPress comme vous le voulez.

IcĂŽne de calendrier
DĂ©butant
9 chapitres

Dans ce guide, nous allons découvrir comment personnaliser les champs des CPT avec Advanced Custom Fields (ACF).

Qu’est-ce qu’un Advanced Custom Fields ?

Vous ĂȘtes trop limitĂ© par les champs de base de WordPress lorsque vous crĂ©ez un CPT ? Un titre, un extrait, une image de couverture, l’éditeur Guttenberg
 bon c’est pas mal, mais c’est parfois insuffisant !

Vous souhaitez par exemple que votre CPT Recette ait des champs spécifiques :

  • Temps de prĂ©paration
  • IngrĂ©dients
  • DifficultĂ©

Comment s’y prendre ? đŸ€”

Vous pouvez alors :

  1. DĂ©finir ces informations directement dans l’éditeur de bloc Guttenberg
 👎
  2. Les isoler proprement dans des champs personnalisĂ©s ! 👍

Pour activer cette fonctionnalité, vous avez 2 options : utiliser les champs personnalisés natifs de WordPress ou utiliser un plugin tel que ACF, utilisé précédemment pour créer nos CPT et taxonomies.

Créer un Advanced Custom Fields

Nativement avec WordPress

WordPress permet nativement de créer des champs personnalisés à rattacher à des types de posts.

Cette option est accessible depuis la page de crĂ©ation/modification d’un post :

  1. Cliquer sur ⋼ en haut à droite de l’interface
  2. Cliquer sur Préférences
  3. Dans GĂ©nĂ©ral descendre jusqu’à la section AvancĂ© et activer Champs personnalisĂ©s
Activer les champs personnalisés dans WordPress
Activer les champs personnalisés dans WordPress

Si vous cliquez sur le bouton pour recharger la page, vous verrez alors apparaĂźtre sous l’éditeur de bloc Guttenberg un formulaire permettant de dĂ©finir votre premier champ personnalisĂ©.

Définir des champs personnalisés dans WordPress
Définir des champs personnalisés dans WordPress

Ok c’est pas mal, mais vous remarquerez que ces champs personnalisĂ©s permettent uniquement de saisir du texte
 Pour bĂ©nĂ©ficier d’autres types de champs (cases Ă  cocher, upload de fichier
), nous pourrons compter sur le plugin ACF Ă©voquĂ© prĂ©cĂ©demment.

Avec le plugin ACF

Si ACF est un candidat idĂ©al pour crĂ©er des CPT et Taxonomies, il a, Ă  l’origine, Ă©tĂ© crĂ©Ă© pour crĂ©er des champs personnalisĂ©s avancĂ©s : les fameux « Advanced Cusom Fields ».

Advanced Custom Fields (ACF) permet de créer facilement des champs personnalisés riches et de les associer à vos CPT. ACF permet, entre autres, de créer des champs du type :

  • Checkbox / radio
  • Upload de fichier
  • SĂ©lecteur de Date
  • SĂ©lecteur de couleur
  • Google Map
  • Relation vers d’autres CPT et/ou taxonomies
  • Editeur WYSIWYG
  • Galerie
  • Etc.

Pour créer des champs personnalisés avec ACF, il faut :

  1. AccĂ©der Ă  ACF > Groupes de champs dans le menu d’administration de WordPress.
  2. Cliquer sur Ajouter.
  3. Définir pour chaque champ souhaité son libellé et son type (le nom étant automatiquement généré).
Création d'un groupe de champs
Création d'un groupe de champs
  1. Enfin, il ne reste plus qu’à spĂ©cifier Ă  quel(s) CPT rattacher ce groupe de champs. Cela peut ĂȘtre dĂ©fini selon un certain nombre de conditions : type de publication, modĂšle choisi, utilisateur, etc.
Condition d'affichage du groupe de champs
Condition d'affichage du groupe de champs

Afficher des ACF

Il existe plusieurs maniĂšres d’afficher ses champs personnalisĂ©s.

Via des page builders

Les principaux page builders tels que Divi ou Elementor intĂšgrent des fonctionnalitĂ©s permettant d’afficher des champs personnalisĂ©s crĂ©Ă©s avec ACF.

Via des plugins

Si vous n’utilisez pas de page builders, afficher des champs personnalisĂ©s demeure possible en installant des plugins spĂ©cifiques de type « Framework » comme Advanced Views ou Pods.

Via le code

Si vous avez des compétences techniques et souhaitez une personnalisation maximale, ACF met à disposition des fonctions PHP comme get_field() ou the_field() pour afficher les champs personnalisés que vous avez créés avec ACF dans votre thÚme ou vos modÚles de page.

Et voilĂ  ! 🎉 Vous avez maintenant toutes les clĂ©s en main pour personnaliser vos CPT avec des champs spĂ©cifiques. Que vous choisissiez d’utiliser les champs personnalisĂ©s natifs de WordPress ou des champs avancĂ©s grĂące au plugin ACF, vous pouvez crĂ©er des expĂ©riences utilisateurs sur mesure pour vos projets WordPress.