Formation « Développer un thème WordPress sur mesure »

Les champs personnalisés : custom fields

Lecture : 3 minutes • 12

Les champs personnalisés permettent d’ajouter des informations dans une publication en plus du contenu principal. L’interface des custom fields est cependant très limitée, c’est pour cela qu’à terme on basculera sur un outil comme ACF.

Quelle est l’utilité des champs additionnels ?

Pour ce cours je vais reprendre l’exemple du blog de jeux vidéo. Imaginons que l’on veut faire des tests de jeux, et qu’à la fin de l’article on veuille donner une note, un avis, ainsi que les plus et les moins. Un peu comme on le voit sur tous les sites de tests en quelques sortes :

Des champs additionnels sur le site du JDG pour rédiger un avis, une note, les plus et les moins.
Le test de Resident Evil 2 sur JDG

Alors, aujourd’hui on pourrait très bien créer des blocs spécifiques avec Gutenberg. Si ça vous intéresse, j’ai une formation dédiée à ce sujet pour vous !

Oui mais voilà, parfois ces informations n’apparaitront pas dans la zone “principale”, mais peut-être ailleurs dans le design du site (par exemple en sidebar). Du coup dans ce cas, on sera obligé de faire appel aux champs additionnels.

Activer les champs additionnels dans WordPress

Par défaut l’interface des champs additionnels est cachée. Dans votre éditeur visuel allez dans le menu 3 points en haut à droite, puis Options, et enfin cochez Champs personnalisés.

Activer les champs personnalisés dans WordPress 5
Menu, Options, et cochez Champs personnalisés

L’interface des champs va alors apparaitre en bas de page et ressemble à ceci :

L'interface de gestion des custom fields apparait en bas de l'écran
L’interface très succinte des custom fields

Le fonctionnement est simple, et se base sur un duo clé / valeur : cliquez sur le bouton Saisissez-en un nouveau (comme on n’en n’a pas pour le moment), et indiquez par exemple note dans nom, et 7 dans Valeur.

Ajoutez un nouveau champ pour les plus, ainsi que pour les moins, et enfin l’avis.

Saisie de nouveaux champs additionnels dans l'interface des custom fields
Saisie de nos informations, dans une interface un peu trop limitée

Bon, autant dire que c’est très limité, on ne peut même pas faire de mise en forme du texte, ni même de liste à puce pour nos plus/moins.

Et sinon, il n’y a pas un peu mieux ?

Nativement, WordPress ne nous permet pas d’aller plus loin, on pourrait créer nos propres champs à la main, mais on va voir plus tard qu’avec l’extension ACF (Advanced Custom Fields) on va pouvoir créer des champs additionnels bien plus sexy et fonctionnels !

Advanced Custom Fields (ACF)

Advanced Custom Fields (ACF)

Advanced Custom Fields (ACF) helps you easily customize WordPress with powerful, professional and intuitive fields. Proudly powering over 2 million we …

Par WP Engine

Et ce n’est pas pour rien que cette extension est devenue incontournable chez les développeurs de thèmes !

Conseil

Je vous conseille d’attendre les cours sur l’extension ACF pour faire vos champs additionnels. On verra que sa prise en main est facile et ses possibilités illimitées.

Pour les plus impatients d’entre vous, vous pouvez vous rendre directement sur le cours dédié à la prise en main d’ACF.

Afficher le contenu de vos champs additionnels

Maintenant que l’on a ajouté nos champs additionnels dans l’éditeur de WordPress, il va falloir les afficher dans notre template.

L’avantage, c’est qu’on va pouvoir les afficher où bon nous semble (et même en dehors de la boucle WordPress si on veut). Pour cela, on va utiliser la fonction get_post_meta() dans single.php ou même dans archive.php :

PHP
single.php

Le premier paramètre est l’identifiant de l’article, que l’on récupère pour l’article en cours grâce à la fonction get_the_ID(). Notez du coup qu’on pourrait très bien récupérer la valeur d’un autre article en fournissant un autre identifiant.

Le second paramètre est le nom de la meta que l’on a indiqué dans l’interface des champs personnalisés : avis, note, plus, moins…

Enfin, le troisième paramètre est un booléen qui, passé à true, permet de dire que la valeur de ce champ est unique pour l’article (il n’y aura pas 2 notes par exemple). Si on la passe à false, la meta renvoyée sera alors un tableau, et non pas une simple chaine.

Ça aurait d’ailleurs pu être utile pour nos plus/moins : un plus = un champ. Mais ne compliquons pas les choses pour le moment car ce sera bien plus simple avec ACF.

D’un point de vue technique, on appelle cela des Post Meta (des méta données de l’article) et elles sont stockées dans la table wp_postmeta de la base de données du site.

Les valeurs des champs additionnels sont stockées dans la table postmeta
Les valeurs des champs additionnels sont appelées des meta

Pour plus d’informations concernant les Post Metas, je vous invite à consulter la documentation officielle :


Vous connaissez maintenant les champs additionnels, mais vous savez surtout que c’est grâce à l’extension ACF que l’on va pouvoir aller bien plus loin en ce qui concerne les custom fields.

12

Questions, réponses et commentaires

  1. alexCrc

    Le 6 février 2020

    Bonjour, j’ai suivi le cours mais je n’arrive pas à faire apparaître les champs additionnels sur ma page. ! Auriez vous une solution ?

    1. Maxime BJ

      Le 9 février 2020

      L’erreur qu’on fait le plus souvent est de modifier le mauvais modèle de page. Est-ce que tu as vérifié avec le template hierarchy que tu es sur la bonne page ? Si tu ajoutes un texte fixe dans le modèle, est-ce que tu le vois ?

      1. Narcisse Fondja

        Le 29 février 2020

        Bonjour, j’ai le meme probleme , dans le cours vous ne faites aucune mention sur le model de page à definir avant l’activation, j’ai meme essayer de definir un model de page mais toujours aucune apparition.
        Aurais-je mal saisi vos explications?

        1. Maxime BJ

          Le 29 février 2020

          C’est en fonction de la page où tu en as besoin justement. Pour cela il faut se reporter au cours sur le template hierarchy. Et dans les prochains cours on voit justement comment assigner un groupe de champ dans une page, un modèle ou un type de publication en particulier. Je t’invite à parcourir l’ensemble des cours pour avoir la vision d’ensemble nécessaire.

  2. B. Julien

    Le 9 septembre 2020

    Bonjour,
    J’ai une question concernant les champs de saisie. Avec le theme telecharge, il y avait des champs par defaut qui etait présentés en bas de page sur l’éditeur. Ils ont basculé sur la partie de droite en onglet (menu contenu / Bloc). Comment peut-on les remettre en bas de page de l’editeur ?

    1. Maxime BJ

      Le 10 septembre 2020

      Le but de ce cours est surtout de présenter les limites de ce système, à partir du prochain cours on passe sur du ACF où tu auras plus de contrôle. Je te conseille de passer aux prochains cours pour voir comment créer des groupes de champs.

  3. Eric Braidy

    Le 25 avril 2021

    bonjour, je ne peux creer de nouveau champs la saisie du nom est squatée par “Fakerpress_flag” je l’ai désactivé mais ça ne change rien.
    Sinon super tuto, merci

    1. Maxime BJ

      Le 25 avril 2021

      Désactive l’extension FakerPress dans ce cas. Sinon je t’invite à attendre les cours suivants. Je montre les champs personnalisés uniquement pour dire qu’ils sont inutiles, et afin d’introduire ACF juste après. Donc tu ne devrais pas les utiliser en toute logique.

  4. Eric Braidy

    Le 25 avril 2021

    bon mon pb de faker… est resolu,

  5. Adrien

    Le 28 avril 2021

    Excellent article ! Simple et clair qui tombe juste à pic pour moi 🙂

  6. Michel Liquiere

    Le 22 novembre 2021

    Bonjour,
    Pourquoi n’utilisez vous pas les methode the_field et get_field de ACF?

    1. Maxime BJ

      Le 23 novembre 2021

      Je pense que tu as posé ta question sans lire ce cours. Je t’invite alors à d’abord lire attentivement ce cours avant de poser tes questions. Mais voici tout de même un élément de réponse : ce cours parle des champs additionnels natifs de WordPress. L’objectif est d’y voir son potentiel, mais surtout ses limites. J’introduis d’ailleurs ACF et j’indique justement que ce sera une solution plus poussée, et plus élégante pour gérer les champs additionnels. On aborde justement ACF de manière détaillée un peu plus tard dans la formation.

Laisser un commentaire