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

Advanced Custom fields : Créer son premier groupe de champs

Lecture : 8 minutes • Pratique : 20 minutes • 2

ACF est l’outil incontournable pour ajouter des champs additionnels à vos publications et ainsi permettre au rédacteur de saisir plus facilement les différentes données d’une page. Dans ce cours on va voir comment créer notre premier groupe de champ, l’assigner à un contenu et afficher les données sur notre page.

Dans le cours précédent, on a vu les bienfaits d’ACF qui nous propose d’ajouter des champs additionnels bien plus sexy dans notre interface de rédaction. On va maintenant mettre en place des champs ACF, et pour cela on va reprendre le même exemple que pour le cours sur les champs personnalisés, à savoir un test de jeux vidéo.

Mais on va voir que c’est bien plus propre et efficace avec ACF ! Alors sans plus attendre, jetons-nous dans le bain !

Comment fonctionne ACF ?

Dans notre cas, on souhaite ajouter des champs à nos tests de jeux vidéo : note globale, les plus, les moins, mais aussi pourquoi pas la pochette du jeu, son prix et sa date de sortie !

Sur le site, ça donnera ça :

Un bloc critique permet de faire la synthèse du test d'un jeu
La pochette, les plus, les moins et la note viennent conclure le test en bas de page

Voici comment on procède habituellement avec ACF :

  • On créé un groupe de champs et on y ajoute nos champs (texte, image…) ;
  • On assigne ce groupe à une page, des articles…  ;
  • On modifie le template concerné pour afficher ces champs.

Appliqué à notre exemple, cela donne :

  • On va créer un groupe contenant nos champs note, plus, moins, pochette, date de sortie et prix ;
  • On va assigner ce groupe aux articles de la catégorie Jeux vidéo seulement ;
  • On va afficher les champs dans notre single.php ;

Ensuite, le rédacteur (nous pour l’instant) n’aura plus qu’à rédiger son contenu depuis sont interface d’administration !

On va maintenant installer ACF à partir du répertoire des extensions afin de pouvoir l’utiliser.

Installer ACF

Rendez-vous dans votre interface d’administration de WordPress puis Extensions > Ajouter. Recherchez Advanced Custom Fields (et pas juste ACF, sinon il ne trouvera pas) et installez-la, puis activez-la !

Advanced Custom Fields

Advanced Custom Fields

Customize WordPress with powerful, professional and intuitive fields.

Elliot Condon

Cette version est gratuite et propose déjà pas mal de fonctionnalités. Mais il existe aussi une version Pro qui vous permettra d’aller encore plus loin avec encore plus de champs et d’options ! Il vous en coutera 100$ australiens pour une licence illimitée, et à vie, soit un investissement rapidement rentabilisé !

Découvrir ACF Pro

Pour le moment et pour bon nombres de projets, la version gratuite suffira amplement !

Si vous avez opté pour la version Pro, vous allez télécharger l’archive de l’extension, la décompresser et placer le dossier ACF manuellement dans le wp-content/plugins/ de votre site. Ensuite allez dans dans votre interface d’administration, Extensions > Extensions installées, puis cliquez sur Activer sous Advanced Custom Fields.

Profitez-en pour aller insérer votre clé de licence dans ACF > Mises à jour afin d’activer les mises à jour.

Le saviez-vous ?

La version française d’ACF Pro est traduite par mes soins. Aussi, n’hésitez pas à me faire signe si vous trouvez une faute, mauvaise correction ou chaine manquante !

Déclarer un groupe de champs

Une fois ACF activé, vous devriez voir une nouvelle entrée ACF (ou Custom Fields en anglais) en bas du menu latéral de WordPress :

Le menu ACF

Cliquez dessus puis sélectionnez Ajouter. Vous tomberez sur cette interface :

L'interface de création de champs ACF.
C’est ici que vous allez définir votre groupe et les champs qu’il va contenir

On va commencer par donner un nom à notre groupe de champ, je vais l’appeler Tests de jeux.

Déclarer les champs

Ensuite, on va ajouter notre premier champ. Pour cela cliquez sur le bouton bleu + Ajouter nous permettant de définir un nouveau champ.

La note

On va lui donner un titre, par exemple Note, et définir le type de champ sur Nombre. Le Nom du champ est défini automatiquement à partir du titre. C’est l’identifiant qui doit être unique, et qu’on utilisera dans le template pour afficher la valeur. Autrement dit, c’est un Slug.

Ils y a plusieurs options dessous, mais pour le moment celles qui vont nous intéresser c’est :

  • Suffixe : mettez /10 afin d’ajouter une indication sur le champ pour le rédacteur ;
  • Valeur minimale : 0 (je ne vous fait pas un dessin) ;
  • Valeur maximale : 10 (ou 20, comme vous voulez) ;

On va procéder de la même manière pour les autres champs :

Les plus

  • Titre : Les plus ;
  • Nom : les_plus ;
  • Type de champ : Éditeur WYSIWYG ;
  • Barre d’outils : Basic ;
  • Boutons d’ajout de médias : non.

Les moins

  • Titre : Les moins ;
  • Nom : les_moins ;
  • Type de champ : Éditeur WYSIWYG ;
  • Barre d’outils : Basic ;
  • Boutons d’ajout de médias : non.

Date de sortie

  • Titre : Date de sortie ;
  • Nom : date_de_sortie ;
  • Type de champ : Date.

Prix

  • Titre : Prix ;
  • Nom : prix ;
  • Type de champ : Nombre.
  • Suffixe: €.
  • Valeur minimale : 0.

Pochette

  • Titre : Pochette ;
  • Nom : pochette ;
  • Type de champ : Image ;
  • Valeur affichée dans le template : Données de l’image (array) ;
  • Taille de prévisualisation : Moyen.

C’est grâce à ce genre de champs comme les images qu’ACF va prendre tout son intérêt !

Vous devriez maintenant donc avoir tous ces champs :

La liste des champs que l'on vient de créer
Les champs que l’on vient de créer, qui composent notre groupe Test de jeux

Vous pourrez à tout moment venir modifier ou ajouter des paramètres à ce groupe. Pour l’instant, on va laisser comme ça.

Un champ ou une taxonomie ?

D’ailleurs, on pourrait ajouter un champ Plateforme, où l’on pourrait indiquer si le jeu sort sur XBox, Playstation, PC

Mais en fait là, ce serait plutôt une façon de « classer » le jeu. Même chose si on voulait définir le type de jeu : Action, Course, Plateau, Multi

Du coup, dans ces deux cas, créer un champ n’est pas la meilleure approche. À la place, il faudrait plutôt créer une taxonomie ! Et ça tombe bien, car maintenant vous savez faire !

Si c’est pour faire du classement, la Taxonomie sera plus indiquée que les champs ACF

Assigner le groupe de champs à des publications

On a créé un groupe de champs, mais il faut maintenant indiquer à ACF où et quand il doit apparaitre.

Nous ce que l’on veut, c’est qu’il apparaisse dans les articles de la catégorie Jeux vidéo seulement. (Vérifiez que vous avez bien une telle catégorie créée dans votre site).

Sous l’interface d’ajout de champs que l’on vient de manipuler, vous trouverez une autre Metabox nommée Assigner ce groupe de champs.

Assigner un groupe de champ a des publications
C’est dans ce deuxième bloc que l’on va dire qu’on veut voir nos champs apparaitre dans les articles

Le but ici est d’indiquer que :

  • On veut montrer ces champs lorsque le type de publication est Article ET ;
  • Que la catégorie de l’article est Jeux vidéo ;

Si votre blog est entièrement dédié aux jeux vidéo, alors la deuxième condition n’est même pas nécessaire. En général, on se cantonne à une seule condition, ce qui suffit largement.

Il existe pleins d’autres conditions, par exemple afficher le groupe lorsque :

  • Le type de publication est une page ;
  • Le modèle de la page est Service ;
  • Que la taxonomie Type de projet est Photo

Bref, avec ce système vous allez pouvoir couvrir un bon nombre de cas.

D’ailleurs vous pouvez tout à fait créer plusieurs groupes de champs et les assigner à une même publication, rien ne l’interdit et ça peut s’avérer pratique pour aérer vos champs ou les regrouper par utilité.

Bien, notre groupe est prêt, alors pensez à l’enregistrer en cliquant sur Publier ou Mettre à jour à droite, et on peut passer à la suite.

Aparté: Comment ACF enregistre les données des groupes ?

Tiens d’ailleurs, vous savez comment sont enregistrées les données de ces groupes de champs dans WordPress ? Regardez l’URL de la page : on y retrouve post_type ! Eh oui : Les groupes de champs ACF sont enregistrés dans un type de publication personnalisé non public ! Dans le cours dédié aux CPT je vous avais dit que certaines extensions les utilisaient parfois pour enregistrer des données. C’est le cas d’ACF !

Saisie du contenu

On va maintenant se rendre dans Articles > Ajouter pour créer un nouveau test de Jeux vidéo. Pour l’instant on ne voit pas nos champs, car il faut d’abord sélectionner la catégorie Jeux vidéo. Enregistrez le brouillon et rechargez la page.

Avant Gutenberg, les champs apparaissaient directement lors de la sélection de la catégorie, mais depuis WP5 il faut recharger la page. Peut-être que ça changera à terme.

Vos champs apparaissent après le contenu :

Les champs ACF apparaissent en dessous l'éditeur visuel
Nos champs apparaissent bien dans notre article, il n’y a plus qu’à les remplir

Plutôt sympa non pour saisir le contenu ? Pas besoin de réfléchir, il suffit de remplir les cases ! L’éditeur visuel WYSIWYG me permet d’accéder aux options de mises en forme du texte, dont la liste à point.

J’ai joué sur quelques paramètres pour améliorer la mise en page des champs en les disposants les uns à côté des autres grace à un système de colonne. Dans votre cas, ils seront simplement listés les uns sous les autres. On verra comment rendre cela plus joli un peu plus tard !

Afficher les champs dans le template

Dernière étape : afficher les valeurs de nos champs dans notre article !

Pour cela ACF propose une fonction pour récupérer et afficher le contenu des champs dans votre template :

PHP

C’est la même logique qu’avec les Templates Tags natifs de WordPress : une fonction the_ permet d’afficher directement le résultat, et une fonction get_ pour récupérer la valeur.

En fait la fonction the_field utilise la fonction native get_post_meta que l’on avait pu voir dans le cours sur les champs personnalisés. On pourrait d’ailleurs utiliser cette dernière fonction mais celle d’ACF simplifie un peu les choses.

Mis en application avec mes champs dans la page, ça donne ça :

PHP
single.php

Pour commencer, j’ai utilisé le Conditionnal Tag (ou marqueur conditionnel) has_category('jeux-video') afin de vérifier que la catégorie de l’article est bien Jeux vidéo, sinon inutile d’afficher mon bloc avec mes champs. Cela n’est utile que dans ce cas précis car je souhaite n’afficher ma critique que dans cette catégorie.

Attention

Ne confondez pas avec is_category() qui permet de tester si une page archive affiche actuellement la liste des publications d’une catégorie.

Ensuite, j’utilise simplement les fonctions the_field là où je souhaite afficher les valeurs de mes champs ACF. Pensez bien à indiquer en paramètre le slug de ces champs, et non pas leur titre.

Plutôt facile pour le moment non ?

Le cas particulier de l’image

Pour l’image, c’est un peu différent : ACF ne renvoie pas la balise image, ni même juste l’URL de celle-ci, mais un tableau contenant plusieurs données. Si je fais un var_dump de mon image j’obtiens :

ACF nous renvoie un tableau contenant de nombreuses données utiles sur l'image
Toutes les données de notre image sont là

C’est dû au fait que, lorsque l’on a défini notre champ ACF, on a demandé un tableau de données en format de sortie :

Les différents choix de données renvoyées par ACF pour l'image
Par défaut, ACF vous renvoie un tableau de données

On observe qu’ACF nous fournit pas mal d’informations sur l’image, comme son nom ou son titre. Mais ce qui va nous intéresser c’est le sous-tableau sizes qui contient toutes les tailles d’images intermédiaires que l’on a créé dans le cours sur les tailles d’images personnalisées.

On aurait pu également demander de ne recevoir que l’URL de l’image, ou encore simplement son ID.

En fait, recevoir directement l’URL est une mauvaise idée car vous n’aurez que celle de l’image originale, et si celle-ci fait plus de 2000px de large, on va avoir un souci de performances. C’est pour cela que l’on préfère récupérer l’une des tailles d’images intermédiaires.

Vous pouvez sinon récupérer l’ID de l’image. Dans ce cas quelques fonctions WordPress vont vous permettre de récupérer votre image :

PHP
single.php

On utilise la fonction native wp_get_attachment_image_src pour récupérer l’URL de l’image. Le second paramètre permet d’indiquer quelle taille d’image on souhaite.

Les deux techniques se valent, donc faites comme vous préférez !

Si vous souhaitez en savoir plus sur la gestion des champs ACF, je vous invite à consulter la documentation officielle qui est extrêmement bien réalisée.

Et voici maintenant le résultat final :

L'affichage des champs dans le template
Avec un peu de CSS, on peut vite avoir quelque chose de sympathique

Pas mal du tout !

Maintenant que votre groupe est en place, vos rédacteurs n’ont plus qu’à saisir leur contenu dans les champs ACF.

Conseil

Dans cette situation les rédacteurs n’ont aucun contrôle sur le design. Ils peuvent simplement remplir du contenu dans aucun risque de tout casser, contrairement à un Page Builder.


Vous savez désormais utiliser ACF pour ajouter des champs à vos contenus ! Vous allez pouvoir aller extrêmement loin grâce à WordPress et ACF, c’est un peu comme si vous veniez de découvrir vos nouveaux super pouvoirs !

Sachez enfin qu’aujourd’hui, pour cet exemple concret, on aurait pu créer un bloc Gutenberg. Si ça vous intéresse, j’ai une formation pour vous !

Dans le prochain cours, on va voir plus en détails les champs proposés par ACF.

2

Questions, réponses et commentaires

  1. Alina

    Le 16 août 2019

    Merci beaucoup pour cet article enrichissant. J’ai une petite question concernant les champs. En faite j’ai une page excitante et je voudrais ajouter 2 champs via ACF. Sur le back office on les voit, par contre sur le front ils n’apparaissent pas. Qu’est-ce qu’il faut faire svp?

    1. Maxime BJ

      Le 16 août 2019

      La réponse se trouve dans les prochains cours. Ici on créé notre champ, et ensuite on va l’afficher dans notre template. Je te laisse prendre connaissance du cours suivant, tu devrais y voir plus clair !

Laisser un commentaire