Tutoriel sur Advanced Custom Fields : Votre guide ultime

Les champs personnalisés WordPress sont une partie importante de ce qui fait de WordPress un outil de gestion de contenu flexible plutôt qu’une « simple plateforme de blog ».

Lorsqu’il s’agit de champs personnalisés WordPress, l’extension Advanced Custom Fields est l’un des noms les plus connus. Il est plus facile de travailler avec des champs personnalisés dans tous les aspects, et c’est aussi le sujet de notre article d’aujourd’hui.

Plus précisément, nous vous expliquerons pourquoi Advanced Custom Fields avancés est si précieux, puis nous vous montrerons étape par étape comment vous pouvez l’appliquer à votre site WordPress.

Voici tout ce que vous trouverez dans cet article :

Il y a beaucoup à couvrir, alors plongeons…

Que sont les champs personnalisés WordPress ? Que vous permettent-ils faire ?

Les champs personnalisés WordPress vous permettent d’ajouter, de stocker et d’afficher des informations supplémentaires sur un élément de contenu dans WordPress. D’un point de vue plus technique, les champs personnalisés vous aident à stocker les métadonnées.

Même si vous n’êtes pas familier avec ce terme, les champs personnalisés alimentent une grande partie des fonctionnalités de vos extensions et thèmes favoris.

Par exemple, WooCommerce, la façon la plus populaire de construire une boutique eCommerce, utilise des champs personnalisés pour stocker des informations supplémentaires sur un produit comme :

• Prix
• Poids
• Couleur

Ou, si vous avez une extension WordPress de calendrier d’événements, cette extension utilisera des champs personnalisés pour stocker des informations supplémentaires sur un événement tel que :

• Lieu
• Heure de début/fin
• Prix

Vous pouvez également créer vos propres champs personnalisés pour stocker des informations pertinentes à vos besoins uniques, ce qui est l’objet de l’article.

Quand devriez-vous utiliser les champs personnalisés ?

Maintenant, vous vous demandez peut-être pourquoi vous avez besoin de champs personnalisés.

Par exemple, si vous voulez publier un événement sur votre site WordPress, ne pourriez-vous pas simplement mettre toutes ces informations sous forme de texte dans l’éditeur de WordPress ?

Eh bien oui, vous pourriez. Mais l’utilisation de champs personnalisés est une meilleure approche pour plusieurs raisons :

• Saisie plus facile – plutôt que de taper les données à partir de zéro, un groupe de champs personnalisé bien conçu facilitera grandement la saisie des données. Par exemple, au lieu de taper une date, vous pouvez simplement sélectionner la date dans un sélecteur de date.
• Cohérence – les informations que vous saisissez dans vos champs personnalisés s’afficheront toujours en fonction de votre configuration, ce qui signifie qu’elles seront cohérentes sur tout votre site.
• Mises à jour et maintenance faciles – si vous voulez changer quelque chose à propos de l’affichage de ces informations à l’avenir, vous pouvez simplement mettre à jour une chose plutôt que d’avoir à modifier chaque article individuellement.

WordPress inclut une fonctionnalité intégrée de champs personnalisés

WordPress inclut en fait une fonctionnalité intégrée pour ajouter des champs personnalisés à votre contenu. Dans l’éditeur classique TinyMCE, vous pouvez l’activer à partir de la zone Options de l’écran. Ou, dans le nouvel éditeur de bloc vous pouvez l’activer à partir de la zone Options :

Vous pouvez ensuite saisir vos données de zones personnalisées à l’aide de combinaisons clé/valeur :

Cette fonctionnalité native de champs personnalisés est totalement fonctionnelle, mais ce n’est pas la façon la plus conviviale de faire les choses, c’est pourquoi beaucoup de gens se tournent vers l’extension Advanced Custom Fields.

Advanced Custom Fields facilite grandement la tâche

En termes simples, Advanced Custom Fields facilite grandement le travail avec les champs personnalisés dans WordPress pour… pratiquement tous les aspects.

Il simplifie l’interface d’ajout et de gestion des champs personnalisés dans votre tableau de bord WordPress et simplifie également le processus d’affichage des informations des champs personnalisés sur l’interface publique de votre site. Rien que ce fait ne fait explique pourquoi il est actif sur plus d’un million de sites avec une note de 4,9 étoiles sur plus de 1.000 avis.

Dans l’administration, il vous permettra de créer des boîtes méta conviviales qui incluent des types de champs présélectionnés. Ainsi, plutôt que cette interface de paire clé-valeur générique (comme celles que vous avez vues ci-dessus), vous pourrez utiliser des sélecteurs de date, des cases à cocher, et plus encore comme ceci :

Au total, Advanced Custom Fields offre plus de 30 types de champs différents que vous pouvez ajouter à n’importe quelle zone de votre tableau de bord, y compris les articles, les utilisateurs, les taxonomies, les médias, les commentaires et même les pages d’options.

Vous pouvez voir des informations détaillées sur chaque type de champ ici.

Advanced Custom Fields facilite également l’affichage de ces informations, avec des fonctions bien documentées, des codes courts, des blocs Gutenberg, etc.

Ou, vous pouvez trouver des intégrations avec d’autres outils, comme certains des constructeurs de pages WordPress en glisser-déposer.

Advanced Custom Fields Gratuit vs Pro : De quelle version avez-vous besoin ?

Advanced Custom Fields est disponible en version gratuite et en version payante abordable.

Pour la plupart des utilisations de base, la version gratuite est tout à fait satisfaisante. Elle vous donne accès à presque tous les types de champs, ainsi qu’à toutes les fonctions conviviales et permettant de gagner du temps décrites ci-dessus.

Si vous voulez juste stocker quelques informations supplémentaires sur votre contenu, la version gratuite est tout ce dont vous avez besoin.

Ceci étant dit, la version Pro ajoute des fonctionnalités assez pratiques qui vous aident à utiliser Advanced Custom Fields de manière plus intéressante :

• Répéteur de champs – ils vous permettent de répéter certains champs/groupes de champs sur une base d’article à article. Par exemple, si vous ajoutez des informations sur un orateur à un événement, un répéteur de champ vous aiderait à gérer la situation où il y a plus d’un orateur (vous pourriez simplement « répéter » les champs pour l’orateur autant de fois que nécessaire, ce qui vous permet de gérer les cas extrêmes où il existe plusieurs orateurs).
• Blocs ACF – affichez vos champs comme un bloc Gutenberg, plutôt que comme une boîte méta. Ceci est particulièrement pratique si vous construisez un site pour un client et que vous voulez lui donner un moyen facile de saisir et de visualiser des données de champs personnalisées.
• Champ de contenu flexible – créez des mises en page à partir d’autres champs. C’est un peu comme un constructeur de page léger basé sur des informations de champ personnalisé.
• Champ de galerie – téléversez plusieurs images dans un seul champ.

Il y a aussi d’autres différences, comme les pages d’options, la possibilité de cloner des champs, l’amélioration des champs de relation et d’autres petites modifications.

Vous pouvez voir toutes les fonctionnalités d’ACF PRO ici.

ACF PRO est disponible à partir de 25$ pour une utilisation à vie sur un seul site. Ou, vous pouvez payer 100$ pour une utilisation à vie sur un nombre illimité de sites.

En cas de doute, commencez par la version gratuite jusqu’à ce que vous sachiez exactement de quelle fonctionnalité vous avez besoin. Vous pouvez toujours effectuer une mise à niveau plus tard si nécessaire.

Tutoriel Advanced Custom Fields : Comment ajouter vos champs

Creusons maintenant dans le tutoriel d’Advanced Custom Fields et je vais vous montrer comment créer et afficher votre premier ensemble de champs personnalisés.

Pour cet exemple, disons que vous avez un blog sur la course à pied. Vous aimez… vraiment la course à pied et vous voulez partager vos entraînements quotidiens avec vos lecteurs. Plus précisément, avec chaque article de blog, vous voulez partager une course à pied :

• Objectif – disons que vous avez deux types différents de course à pied : « travail rapide » et « conditionnement ».
• Distance – combien de temps votre course a duré.
• Heure de début – quand vous avez commencé votre course.
• Heure de fin – quand vous avez terminé votre course.
• Lieu – l’endroit où votre course a eu lieu.

Pour recueillir ces informations, vous voudrez ajouter cinq champs personnalisés.

Il est important de noter que les principes que vous apprendrez dans ce tutoriel sur avancé sur les champs personnalisés s’appliquent à tous les cas d’utilisation. Nous choisissons simplement un exemple précis parce qu’il est utile d’avoir un exemple concret.

Nous allons diviser ce tutoriel en deux parties :

1. Comment ajouter et gérer vos champs personnalisés dans l’administration.
2. Comment afficher les informations des champs personnalisés sur l’interface publique de votre site.

1. Créer un nouveau groupe de champs

Une fois que vous avez installé et activé la fonction version gratuite de Advanced Custom Fields depuis WordPress.org, allez dans Champs personnalisés > Ajouter un nouveau pour créer votre premier groupe de champs.

Comme son nom l’indique, un « Groupe de champs » est un groupe d’un ou plusieurs champs personnalisés qui sont affichés ensemble dans votre Tableau de bord WordPress.

Pour cet exemple, vous allez créer un groupe de champs qui contient cinq champs personnalisés.

Donnez un nom à votre groupe de champs, puis sélectionnez son emplacement. Pour cet exemple, nous voulons afficher ces champs personnalisés pour les articles normaux de blog WordPress, afin que vous puissiez les laisser comme articles par défaut.

Toutefois, si vous souhaitez afficher vos champs personnalisés ailleurs, par exemple à côté d’un type de publication personnalisé ou avec une taxonomie, vous aller vouloir changer ceci. Vous pouvez également configurer plusieurs règles pour afficher vos champs à plusieurs endroits :

2. Ajouter des champs personnalisés

Ensuite, cliquez sur le bouton + Ajouter un champ pour ajouter votre premier champ personnalisé :

Cela ouvrira beaucoup d’options, mais vous n’avez pas nécessairement besoin de tout remplir.

Les deux choix les plus importants sont :

• Libellé du champ – c’est ce qui apparaîtra dans l’éditeur. Il sera également utilisé pour générer le nom du champ, qui est ce que vous utiliserez dans le code. Vous n’avez pas besoin de changer le nom du champ (mais vous pouvez le faire si nécessaire).
• Type de champ – il s’agit du type d’information que vous voulez recueillir. Par exemple, vous souhaitez qu’un champ Numéro recueille des informations sur le numéro ou qu’un champ E-mail recueille une adresse e-mail.

Pour ce premier champ, vous voudriez un type de champ de bouton radio :

Plus bas, vous pouvez saisir les options de sélection des boutons radio dans la case Choix :

Vous pouvez également faire un certain nombre d’autres choix, par exemple si un champ est obligatoire ou non et une valeur par défaut. N’hésitez pas à les configurer selon vos besoins.

Prenons un autre exemple : un champ personnalisé pour collecter la distance de la course. Cette fois, vous voudrez un type de champ Nombre :

Vous pourriez aussi rendre les choses un peu plus conviviales en choisissant d’ajouter l’unité de distance. Et si vous le souhaitez, vous pouvez également ajouter une validation avec une valeur minimum et une valeur maximum. Par exemple, vous n’allez probablement pas faire des courses de 1000 milles (et si vous le faites… OMG, vous êtes Forrest Gump) !

Répétez simplement le processus pour tous les autres champs personnalisés que vous souhaitez collecter. Une fois terminé, cela devrait ressembler à ceci :

3. Configurer les réglages et publier

Pour terminer, faites défiler vers le bas jusqu’à la case Réglages. Ici, vous pouvez contrôler l’affichage de vos zones dans l’éditeur WordPress.

La plupart du temps, vous pouvez les laisser comme valeurs par défaut. Mais n’hésitez pas à changer les choses si vous voulez. Par exemple, vous pouvez choisir d’afficher vos champs personnalisés au-dessus de l’éditeur WordPress :

Une fois que vous avez fait vos choix, publiez votre groupe de champs.

4. Ajouter des informations dans l’éditeur WordPress

Une fois que vous avez publié votre groupe de champs, vous verrez vos champs apparaître lorsque vous allez créer un nouvel article.

Par défaut, ils apparaîtront ensemble sous l’éditeur dans l’éditeur TinyMCE classique et dans le nouvel éditeur de blocs :

Les informations que vous saisissez ici seront stockées dans la base de données de votre site WordPress pour les retrouver facilement (vous le verrez dans la prochaine partie de notre tutoriel sur Advanced Custom Fields).

Exploration de la logique conditionnelle

Avant d’aller de l’avant, faisons un petit détour.

Vous voyez, l’une des raisons pour lesquelles Advanced Custom Fields est si populaire est à cause de toutes les implémentations intéressantes qu’il permet.

Et une option puissante ici est la logique conditionnelle, qui vous permet d’afficher/masquer les champs en fonction de la façon dont un champ précédent a répondu.

Voyons un exemple rapide du fonctionnement…

Disons que vous souhaitez un blog culinaire, sur vos voyages, ou quoi que ce soit d’autre que la course. Lorsque vous écrivez sur un sujet sans rapport avec la course, il n’est pas très logique d’afficher les champs personnalisés pour obtenir des informations sur la course, non ?

Et si, au lieu d’afficher automatiquement tous les champs personnalisés que vous venez de créer, vous pouviez ajouter un champ personnalisé qui dit « Cet article est-il une course ? »

Si vous cochez cette case, les champs d’information de course apparaissent automatiquement. Si vous ne la cochez pas, ils restent cachés :

C’est ce que la logique conditionnelle vous permet de faire !

Pour ce faire, vous pouvez éditer votre groupe de champs et ajouter un nouveau champ Vrai / Faux pour « Est-ce une course ? »

Ensuite, vous modifiez les champs existants et activez la logique conditionnelle pour que chaque champ ne s’affiche que lorsque le champ « Est-ce une course » est coché :

Comment afficher Advanced Custom Fields sur l’interface publique

Ok, nous sommes à mi-chemin de notre voyage dans Advanced Custom Fields. Vous pouvez maintenant ajouter des informations à vos champs personnalisés, les associer au type de publication correspondant et les stocker dans votre base de données.

Cependant, il y a encore un problème potentiel : les informations de vos champs personnalisés n’apparaissent pas encore sur l’interface publique !

Même si vous avez ajouté des champs personnalisés à l’éditeur pour vos articles de blog, votre article de blog ressemble toujours à un article normal de blog sur l’interface publique :

Arrangeons ça.

Il y a plusieurs façons d’afficher les données des champs personnalisés avancés sur l’interface publique de votre site. La méthode exacte que vous choisirez dépendra de vos besoins et de votre niveau de connaissances. Voici trois façons différentes d’y parvenir :

1. Les fichiers modèles de votre thème – cela demande un peu de connaissances techniques, mais c’est la meilleure approche la plupart du temps, surtout si vous êtes à l’aise de travailler dans les fichiers modèles de votre thème.
2. Avec un code court – c’est super simple et une bonne option si vous voulez juste insérer des données de champ personnalisées au cas par cas. Cependant, cela nécessite beaucoup plus de travail manuel parce que vous aurez besoin d’ajouter des codes courts pour chaque articles.
3. Avec Elementor Pro – c’est génial parce que cela élimine complètement le besoin de travailler avec PHP, mais c’est un produit payant et cela signifie aussi que vous devrez utiliser Elementor Pro pour votre modèle.

Vous pouvez cliquer ci-dessus pour passer directement à une méthode spécifique ou vous pouvez les lire toutes. C’est à vous de voir.

Comment ajouter Advanced Custom Fields dans les fichiers modèles du thèmes

La première façon d’afficher vos informations de champs personnalisés est d’ajouter les fonctions PHP de Advanced Custom Fields directement dans les fichiers modèles de votre thème enfant.

C’est un peu avancé car cela vous oblige à creuser dans les fichiers modèles de votre thème, mais cela garantit que vos champs personnalisés s’afficheront automatiquement au même endroit à chaque fois.

Plus précisément, vous devrez modifier le modèle single pour le type d’article en question.

Pour un article normal de blog, c’est single.php. Ou, certains thèmes divisent les choses en parties de modèle. Par exemple, pour le thème TwentyNineteen, vous avez en fait besoin de modifier content-single.php.

Si vous vous sentez perdu ici, vous voudrez peut-être utiliser une autre méthode.

Une fois que vous avez trouvé le fichier modèle de thème pour votre article unique, vous pouvez utiliser la fonction the_field() de Advanced Custom Fields pour afficher les informations d’un champ. Par exemple,

<?php the_field('FIELD_NAME'); ?>

Pour en savoir plus, cliquez ici.

Par exemple, pour afficher le champ « Objet », vous utiliseriez :

<?php the_field('purpose'); ?>

Vous pouvez trouver le nom du champ lorsque vous modifiez un groupe de champs :

Donc, en combinant une petite balise HTML avec le PHP, vous pourriez obtenir quelque chose comme ceci pour afficher tous les champs :

<div class="run-information">
<ul>
<li><strong>Purpose:</strong> <?php the_field('purpose'); ?></li>
<li><strong>Distance:</strong> <?php the_field('distance'); ?></li>
<li><strong>Start Time:</strong> <?php the_field('start_time'); ?></li>
<li><strong>End Time:</strong> <?php the_field('finish_time'); ?></li>
<li><strong>Location:</strong> <?php the_field('location'); ?></li>
</ul>
</div>

Pour l’ajouter au-dessus du contenu de l’article normal, vous l’ajouteriez à votre fichier de modèle de thème au-dessus de the_content() :

Et maintenant, après avoir rafraîchi l’article du blog, vous pouvez voir les données des champs personnalisés au-dessus du contenu WordPress :

Pour en savoir plus, consultez la documentation complète pour Advanced Custom Fields.

Comment afficher des données d’Advanced Custom Fields avec un code court

Pour une façon beaucoup plus simple d’afficher les données de vos champs personnalisés, vous pouvez également utiliser des codes courts. L’inconvénient ici, cependant, est que vous devrez ajouter le code court à chaque fois que vous voulez afficher un champ personnalisé. Il n’y a pas de moyen facile d’automatiser cette tâche.

Le code court est le suivant :

[acf field="FIELD_NAME"]

Par exemple, si vous saisissez ceci dans l’éditeur WordPress :

Ensuite, l’interface publique de votre site aura exactement la même apparence que la méthode précédente du modèle de thème :

Comment afficher Advanced Custom Fields avec Elementor Pro

Elementor est l’un des plus populaires constructeurs de pages WordPress. Il vous permet de créer vos desings à l’aide d’un éditeur visuel en glisser-déposer. En passant, Elementor est l’un des partenaires officiels de Kinsta.

Avec Elementor Pro, le module payant, vous pouvez également construire les fichiers modèles de votre thème, y compris une option pour insérer des données de champs personnalisés dynamiques à partir de Advanced Custom Fields dans vos designs.

C’est une excellente option si vous voulez avoir la flexibilité d’inclure automatiquement des données de champ personnalisées dans vos modèles, mais ne vous sentez pas à l’aise de faire des modifications de code directement dans les fichiers modèles de votre thème.

Pour commencer, allez dans Modèles > Constructeur de thème et créez un nouveau modèle Elementor pour votre article :

Vous pouvez ajouter les widgets normaux d’Elémentor pour votre titre d’article et votre contenu d’article. Ensuite, pour afficher les données des champs personnalisés, vous pouvez ajouter des widgets normaux de l’éditeur de texte. La seule différence ici, au lieu de modifier le texte, vous sélectionneriez l’option Dynamique :

Après cela, vous pouvez sélectionner Champ ACF dans le menu déroulant :

De là, vous pouvez sélectionner le champ spécifique que vous avez ajouté avec Advanced Custom Fields :

Vous pouvez également utiliser l’onglet Avancé pour ajouter ou ajouter des informations, ce qui vous permet d’ajouter des libellés et des unités :

Facile, n’est-ce pas ? Répétez l’opération pour d’autres champs personnalisés !

Résumé

En utilisant Advanced Custom Fields, vous pouvez enrichir vos pages et vos articles de blog avec plus de données et d’informations grâce à une solution facile à utiliser. De plus : vous pouvez commencer à collecter des informations supplémentaires pour n’importe quel contenu sur votre site et ensuite les afficher sur l’interface publique pour vos visiteurs.

Pour ce faire, vous avez 3 options :

• Les fichiers modèles de votre thème
• Avec un code court
• Avec Elementor Pro

Les connaissances que vous avez acquises dans cet article vous permettront de libérer le potentiel profond de WordPress pour construire des sites 100% personnalisés qui vont bien au-delà des racines du blog de WordPress.

La seule question qui reste est la suivante :

Qu’allez-vous créer avec Advanced Custom Fields ? Partagez-le avec nous dans les commentaires ci-dessous