brand-lws-red brand-lws-white
Tutoriels

WordPress
time_read46mn de lecture

Comment ajouter des champs personnalisés WordPress ?

15 mars 2022

Comment ajouter des champs personnalisés WordPress ?

WordPress est un CMS très plus populaire. Cela grâce à la facilité qu’il offre dans la création, la gestion et la personnalisation de sites web. Pour ce qui est de la personnalisation, ce logiciel open source vous permet par exemple d’ajouter des champs personnalisés à votre contenu.

Les champs personnalisés sont un type de métadonnées que vous pouvez afficher sur vos contenus. Par défaut, les thèmes WordPress intègrent des métadonnées. Mais quelle est la procédure pour ajouter vos propres métadonnées ? Et comment faire pour afficher ces métadonnées ou champs personnalisés WordPress sur vos publications ? 🤔 Pour trouver des réponses à ces questions, lisez cet article.

Comprendre les champs personnalisés et leurs intérêts

Dans WordPress, chaque thème comporte ses propres métadonnées. Ces derniers peuvent s’afficher dans l’en-tête des articles ou alors à la fin de ces derniers. Et donc la question relative à leur position d’affichage sur votre site dépend du thème, mais aussi de votre configuration.

affichage de metadonnées

Comme vous pouvez le voir sur l’image ci-dessus, les métadonnées peuvent inclure des éléments divers. Le plus souvent, ils incluent la date de la publication de l’article, le temps de lecture, l’auteur et, voire la catégorie de l’article.

WordPress vous donne la possibilité d’ajouter des champs supplémentaires à cette liste. De plus, vous pouvez contrôler leur affichage en publique en exerçant certaines modifications sur votre site, que vous allez découvrir plus tard dans cet article.

Pour ce qui est de l’intérêt de champs personnalisés, vous avez plusieurs avantages qui dépendent des besoins de chaque développeur :

  • Vous avez la possibilité d’ajouter des informations supplémentaires à vos articles afin d’orienter vos visiteurs. Par exemple, si vous souhaitez étiqueter tous vos articles invités sur votre blog, vous pouvez créer un champ personnalisé appelé « article invité ». Ainsi, en configurant ce champ, vous pouvez faire en sorte qu’il s’affiche uniquement sur les articles rédigés par vos invités.
  • Catégoriser vos pages. Vous pouvez aller plus loin avec vos champs personnalisés et séparer des pages sponsorisés sur votre site des autres pages. De cette manière, vos visiteurs sont informés à l’avance et peuvent naviguer en toute conséquence.
  • Réduire la durée de conception de contenus. Imaginez que vous devez à chaque fois, et manuellement, ajouter des phrases à vos contenus pour informer vos visiteurs de l’existence de liens sponsorisés dans vos articles ou vos pages. Ce travail pourrait être énorme et stressant. Pourtant en créant un champ personnalisé correspondant, vous pouvez automatiquement l’afficher sur ce type de contenus sans une action manuelle de votre part.

Maintenant que vous avez une idée sur les champs personnalisés dans WordPress, gardez à l’esprit que vous pouvez les ajouter de deux façons à votre site. Premièrement, vous pouvez utiliser la fonction native « champs personnalisés » de WordPress pour y arriver. Deuxièmement, vous devez utiliser un plugin pour ajouter ces métadonnées à vos contenus. Il existe plusieurs extensions pour permettre d’effectuer cette tâche.

Toutefois, dans cet article, vous allez uniquement apprendre l’ajout de champs personnalisés en utilisant l’extension Advanced Custom Fields. Il s’agit de l’extension la plus utilisée et la plus facile à prendre en main. Vous aurez également à connaître quelques autres plugins qui peuvent jouer la même fonction, mais sans beaucoup de détails.

Avant d’entrer dans le vif du sujet, vous devez aussi noter que la création de champs personnalisés n’équivaut pas à leur affichage en publique sur vos contenus. Cela traduit qu’il faut modifier votre thème pour permettre cet affichage. Pour cette raison, vous allez apprendre aussi quelques codes à jouter à votre thème afin de contrôler l’affichage de vos champs personnalisés.

Ajouter des champs personnalisés dans WordPress naturellement

L’ajout de champs personnalisés requiert certaines tâches à réaliser depuis votre tableau de bord WordPress. Pour cela commencez par vous connecter à votre espace d’administration WordPress. Ajoutez simplement le suffixe « /wp-admin » à votre nom de domaine et envoyez cette commande dans votre navigateur.

Une fois connecté, vous devez ouvrir votre éditeur de contenus. Que vous utilisiez l’éditeur classique ou l’éditeur de blocs, la procédure reste relativement similaire. Pour cet article, vous apprendrez à ajouter des champs personnalisés exclusivement avec le Classic Editor ou l’éditeur classique. Si vous utilisez encore l’éditeur de blocs (Gutenberg) sur votre site, découvrez comment  passer de l’éditeur de blocs Gutenberg à l’éditeur classique dans WordPress en quelques étapes simples.

Pour avoir accès à votre éditeur de contenus, rendez-vous dans la section « Articles › Ajouter ». Une fois cela fait, dirigez-vous vers le haut de l’interface et faites dérouler le bouton « Option de l’écran ».

dérouler le bouton option de l'écran

Une fois déroulé, vous avez plusieurs options avec des cases à cocher. Par défaut, l’option « Champs personnalisés » est masquée quand vous ouvrez chaque fois votre éditeur si vous ne l’aviez jamais utilisé.

Pour l’afficher et bien entendu l’activer, cochez la case « Champs personnalisés ».

activer l'option champs personnalisés

Après avoir terminé, vous devez fermer la boîte « Option de l’écran ». Simultanément, une nouvelle section s’ajoute à votre interface d’édition de contenus, plus précisément en bas du panneau d’édition.

ajouter des champs personnalisés dans WordPress

Cette nouvelle section est nommée « Champs personnalisés ». Elle vous permet d’ajouter vos propres champs personnalisés. Pour ce faire, vous avez deux zones à renseigner :

  • Nom : il est également appelé clé. Dans cette zone, saisissez le nom de votre champ personnalisé.
  • Valeur : cette dernière dépend de la clé ou du nom de votre champ personnalisé. Dans ce système, il est possible de conserver un seul nom de champ, mais avec une valeur qui change. Par illustration, vous pouvez avoir un champ personnalisé étiqueté « Article invité ». Mais sur votre site, vous avez plusieurs invités qui publient des articles. Devant cette situation, vous aurez à conserver le même champ personnalisé, mais avec des valeurs qui varient en fonction de chaque auteur invité qui publie son article.

Après avoir renseigné les deux zones, cliquez sur le bouton « Ajouter un champ personnalisé » pour l’enregistrer.

créer un champ personnalisé

Une fois terminé, votre champ sera créé. Si vous souhaitez revenir sur vos modifications, vous pouvez cliquer sur le bouton « Supprimer ». Vous pouvez également appuyer sur « Mettre à jour » après avoir changé les informations saisies initialement.

Vous avez créé tous les champs avec succès. Dans l’éventualité où vous souhaitez attribuer un champ personnalisé à un article, commencez par ouvrir votre article dans l’éditeur. Ensuite, descendez vers la section champ personnalisé. Vous aurez un menu déroulant et lorsque vous cliquez dessus, une liste de champs personnalisés créés s’ouvre.

ajouter des champs personnalisés à vos contenus

Vous devez alors choisir le champ personnalisé que vous souhaitez utiliser. Dans la zone de valeur, vous pouvez renseigner une valeur spécifique à cet article comme bon vous semble. Si vous souhaitez le faire avec d’autres articles de votre site, suivez la même procédure.

Par exemple pour chacun de vos articles invités, vous pouvez relativiser les auteurs en renseignant dans la zone valeur, le nom propre de chaque auteur.

Ajouter des groupes de champs personnalisés grâce à un plugin

Utiliser un plugin pour créer des champs personnalisés est cette deuxième méthode que vous pouvez utiliser. Vous avez la possibilité d’ajuster des fonctionnalités plus avancées. Le plugin Advanced Custom Fields permet d’ajouter plusieurs types de champs personnalisés.

Installer le plugin

Pour l’utiliser, vous devez l’installer sur votre site. Ainsi, rendez-vous dans la section « Extensions » dans le menu de gauche de votre espace d’administration. Puis appuyer sur l’option « Ajouter ».

ajouter l'extension Advanced Custom Fields

Une fois cela fait, vous serez redirigé vers le répertoire d’extensions WordPress. Vous devez saisir la suite « Advanced Custom Fields » dans la zone de recherche pour le retrouver le plus rapidement. ajouter Advanced Custom Fields

Une fois trouvé, vous devez cliquer sur le bouton « Installer maintenant ». Attendez que l’installation se termine puis cliquez sur le bouton « Activer ».

activer le plugin Advanced Custom Fields

Créer des groupes de champs personnalisés

Une fois l’installation et l’activation terminées, un nouvel onglet s’ajoute dans les onglets de votre menu de gauche nommé « ACF ». Il s’agit simplement de l’acronyme du plugin Advanced Custom Fields, cliquez dessus. Une fois cela fait, cette section sera développée, ensuite vous aurez des sous-options.

acceder à Advanced Custom Fields

Dans l’option groupes de champs, vous aurez accès à tous les champs personnalisés que vous avez créés jusqu’ici. Normalement, et immédiatement après l’installation du plugin, aucun champ personnalisé n’est disponible. Vous serez alors amené à ajouter un nouveau champ.

ajout de champs personnalisés

Dans cette nouvelle interface, tout ce que vous avez à faire est de cliquer sur le bouton « Ajouter ». Une fois cela fait, une nouvelle interface vous sera présentée.

Gardez à l’esprit que tous les champs que vous créez seront constitués dans des groupes. Donc, vous pouvez avoir un seul groupe, mais avec plusieurs champs à l’intérieur.

créer un groupe de champs personnalisés

Dans la zone « Saisissez le titre », vous devez renseigner le nom de groupe de champs. Une fois terminé, cliquez sur le bouton « Ajouter un champ » afin de l’enregistrer.

Une fois que vous avez fini de créer vos groupes de champs, vous devez aussi penser à ajuster leurs paramètres d’emplacement. En cela, cette extension vous donne plusieurs possibilités à configurer selon vos souhaits. Pour configurer l’emplacement, descendez vers la section « Emplacement » sur la même interface.

ajuster l'emplacement

Dans cette section, vous devez fixer les règles d’affichage. Vous avez devant vous trois menus déroulants à configurer avec correspondance pour déterminer l’emplacement du champ personnalisé.

Pour faire cette configuration, commencez par cliquer le premier menu déroulant. Une liste de critères sera affichée. Choisissez le critère qui va dicter l’affichage de votre champ personnalisé.

choisir le critere d'affichage du champ personnalisé

Comme vous pouvez le voir sur l’image ci-dessus, vous pouvez choisir un critère d’affichage selon les publications, les pages, les utilisateurs ou encore les formulaires.

Pour correspondre la configuration, si par exemple vous avez choisi la catégorie comme critère d’affichage, vous devez aussi indiquer dans le dernier menu déroulant la catégorie ciblée. De même si c’est une page, vous devez déterminer de quelle page il s’agit. Ce paramétrage fera en sorte que lors de l’affichage du champ personnalisé, WordPress va masquer ce champ si le contenu est en dehors des critères. Ensuite, il va l’afficher si la publication se retrouve dans les critères fixés.

reglage du champ personnalisé

Après avoir terminé de configurer les règles d’affichage, vous devez passer à la configuration de paramètres du champ personnalisé.

  • Actif : vous devez basculer cette option sur « Oui » pour activer l’affichage du champ sur vos contenus
  • Show in REST API : selon vos besoins, vous pouvez activer ou non cette option.
  • Style : cliquez sur le menu déroulant pour sélectionner le style d’affichage
  • Position : vous devez déterminer dans cette option si vous souhaitez que le champ s’affiche avant le contenu ou après
  • Emplacement de l’intitulé : vous pouvez ici choisir l’emplacement de l’affichage de titre du champ. L’emplacement n’est pas équivalent à la position

Vous devez renseigner toutes les autres informations si vous souhaitez personnaliser davantage votre champ.

gérer les reglages d'affichage du champ personnalisé

Par exemple sur cette section, vous pouvez déterminer l’ordre d’affichage de votre groupe de champs personnalisés. Vous pouvez de préférence configurer cette partie si vous avez plusieurs groupes de champs. Ainsi, pour afficher le groupe de champs en cours de création au début, vous devez lui attribuer une valeur inférieure.

Vous pouvez aller plus loin, en ajoutant une description à votre groupe de champs personnalisés. Cela est idéal pour vous orienter dans l’utilisation des différents groupes de champs que vous avez créés.

masquer ou afficher des options de l'écran

Toujours sur la même interface, le plugin Advanced Custom Fields vous permet de masquer ou afficher certaines options de votre page d’édition. Cochez ceux dont vous souhaitez voir au moment de l’édition de contenus et enregistrez vos modifications.

Configurer un champ personnalisé

Vous avez fini de créer votre groupe de champs personnalisés. Vous pouvez maintenant sélectionner un champ distinct pour le configurer.

modifier un champ personnalisé

Pour modifier un champ personnalisé, glissez votre curseur dessus, ensuite appuyez sur le bouton « Modifier ». Une fois cela fait, un tableau contextuel sera affiché :

  • Titre du champ : il s’agit de renseigner le nom du champ qui va apparaître dans la page d’édition de contenus
  • Nom du champ : normalement cette zone se remplit automatiquement après avoir renseigné le titre du champ.

Modifier le groupe de champs « Article invité »

  • Type de champ : ce plugin vous donne plusieurs possibilités quant aux champs que vous créez. Comme vous le voyez sur l’image de référence ci-dessous, votre champ peut être un texte, un nombre, un E-mail si vous souhaitez collecter les e-mails de vos visiteurs…

choisir un type de champ à afficher

Dans tous les cas, vous devez choisir le type selon vos besoins. Dans la suite, vous pouvez ajouter des instructions à votre champ personnalisé dans la zone correspondante. Ensuite, pour ce qui est de l’option « Requis ? », basculez sur oui si vous souhaitez que le champ obtienne un caractère obligatoire.

Pour ce qui est de la valeur par défaut, vous pouvez attribuer n’importe quelle valeur à votre champ. Cette dernière option vous permet simplement de contrôler l’ordre d’affichage sur l’interface d’édition de contenus.fixer une logique conditionnelle à votre champ personnalisé

Ces autres options sont à configurer comme bon vous semble. Enfin, pour enregistrer vos modifications, vous devez cliquer sur le bouton « Fermer le champ ». Puis, sur votre côté droit, vous devez aussi appuyer sur le bouton « Mettre à jour » pour publier vos modifications.

Bravo, vous avez créé avec succès votre groupe de champs que vous allez retrouver dans l’option « ACF › groupes de champs ».

groupe de champs

Et pour modifier votre groupe de champs personnalisés, défilez dessus et cliquez sur le bouton « Modifier ». Une fois cela fait, une nouvelle interface vous sera présentée. Cliquez sur chaque champ que vous souhaitez modifier.

modifier un champ personnalisé

Faites vos modifications et n’oubliez pas de mettre à jour.

D’autres plugins WordPress peuvent vous permettre d’ajouter des champs personnalisés à vos contenus. Vous avez notamment:

Configurer l’affichage de vos champs personnalisés en public

Vous avez créé vos champs, mais jusqu’ici, ils ne s’affichent pas sur vos contenus. Pour afficher les champs créés sur vos contenus, vous devez modifier les fichiers de votre thème. Il existe plusieurs codes à ajouter à votre thème pour y arriver. Mais vous allez aussi découvrir qu’il est possible d’afficher vos champs en utilisant votre éditeur de contenus.

Modifier le thème

modifier votre theme

Rendez-vous dans l’option « Apparence › Éditeur de fichiers de thèmes ». Une fois cela fait, vous serez redirigé vers une nouvelle interface.

modifier les fichiers du theme

Vous pouvez utiliser un logiciel client FTP pour modifier votre thème ou le faire grâce à votre gestionnaire de fichiers. Lorsque vous ouvrez votre thème depuis votre tableau de bord, un avertissement vous sera affiché. Cliquez sur le bouton « Je comprends » pour avancer.

afficher votre champ en modifiant votre theme

Dans la nouvelle interface, vous devez ouvrir le fichier « single.php ». Une fois cela fait, ajoutez le code suivant pour afficher votre champ :

< ?php echo get_post_meta ( $post- > ID, 'key' , true ) ; ?>

Et pour afficher le champ au début de l’article, ajoutez le code ci-dessus avant la ligne suivante dans le fichier single.php :

while ( have_posts () ) : the_post ( ) ;

Toutefois, vous devez remplacer le titre Key par le nom de votre champ personnalisé.

Pour certains thèmes, vous devez vous rendre dans le fichier « Templates › content › content-single.php ».

modifier le fichier templates de votre theme

Après avoir ouvert ces fichiers modèles, ajoutez le code suivant :

<div class="run-information">

<ul>

<li><strong> article_invité </strong> <?php the_field('article_invité'); ?></li>

</ul>

</div>

Dans votre cas, vous devez remplacer « Article invité » par votre propre champ personnalisé.

champs personnalisés WordPress

Une fois terminé, vous pouvez actualiser vos contenus pour voir comment s’affiche votre champ personnalisé :

affichage du champ personnalisé

Afficher les champs personnalisés en utilisant un éditeur

Commencez par ouvrir votre éditeur de contenus, puis collez le code suivant, juste à l’emplacement où vous souhaitez afficher votre champ :

⌈acf field="Field_Name"⌉

Prenez soin de remplacer le nom du champ par le nom de votre propre champ personnalisé. Toutefois, cette règle ne marche que si vous utilisez le plugin Advanced Custom Fields. Une fois cela fait, mettez à jour votre article pour voir l’affichage.

affichage de votre champ personnalisé

 

 

🎊 Toutes nos félicitations, vous avez appris comment ajouter des champs personnalisés à votre contenu. En bref, la procédure consiste à utiliser la fonction native de champs personnalisés de WordPress. Et ensuite, vous pouvez le faire par le biais d’une extension telle que Advanced Custom Fields. Pour utiliser ce plugin, vous devez tout d’abord l’installer sur votre site. Ensuite, défilez vers la section « ACF », ouvrez la sous-option « groupes de champs » et suivez les étapes pour ajouter de nouveaux champs personnalisés. Pour afficher votre champ personnalisé en public, vous devez modifier votre thème en ajoutant des codes comme ceux mentionnés dans ce tutoriel. Dans tous les cas, enregistrez vos modifications pour les appliquer.

Avatar de l'auteur

Auteur de l'article

Joseph

Joseph est rédacteur web depuis quatre ans. Ses thématiques préférées sont le digital et le web marketing et l’e-commerce. La persévérance, l’assiduité et le courage font partie de sa méthode de travail. C'est ce qui lui permet d'affronter n’importe quel sujet.

Avis client de l'hébergeur LWS

Nos avis Trustpilot Nos avis Hostadvice Nos avis sur avis.lws.fr
Avis trustpilot 30/04/2022

LWS l'hébergeur par excellence !

LWS est pour moi l'hébergeur par excellence, que cela soit au niveau de l'hébergement qui est très performant, les mails qui sont d'une qualité professionnelle et de la gestion du domaine facile à comprendre.

PauseGreen

Avis hostadvice 27/04/2022

Super, au top !

Au top, prix attractif. Service très rapide et réactif. Je l'ai même personnellement recommandé à des proches. La vie est bien plus facile avec LWS

Masset Eliot

Avis avislws 26/04/2022

Support

Clair, efficace, rapide et à tarif abordable. J'ai maintenant un site superbe à mon image, puisque je le fais moi-même. L'équipe technique est au top, j'ai une réponse en 20 minutes, cela change d'autres hébergeurs pourtant plus connu.

Lady Whip

Avis hostadvice 24/04/2022

Bravo et merci

Bravo et merci aux équipes techniques pour leur réactivité et leur professionnalisme depuis plus de 10 ans chez eux et de nombreux sites !!! Merci

Olivier Delmas

Avis trustpilot 23/04/2022

Je suis très satisfait.

J'ai commandé un hébergement pour le site d'une association. Tout s'est passé très rapidement et sans la moindre embuche. La tarification est attractive et me parait très claire. Le panneau d'administration de l'hébergement est facile à utiliser et à comprendre. Je n'ai pas encore installé Wordpress car le contenu n'est pas prêt mais ce sera la prochaine étape et je suis très confiant. Merci !

Pierre-André Liné

Avis avislws 20/04/2022

Un service technique excellent

Je suis client chez LWS depuis 2011 avec une boutique OSCommerce qui tourne comme une horloge depuis cette date sur un hébergement mutualisé. La disponibilité de la boutique est très proche de 100%. Concernant les rares problèmes rencontrés en huit ans, j’ai eu à chaque fois un technicien compétent qui a résolu le problème très rapidement et efficacement. Je suis en train de migrer sur une plateforme Pretashop sur un VPS, avec l’offre LWS Debian 9 et Prestashop. Un technicien m’a grandement aidé pour finaliser l’installation de la boutique lors de la mise à jour vers la dernière version de Prestashop 1.7 qui posait problème. Je suis très satisfait de LWS, et ce sur la durée : réponses et réactions rapides et efficaces. Je recommande cet hébergeur et encore merci.

Alain

Avis trustpilot 16/04/2022

Une expérience jamais égalée !

Étant Développeur Web & Mobile Full-Stack depuis plus de 5 ans déjà, j'ai rarement eu un service client aussi rapide et efficace. Sans compter la qualité du service en ligne. Je recommande VIVEMENT LWS !

Chris KOUAKAM

Avis hostadvice 12/04/2022

Très bon hébergeur

J'ai un serveur VPS chez eux et je n'ai aucun problème, dès qu'il y a un problème le service technique est la pour vous aider et répond assez rapidement à votre demande. Je recommande vivement cet hébergeur.

Vanden Cruyce

Avis avislws 09/04/2022

Je suis ravie

Je suis ravie d'être avec LWS sur tous les plans, je remercie les Techniciens (Fabrice, Omar, Sandy-Mahitsison) depuis plus de 8 ans j'ai évolué avec LWS et toujours soutenue. Une véritable relation humaine même si les questions ou nos inquiétudes ne correspondent pas à leurs missions, ils sont là pour nous répondent et nous rassurent. Mon site c'est mon travail ma source de revenue donc il sont mes partenaires ! les travailleurs de l'ombre merci à eux ! Merci LWS

L'atelier-and-Co

Commentaires (0)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.