Les champs personnalisés WordPress sont une partie importante de ce qui fait de WordPress un système de gestion de contenu flexible, plutôt que « simplement une plate-forme de blogs ».

En ce qui concerne les champs personnalisés WordPress, le plugin freemium 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 aujourd’hui.

Plus précisément, nous allons vous expliquer pourquoi les champs personnalisés avancés sont si précieux, puis vous montrer étape par étape comment vous pouvez les appliquer à votre site WordPress.

Voici tout ce que vous trouverez dans ce post:
Il y a beaucoup à couvrir, alors plongeons dans…

Quoi Les Champs WordPress Sont-Ils Personnalisés? Que Vous Laissent-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. Sur un plan 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 plugins et thèmes préférés.

Par exemple, WooCommerce, le moyen le plus populaire de créer une boutique de commerce électronique, utilise des champs personnalisés pour stocker des informations supplémentaires sur un produit comme:

• Prix
• Poids
• Couleur

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

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

Vous pouvez également créer vos propres champs personnalisés pour stocker des informations pertinentes pour vos besoins uniques, ce qui est le sujet de cet article.

À quel point les champs personnalisés sont-ils cool dans WordPress, euh? LearnApprenez à en profiter avec l’incroyable @wp_acf dans notre dernier guide! ClickCliquez pour Tweeter

Quand Devriez-Vous Utiliser Des Champs Personnalisés?

Maintenant, vous vous demandez peut-être pourquoi vous avez même besoin de champs personnalisés en premier lieu.

Par exemple, si vous souhaitez publier un événement sur votre site WordPress, ne pourriez-vous pas simplement mettre toutes ces informations sous forme de texte régulier dans l’éditeur 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 des choses à partir de zéro, un groupe de champs personnalisés bien aménagé facilitera la saisie des données. Par exemple, au lieu de taper une date, vous pouvez simplement sélectionner la date à partir d’un sélecteur de date.
• Cohérence — les informations que vous entrez dans vos champs personnalisés s’afficheront toujours en fonction de votre configuration, ce qui signifie qu’elles seront cohérentes sur l’ensemble de votre site.
• Mises à jour et maintenance faciles — si vous souhaitez modifier quelque chose sur la façon dont ces informations s’affichent à l’avenir, vous pouvez simplement mettre à jour une chose plutôt que d’avoir à modifier chaque publication 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 TinyMCE classique, vous pouvez l’activer à partir de la zone Options de l’écran. Ou, dans le nouvel éditeur de blocs, vous pouvez l’activer à partir de la zone d’options:

Vous pouvez ensuite entrer vos données de champ personnalisées à l’aide de paires clé/valeur:

Cette fonctionnalité native des 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 plutôt vers le plugin Advanced Custom Fields.

Les champs personnalisés avancés Facilitent Beaucoup la tâche

En termes simples, les champs personnalisés avancés facilitent beaucoup le travail avec des champs personnalisés dans WordPress dans pretty à peu près 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 à partir de champs personnalisés sur le frontend de votre site. Ce fait ne fait qu’expliquer pourquoi il est actif sur plus de 1 million de sites Web avec une note de 4,9 étoiles sur plus de 1 000 avis.

Sur le backend, il vous permettra de créer des méta-boîtes 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, etc. comme ceci:

Au total, les Champs personnalisés avancés offrent plus de 30 types de champs différents que vous pouvez ajouter à n’importe quelle zone de votre tableau de bord, y compris les publications, les utilisateurs, les taxonomies, les médias, les commentaires et même les pages d’options personnalisées.

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

Les champs personnalisés avancés facilitent é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 constructeurs de pages WordPress par glisser-déposer.

Champs Personnalisés Avancés Gratuits vs Pro: De Quoi Avez-Vous Besoin?

Les champs personnalisés avancés sont disponibles à la fois dans une version premium gratuite et abordable.

Pour la plupart des utilisations de base, la version gratuite est tout à fait correcte. Il vous donne accès à presque tous les types de champs, ainsi qu’à toutes les fonctionnalités faciles à utiliser et à gagner du temps décrites ci-dessus.

Si vous souhaitez simplement stocker des informations supplémentaires sur votre contenu, la version gratuite est tout ce dont vous avez besoin.

Cela étant dit, la version Pro ajoute des fonctionnalités assez pratiques qui vous aident à utiliser des champs personnalisés avancés de manière plus intéressante:

• Champs répéteurs — ceux-ci vous permettent de répéter certains champs / groupes de champs post par post. Par exemple, si vous ajoutiez des informations sur un haut-parleur à un événement, un champ répéteur vous aiderait à gérer la situation où il y a plus d’un haut-parleur (vous pouvez simplement « répéter” le ou les champs pour le haut-parleur autant de fois que nécessaire, ce qui vous permet de gérer les cas extrêmes où il y a plusieurs haut-parleurs).
• Blocs ACF – affichez vos champs sous la forme d’un bloc Gutenberg, plutôt qu’une méta-boîte. Ceci est particulièrement pratique si vous créez un site pour un client et que vous souhaitez lui donner un moyen facile de saisir et de visualiser des données de champ personnalisées.
• Champ de contenu flexible – créez des mises en page à partir d’autres champs. C’est un peu comme un générateur de page léger basé sur des informations de champ personnalisées.
• Champ Galerie – téléchargez plusieurs images dans un seul champ.

Il existe également d’autres différences, comme les pages d’options, la possibilité de cloner des champs, des améliorations des champs de relation et d’autres modifications plus petites.

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

ACF PRO commence à 25 $ pour une utilisation à vie sur un seul site. Ou, vous pouvez payer 100 $ pour une utilisation à vie sur des sites illimités.

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

Tutoriel sur les champs personnalisés avancés: Comment ajouter vos champs

Examinons maintenant le didacticiel sur les champs personnalisés avancés 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 courir et vous voulez partager vos entraînements quotidiens avec vos lecteurs. Plus précisément, avec chaque article de blog, vous souhaitez partager le but d’une course:

• – disons que vous avez deux types de course différents: « speed work » et « conditioning ».
• Distance – combien de temps a duré votre course.
• Heure de début – lorsque vous avez commencé votre course.
• Temps d’arrivée – lorsque vous avez terminé votre course.
• Lieu — où votre course a eu lieu.

Pour collecter ces informations, vous devrez ajouter cinq champs personnalisés.

Il est important de noter que les principes que vous apprendrez dans ce tutoriel sur les champs personnalisés avancés s’appliquent à tous les cas d’utilisation. Nous ne faisons que choisir un exemple spécifique car il est utile d’avoir un exemple tangible auquel se connecter.

Nous allons diviser ce tutoriel en deux parties:

1. Comment ajouter et gérer vos champs personnalisés sur le backend.
2. Comment afficher des informations de champ personnalisées sur le frontend de votre site.

Créez un nouveau groupe de champs

Une fois que vous avez installé et activé la version gratuite des Champs personnalisés avancés à partir de 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 contenant cinq champs personnalisés.

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

Cependant, si vous souhaitez afficher vos champs personnalisés ailleurs, comme à côté d’un type de publication personnalisé ou avec une taxonomie, vous voudrez changer cela. Vous pouvez également configurer plusieurs règles pour afficher vos champs dans plusieurs emplacements:

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 :

• Étiquette de 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 (bien que vous le puissiez si vous en avez besoin).
• Type de champ — c’est le type d’informations que vous souhaitez collecter. Par exemple, vous souhaitez qu’un champ numérique collecte des informations numériques ou un champ e-mail collecte une adresse e-mail.

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

Plus bas, vous pouvez entrer les options de sélection du bouton radio dans la boîte de choix:

Il existe également un certain nombre d’autres choix que vous pouvez faire, comme si un champ est requis ou non et une valeur par défaut. N’hésitez pas à les configurer selon vos besoins.

Regardons un autre exemple: un champ personnalisé pour collecter la distance de la course. Cette fois, vous voudriez un type de champ numérique:

Vous pouvez également 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 Minimale et une Valeur Maximale. Par exemple, vous n’allez probablement pas sur des courses de 1 000 milles (et si vous le faites OM OMG, vous êtes le Forrest Gump ultime)!

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

Configurez les paramètres et publiez

Pour terminer les choses, faites défiler jusqu’à la boîte de paramètres. Ici, vous pouvez contrôler l’affichage de vos champs 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 le souhaitez. Par exemple, vous pouvez choisir d’afficher vos champs personnalisés au-dessus de l’éditeur WordPress habituel :

Une fois que vous avez fait vos choix, Publiez votre groupe de champs pour le rendre opérationnel.

Ajoutez 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 nouveau message.

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

Les informations que vous entrez ici seront stockées dans la base de données WordPress de votre site pour une récupération facile (vous le verrez dans la partie suivante de notre tutoriel sur les champs personnalisés avancés).

Exploration de la logique conditionnelle

Avant d’avancer, faisons un petit détour.

Voyez, l’une des raisons pour lesquelles les champs personnalisés avancés sont si populaires est à cause de toutes les implémentations intéressantes qu’ils permettent.

Et une option puissante ici est la logique conditionnelle, qui vous permet d’afficher / masquer les champs en fonction de la réponse à un champ précédent.

Regardons un exemple rapide de comment cela fonctionne

Disons que vous voulez bloguer sur la nourriture, vos voyages ou autre chose que la course à pied. Lorsque vous écrivez sur un sujet non exécuté, cela n’a pas beaucoup de sens d’afficher les champs personnalisés pour obtenir des informations sur l’exécution, n’est-ce pas?

Et si, au lieu d’afficher automatiquement tous les champs personnalisés que vous venez de créer, vous pouviez ajouter un champ personnalisé indiquant « Ce message est-il une exécution?”:

Si vous cochez la case, les champs d’informations d’exécution apparaissent automatiquement. Si vous le laissez décoché, ils restent cachés :

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

Pour configurer cela, vous devez modifier votre groupe de champs et ajouter un nouveau champ True/False pour « Est-ce une exécution?”:

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

Comment afficher les Champs personnalisés avancés sur le Frontend

Ok, nous sommes à mi-chemin de notre parcours de Champs personnalisés avancés. Vous pouvez désormais ajouter des informations à vos champs personnalisés, les associer au type de publication concerné et les stocker dans votre base de données.

Cependant, il y a toujours un problème potentiel: les informations de vos champs personnalisés n’apparaissent encore nulle part sur le frontend !

C’est-à-dire que 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 de blog normal sur le frontend:

Corrigeons cela.

Il existe différentes façons d’afficher les données de champs personnalisés avancés sur le frontend de votre site. La méthode exacte que vous choisissez dépendra de vos besoins et de votre niveau de connaissances. Voici trois façons différentes d’y parvenir:

1. Fichiers de modèles de votre thème – cela nécessite 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 de modèles de votre thème.
2. Avec un shortcode — c’est super simple et une bonne option si vous souhaitez simplement insérer des données de champ personnalisées au cas par cas. Cependant, cela nécessite beaucoup plus de travail manuel car vous devrez ajouter des shortcodes à chaque publication.
3. Avec Elementor Pro — c’est génial car cela élimine complètement le besoin de travailler avec PHP, mais c’est un produit premium et cela signifie également que vous devrez utiliser Elementor Pro pour vos modèles.

Vous pouvez cliquer ci-dessus pour passer directement à une méthode spécifique ou vous pouvez les lire toutes. À vous de décider.

Comment ajouter des Champs Personnalisés Avancés dans les Fichiers de modèles de thème

La première façon d’afficher les informations de vos champs personnalisés consiste à ajouter les fonctions PHP des Champs personnalisés avancés directement aux fichiers de modèles de thème enfant.

Ceci est un peu avancé car cela vous oblige à creuser dans les fichiers de modèle 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 unique pour le type de publication en question.

Pour un article de blog régulier, c’est unique.php. Ou, certains thèmes divisent les choses en parties de modèle. Par exemple, pour le thème TwentyNineteen, vous devez en fait modifier le contenu – single.partie modèle php.

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

Une fois que vous avez trouvé le fichier de modèle de thème pour votre publication unique, vous pouvez utiliser la fonction the_field() des champs personnalisés avancés pour afficher les informations d’un champ. Par exemple,

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

En savoir plus ici à ce sujet.

Par exemple, pour afficher le champ « But”, vous devez utiliser

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

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

Ainsi, en combinant un petit balisage HTML avec le PHP, vous pourriez obtenir quelque chose comme ça 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 ajouter ceci au-dessus du contenu de publication normal, vous devez l’ajouter à votre fichier de modèle de thème au-dessus de the_content():

Et maintenant, après avoir actualisé l’article de blog, vous pouvez voir les données de champ personnalisées au-dessus du contenu WordPress régulier:

Pour en savoir plus, consultez la documentation complète des champs personnalisés avancés.

Comment afficher des données de champs personnalisés avancées avec un Shortcode

Pour un moyen beaucoup plus simple d’afficher les données de vos champs personnalisés, vous pouvez également utiliser des shortcodes. L’inconvénient ici, cependant, est que vous devrez ajouter le shortcode chaque fois que vous souhaitez afficher un champ personnalisé. Il n’y a pas de moyen facile d’automatiser cette tâche.

Le shortcode est le suivant:

Par exemple, si vous l’avez entré dans l’éditeur WordPress:

Ensuite, le frontend de votre site ressemblerait exactement à la méthode de modèle de thème précédente:

Comment afficher des champs personnalisés avancés avec Elementor Pro

Elementor est l’un des constructeurs de pages WordPress les plus populaires. Il vous permet de créer vos conceptions à l’aide d’une édition visuelle par glisser-déposer. Sur une note latérale, Elementor est l’un des partenaires officiels de Kinsta.

Avec Elementor Pro, le module complémentaire payant, vous pouvez également créer les fichiers de modèles de votre thème, y compris une option pour insérer des données de champs personnalisés dynamiques à partir de Champs personnalisés avancés dans vos conceptions.

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

Pour commencer, vous devez aller dans Templates >Générateur de thèmes et créer un nouveau modèle d’Élémentor pour votre publication Unique:

Vous pouvez ajouter les widgets Elementor habituels pour le Titre et le Contenu de votre publication. Ensuite, pour afficher les données de champ personnalisées, vous devez ajouter des widgets d’éditeur de texte standard. La seule différence ici, au lieu de modifier le texte, vous sélectionnez l’option Dynamique:

Après cela, vous pouvez sélectionner le champ ACF dans la liste déroulante:

À partir de là, vous pouvez sélectionner le champ spécifique que vous avez ajouté avec des champs personnalisés avancés:

Et vous pouvez également utiliser l’onglet accordéon avancé pour ajouter ou ajouter des informations, ce qui vous permet d’ajouter des étiquettes et des unités:

Facile, non? Maintenant, répétez simplement pour d’autres champs personnalisés!

Résumé

En utilisant des champs personnalisés avancés, vous pouvez enrichir vos pages et vos articles de blog avec plus de données et d’informations avec une solution facile à utiliser. Plus: vous pouvez commencer à collecter des informations supplémentaires pour tout contenu de votre site, puis les afficher sur le frontend pour vos visiteurs.

Pour ce faire, vous avez 3 options:

• Les fichiers de modèle de votre thème
• Avec un shortcode
• Avec Elementor Pro

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

La seule question qui reste est la suivante:

Qu’allez-vous créer avec des champs personnalisés avancés? Partagez-le avec nous dans les commentaires ci-dessous