Avec plus de la moitié des sites web qui l’utilisent comme partie intégrante de leur back-end, WordPress est le CMS le plus populaire au monde. Mais, le système natif de WordPress est assez limité en termes de fonctionnalités. Des plugins comme Advanced Custom Fields (ACF) peuvent ajouter plus de caractéristiques à votre site et vous donner plus d’options et de fonctionnalités personnalisables. Dans cet article, nous allons vous détailler ce qu’est ACF et comment l’utiliser pour ajouter des champs personnalisés là où vous le souhaitez.

Qu’est-ce que le plugin Advanced Custom Fields ?

Advanced Custom Fields (ACF) est un plugin WordPress qui permet aux développeurs de créer des sites web plus sophistiqués et plus conviviaux. Pour ce faire, il porte le système de champs personnalisés (ou field) – une fonctionnalité essentielle de WordPress – à un tout autre niveau en fournissant une collection standardisée de champs, chacun avec ses propres capacités.

ACF est un outil utile pour :

Améliorer l’expérience de la saisie de métadonnées dans la base de données de WordPress.
Contrôler et normaliser les données lorsqu’elles sont stockées dans la base de données.
Afficher les métadonnées sur la page d’accueil d’une manière propre et stable.

D’autres fonctionnalités incluent la prise en charge des pages d’options personnalisées, des formulaires front end et des blocs Gutenberg personnalisés.

Cet ensemble de fonctionnalités a fait d’Advanced Custom Fields (ACF) un outil très populaire dans l’industrie WordPress tirant parti de la puissance et de la flexibilité qu’il offre.

Quelles sont les principales fonctionnalités d’ACF pour WordPress ?

ACF est vite devenu un plugin incontournable pour les développeurs, leur offrant des possibilités illimitées de personnalisation et d’amélioration de leurs sites WordPress. Voici ce qu’il faut retenir :

1. Les types de champs personnalisés ACF

L’un des principaux atouts d’ACF réside dans sa capacité à gérer des données personnalisées de manière transparente. Avec plus de 30 types de champs à votre disposition, vous pouvez capturer et afficher toutes les informations dont vous avez besoin. Par exemple, vous pouvez créer des champs pour recueillir des témoignages de clients, des spécifications de produits, des détails d’événements ou même des structures de données complexes.

L’extension Advanced Custom Fields vous permet également de créer des galeries pour présenter une collection d’images, et le champ « répéteur » permet de créer facilement des listes dynamiques, par exemple. Les possibilités sont vraiment infinies. D’ailleurs, voici la grande majorité des champs qui seront à votre disposition dans ce plugin :

Texte : Champ de texte d’une seule ligne avec support HTML optionnel et limite de caractères
Zone de texte : Field identique à Texte mais avec plusieurs lignes
Nombre : Champ numérique pouvant comporter des valeurs min/max facultatives.
E-mail : Champ personnalisé pour la saisie d’un email, y compris la validation
Mot de passe : Field pour entrer un mot de passe avec masquage de texte
Éditeur WYSIWYG : Champ qui permet d’entrer dans l’éditeur WordPress pour ajouter des médias et des boutons d’édition.
Image : Field permettant de télécharger une image ou d’en sélectionner une dans la bibliothèque de médias.
Fichier : Même champ que « image », mais pour les fichiers en général.
Sélection : Ce field permet d’insérer un menu déroulant avec prise en charge de sélections multiples.
Checkbox : Champ de case à cocher pour un ou plusieurs éléments.
Bouton radio : Champ qui permet la sélection d’un seul élément à l’aide d’un bouton radio.
True / False (Vrai / Faux) : Field de base pour sélectionner « vrai ou faux ».
Lien de page : Ce field renvoie à l’URL d’un article ou d’une page.
Taxonomie : Champ renvoyant un objet ou un identifiant pour une ou plusieurs taxonomies. Elle peut être limitée aux étiquettes, aux catégories ou aux termes de taxonomie personnalisés.
Sélecteur de date : Field pour sélectionner une date du calendrier et renvoie une chaîne de date formatée.
Sélecteur de couleurs : Champ pour sélectionner une couleur hexadécimale.
Onglet : Enfin, ce champ permet de combiner plusieurs champs dans une interface à onglets.

ACF vous permet également de définir des règles pour déterminer où ces champs apparaîtront dans l’administration de WordPress. Vous pouvez ainsi n’afficher les champs personnalisés que dans certaines catégories d’articles, par exemple.

En bref, ACF rend l’extension de votre contenu avec des métadonnées personnalisées ultra facile et vous donne un contrôle complet sur la façon dont elles sont utilisées sur votre site WordPress.

2. CPT et gestion de la taxonomie avec ACF

Depuis la version 6.1 d’ACF, le plugin vous permet d’enregistrer facilement des Custom Post Types (CPT) et des Taxonomies. Cela signifie que vous pouvez définir et gérer différents types de contenu au-delà des posts et des pages traditionnels.

Par exemple, vous pouvez créer un CPT « Portfolio » pour présenter vos projets ou un CPT « Recettes » pour partager vos créations culinaires. Avec ACF, vous avez la possibilité d’adapter la structure de votre site WordPress à vos besoins spécifiques.

3. Les pages d’options avec ACF

ACF vous permet de créer des pages d’options, qui agissent comme des centres de gestion centralisée des paramètres de l’ensemble d’un site WordPress. Cette fonction est particulièrement utile lorsque vous devez configurer des paramètres globaux, tels que les couleurs du site, le logo, les liens vers les réseaux sociaux ou les scripts personnalisés.

Grâce aux pages d’options d’ACF, vous pouvez rationaliser la gestion de ces paramètres, ce qui facilite le maintien de la cohérence sur l’ensemble de votre site WordPress.

4. Les blocks Gutenberg avec ACF

Avec la montée en puissance de l’éditeur Gutenberg, ACF propose une intégration grâce à sa fonctionnalité ACF Blocks. Les blocks ACF vous permettent de créer et d’ajouter des blocks Gutenberg personnalisés sans aucun effort. Un bloc est un élément de construction pour le contenu de votre site web.

Par exemple, vous pouvez créer un block personnalisé pour présenter un slider de témoignages, une section d’appel à l’action ou une fonctionnalité « mise en avant ». Un block un moyen simple et intuitif d’étendre les capacités de l’éditeur Gutenberg, en vous donnant plus de contrôle sur le processus de création de contenu.

Comment utiliser ACF sur WordPress ?

Maintenant que vous en savez davantage sur les fonctionnalités d’Advanced Custom Fields (ACF), voyons comment utiliser le plugin sur votre site WordPress :

Installation de l’extension Advanced Custom Fields sur WordPress

Rendez-vous dans la section « Plugins » de votre tableau de bord de votre site WordPress.
Tapez « Advanced Custom Fields » ou simplement ACF dans la barre de recherche.
Localisez le plugin ACF dans les résultats de la recherche et cliquez sur le bouton « Installer maintenant ».
Une fois l’installation terminée, cliquez sur le bouton « Activer » pour activer le plugin ACF.

Le plugin est maintenant actif et se trouve sur le menu de gauche de votre page administrateur.

Création de champs personnalisés avec Advanced Custom Fields

La création de champs personnalisés, ou field, est le cœur de la proposition d’ACF. Voici comment faire :

Accédez à l’interface du plugin ACF et cliquez sur « Ajouter ». Vous devez alors donner un nom à votre groupe de champs. Pour cet exemple, nous allons appeler ce groupe de champs « Avis Churchill » car nous souhaitons récolter des avis directement via notre page d’accueil.

Une fois que le groupe de champ est créé, il va falloir ajouter un premier « field ». Pour que cela soit cohérent avec notre groupe de champs Avis Churchill, le 1er champ sera « Note ». Le type de champ sera alors défini sur Nombre.

Une fois le field validé, rendez-vous dans l’onglet « Validation » pour entrer la valeur minimum et maximum. Ici, 0 et 10 correspondant à la note minimum et maximum.

Si vous souhaitez ajouter d’autres fields à votre groupe « Avis Churchill », procédez de la même manière. Par exemple, vous souhaitez que les personnes en disent plus sur les « plus » et les « moins » de leur expérience ? Le type de champ sera alors Éditeur WYSIWYG pour que les personnes puissent rédiger un avis textuel. Il existe des dizaines de champs que vous pouvez personnaliser.

Les règles de localisation avec ACF

Les règles de localisation déterminent l’endroit où les champs ACF seront affichés. Explorons les différentes options disponibles :

Page

Vous pouvez faire apparaître les champs ACF à des pages spécifiques de votre site WordPress. Cela signifie que vous pouvez créer des champs personnalisés qui ne sont visibles et modifiables que lors de l’édition de certaines pages. Par exemple, vous pouvez avoir un champ Fichier « Historique de l’entreprise » qui n’apparaît que sur la page « Accueil » de votre site WordPress.

Post

Comme pour les pages, les champs ACF peuvent apparaître sur des posts spécifiques. Cela vous permet de personnaliser les données associées à chaque article séparément. Par exemple, vous pouvez avoir un champ « Note » qui n’apparaît que lors de l’édition d’un post « Critique de film », ce qui vous permet d’attribuer une note à ce film spécifique.

Type de message personnalisé

Outre les pages et les articles, les champs ACF peuvent être associés à des types d’articles personnalisés. Les types d’articles personnalisés permettent de créer des structures de contenu adaptées à vos besoins spécifiques.

Par exemple, si vous avez une boutique WooCommerce et que vous utilisez le type d’article personnalisé « WooProducts », vous pouvez attacher des champs ACF à ce type d’article pour capturer des informations supplémentaires sur le produit, comme le SKU, le prix ou les spécifications.

Comment faire apparaître les champs ACF sur votre site WordPress ?

Lorsqu’il s’agit d’afficher les champs créés avec le plugin ACF, il y a plusieurs approches possibles.

#1 Afficher les champs ACF avec la fonction get_field()

L’une des méthodes les plus basiques consiste à utiliser la fonction get_field(). C’est un moyen flexible de récupérer et d’afficher les valeurs des champs. Mais, pour simplifier le processus, il existe un add-on, appelé ACF Views. Cet add-on est gratuit et offre un moyen plus simple d’afficher des champs ou des articles ACF sélectionnés n’importe où sur votre site WordPress à l’aide de shortcodes.

#2 Afficher les champs ACF avec la « méthode » PHP

Cette « méthode PHP » est davantage réservée aux utilisateurs WordPress confirmés et à ceux qui maîtrisent le code. Il suffit d’ajouter les fonctions PHP d’Advanced Customer Fields (ACF) dans le fichier modèle de votre thème. Utilisez alors la fonction the_field() de ACF pour afficher les informations d’un champ. Par exemple, si vous souhaitez afficher le champ « distance », le code sera alors <?php the_field(‘distance’); ?>

Pour afficher tous les champs en même temps, il suffit de combiner PHP avec une balise HTML. Cela donnerait alors un rendu comme ceci :

Advanced Custom Fields (ACF) pour WordPress, que retenir ?

Advanced Custom Fields (ACF) s’est imposé comme un outil incontournable pour les utilisateurs de WordPress cherchant à pousser plus loin la personnalisation de leurs sites. Il offre une flexibilité sans précédent, permettant aux développeurs et concepteurs de créer des sites web plus sophistiqués et adaptés aux besoins spécifiques de leur audience ou de leurs clients.

Cet outil est donc particulièrement intéressant pour les développeurs et concepteurs web qui cherchent à offrir des solutions sur-mesure à leurs clients, mais également pour les propriétaires de sites désireux d’exercer un contrôle complet sur la façon dont le contenu est présenté et organisé.

Néanmoins, l’utilisation ACF pour WordPress, bien qu’offrant des possibilités étendues, exige une solide compétence technique. Au-delà d’un simple plugin, ACF se distingue comme un instrument de développement nécessitant une connaissance approfondie de WordPress et de ses nuances.

C’est la raison pour laquelle des agences renommées, telles que l’agence Churchill, ont intégré ACF à l’essence même de leurs services. En exploitant ACF à son plein potentiel, elles parviennent à proposer des solutions web taillées sur mesure, sophistiquées et hautement adaptatives.

Elaine Goldfarb

Elaine, Directrice de production et pilier de l'agence Churchill depuis près 20 ans, a guidé et supervisé d'innombrables refontes de sites internet, affirmant sa position en tant que véritable experte en création de site web. Avec une profonde connaissance en UX, design et développement, elle est la force motrice derrière la transformation digitale de + de 150 clients.