Formation « Des champs administrables avec ACF »

Les principaux champs ACF (2/3) • Choix, relations et jQuery

Lecture : 7 minutes • 7

Il existe d’autres champs ACF qui peuvent s’avérer utiles comme les cases à cocher, les vrai/faux, ou encore d’autres champs à base de jQuery.

On continue l’exploration des champs ACF avec une nouvelle fournée de champs tous plus utiles les uns que les autres.

Les champs de choix

Jusqu’à présent on a vu des champs ouverts, permettant d’insérer ce que l’on souhaite. On va maintenant aborder les champs proposant des choix prédéfinis.

Le champ liste déroulante

La liste déroulante utilise un champ <select> afin de proposer diverses options. Dans les réglages vous pourrez activer l’interface avancée, qui va appeler la librairie Select2 qui permet d’améliorer les possibilités natives :

Les listes déroulantes d'ACF : la simple à gauche, et l'avancée à droite
Les listes déroulantes d’ACF : la simple à gauche, et l’avancée à droite

Avec l’interface avancée, le champ possède un moteur de recherche qui s’avère très pratique si votre liste déroulante est longue.

C’est le réglage Choix qui va nous permettre d’indiquer les valeurs possibles. Le principe est d’indiquer une valeur par ligne, ou même sous la forme clé : valeur. La clé est enregistrée en base et la valeur est affichée à l’écran.

L'interface de saisie des choix de la liste  déroulante d'ACF
La saisie des choix dans ACF

Dans format de sortie vous pouvez indiquer si vous voulez récupérer la clé (intitulé), la valeur, ou bien les deux sous forme de tableau PHP.

Vous pouvez également choisir s’il est possible de sélectionner plusieurs valeurs. D’ailleurs, si vous optez pour plusieurs valeurs, activez l’interface avancée, car le champ HTML natif de sélection multiple nécessite de maintenir la touche CTRL pour sélectionner plusieurs éléments.

La liste déroulante avancée à choix multiples
La liste déroulante avancée à choix multiples

L’affichage avancé par tags (étiquettes) est bien plus pratique en terme d’expérience utilisateur.

Lorsque vous utilisez des valeurs multiples, il faut légèrement adapter le code car vous recevrez un tableau de données PHP :

PHP
page.php

Sinon, on va voir juste après que les cases à cocher ou encore le groupe de boutons sont plus judicieux lorsque le nombre de choix proposé est restreint.

Sa documentation : le champ liste déroulante.

La case à cocher et les boutons radio

Les deux champs fonctionnent de la même manière. La différence fondamentale est que vous pouvez cocher plusieurs cases d’un coup, alors que le bouton radio impose un et un seul choix.

Les cases à cocher et les boutons radio dans ACF
Les cases à cocher et les boutons radio

Les options vous permettront d’afficher les cases horizontalement ou verticalement, et vous donneront la possibilité de permettre une valeur personnalisée.

Leur documentation : le champ case à cocher, le champ bouton radio.

Le groupe de boutons

Le groupe de boutons permet de choisir plusieurs valeurs, au même titre que les cases à cocher. La différence est purement esthétique, mais les 2 champs ont la même finalité.

Le groupe de boutons d'ACF
Le groupe de boutons est une alternative aux cases à cocher

Sa documentation : le champ groupe de boutons.

Le champ Vrai / Faux

Ce champ permet d’afficher une simple case à cocher pour un résultat binaire oui / non. On pourra s’en servir dans le code du template pour écrire une condition logique.

Le champ Vrai/Faux et sa version avancée
Le champ Vrai/Faux et sa version avancée

L’interface avancée (dans la version pro) permet d’afficher un interrupteur on/off plutôt mignon.

Dans mon exemple, si la case est cochée, c’est que je recommande la recette, et dans le code ça se traduit ainsi :

PHP
page.php

Ce genre de champ va également nous permettre de créer des logiques conditionnelles, afin d’afficher ou cacher d’autres champs en fonction de la valeur. On en reparlera dans les prochains cours de cette formation.

Sa documentation : le champ vrai/faux.

Les champs relationnels

Les champs relationnels sont parmi les plus puissants d’ACF car ils vont permettre de faire la liaison entre plusieurs publications. C’est de cette manière que j’ai réussi à créer une relation parent / enfant entre mes formations (qui est un CPT) et mes cours (un autre CPT).

Les champs de lien

Il existe 2 champs pour faire des liens : le champ Lien classique qui permet de faire un lien vers n’importe quelle URL, et le champ Lien vers une publication, qui permet de créer un lien vers une ressource de votre site grâce à un moteur de recherche :

ACF propose 2 types de champs pour les liens : les liens internes et les liens externes
Il existe 2 types de champs de lien : pour les liens internes, et pour les liens externes

Si vous voulez autoriser n’importe quel type de lien : interne ou externe, alors optez pour le champ Lien, mais si vous voulez contraindre le choix d’un lien interne au site, rabattez plutôt sur le champ Lien vers une publication.

Concernant le format de sortie, vous pouvez afficher directement l’URL, ou récupérer un tableau PHP contenant en plus le titre de la publication. Là aussi, faites un var_dump() pour voir toutes les données proposées.

PHP
page.php

Leur documentation : le champ lien, le champ lien vers une publication.

Le champ Objet publication

Le problème du champ lien, c’est qu’il ne renvoie que l’URL d’un article. Si vous avez besoin de récupérer son identifiant et son contenu, alors il faudra plutôt utiliser le champ Objet publication.

Il permet par exemple d’afficher le contenu d’un article dans une autre publication. Je l’utilise d’ailleurs pour afficher un résumé de mes tarifs sur la page d’accueil de ce site. Tarifs qui se trouvent initialement dans leur propre page.

Le champ Objet publication d'ACF permet de sélectionner une publication et récupérer ses informations
Le champ Objet publication permet de sélectionner une publication et récupérer ses informations

Ce champ utilise également la libraire Select2 de jQuery et vous permet donc de rechercher facilement l’une de vos publications dans WordPress.

Ses options vous permettent même de limiter les choix à un type de publication ou une taxonomie particulière.

En sortie, on peut récupérer l’ID de l’article, ou bien un objet contenant toutes les informations de celui-ci, et même ses propres champs ACF.

PHP
page.php

Sa documentation : le champ objet publication.

Le champ relationnel [ACF Pro]

Le champ relationnel est original, puissant, et très pratique. Il permet de sélectionner plusieurs publications, et de choisir dans quel ordre elles doivent apparaitre. La colonne de gauche liste les publications disponibles, et celle de droite affiche notre sélection.

Le champ relationnel d'ACF permet de sélectionner plusieurs articles et choisir leur ordre
Sélectionnez une ou plusieurs publications et choisissez leur ordre d’affichage

On l’utilise pour afficher des publications choisies : à la place d’afficher les dernières en date (à la manière de la WP Query qu’on abordera plus tard), ce champ permet au rédacteur de choisir quelles publications il veut mettre en avant.

J’ai mis longtemps à comprendre l’intérêt de ce champ, mais au final c’est l’un de mes préférés ! Un cours avec des exemples pratiques lui est dédié dans la partie premium de cette formation.

Sa documentation : le champ relationnel.

Les champs Taxonomie et Utilisateur

Ce sont peut-être les deux champs les moins utiles d’ACF, mais ils pourraient trouver leur utilité dans certains cas.

Les champs taxonomie et utilisateur d'ACF
Les champs taxonomie et utilisateur

Le champ Taxonomie permet de lister et choisir une catégorie ou une étiquette. Mais il vaut du coup mieux utiliser l’interface native des taxonomies.

Le champ Utilisateur permet de choisir un utilisateur, un peu comme c’est le cas avec l’auteur. Dans le cadre de Capitaine WP, je suis l’auteur de toutes les publications, mais j’utilise ce champ pour définir quelle personne présente telle ou telle formation.

Leur documentation : le champ taxonomie, le champ utilisateur.

Les champs jQuery

Il existe également certains champs qui font appel à jQuery pour proposer une expérience agréable, comme c’est le cas avec le champ de date et d’heure, de couleur ou encore la Google Map.

Les champs de date et d’heure

Il existe 3 champs pour sélectionner une date, une heure ou alors une date et une heure. Chacun d’entre eux propose un sélecteur qui apparait au clic sur le champ.

Les champs date, heure, date et heure d'ACF ainsi que les sélecteurs
Les 3 champs de date et d’heure, et leurs sélecteurs pratiques

Pour chacun de ces champs vous allez pouvoir choisir le format d’affichage dans l’administration, ainsi que le format affiché dans votre modèle.

ACF propose plusieurs types de formats d'heure et dates
Les différents formats d’affichage de dates et heures proposés

Ce sont les formats de date en PHP qui sont utilisés ici. Pour afficher ensuite votre date/heure dans le modèle, utilisez ce code :

PHP
page.php

Vous pourriez utiliser ce champ pour afficher une date directement dans le template (pour gérer des événements par exemple), ou alors l’utiliser pour créer un filtre dans une WP Query (que l’on verra très bientôt dans cette formation).

Leur documentation : le champ date, le champ date et heure.

Le champ couleur

Le champ couleur va permettre de sélectionner une couleur en tapant son code héxadécimal ou en sélectionnant la couleur directement avec le sélecteur natif de WordPress.

Le champ couleur d'ACF
Le champ couleur

Il va prendre tout son intérêt lorsque l’on abordera les pages d’options ACF (version pro), qui vont nous permettre de créer des réglages non pas liés à une publication en particulier, mais à tout le site.

Pour afficher une couleur en fond par exemple, utilisez ce code :

PHP
page.php

Sa documentation : le champ couleur.

Le champ Google Map

Et enfin, le champ Google Map va vous permettre d’afficher une carte Google avec autant de marqueurs que vous le souhaitez, et ce sans avoir besoin de faire appel à une extension !

Le champ Google Map permet d'afficher une carte, chercher une adresse et insérer un marqueur.
Le champ Google Map et sa recherche d’adresse

Mais pour faire en sorte que cela fonctionne, il va vous falloir une clé d’API Google Map valide via Google Cloud Platform. Ajoutez ensuite dans votre functions.php ce code :

PHP
page.php

Au niveau des réglages vous allez pouvoir choisir le centrage par défaut, le niveau de zoom, et la hauteur de la carte.

Pour l’affichage sur le site, il va falloir un peu de Javascript. Mais la documentation d’ACF fournit tout le nécessaire pour que ça fonctionne facilement. Dans la suite des cours, je vous montrerai une étude de cas d’une Google Map ACF pour créer notamment les emplacements d’un food-truck, à l’aide de Custom Post Types.

Sa documentation : le champ Google Map.


On vient de voir une nouvelle fournée de champs tous autant utiles les uns que les autres ! Mais ACF ne s’arrête pas là, car il existe encore d’autres champs seulement disponibles dans la version pro. Et croyez-moi, elle vaut entièrement l’investissement !

On va profiter du prochain cours pour les découvrir, et ainsi clore cette série de présentation des champs ACF.

7

Questions, réponses et commentaires

  1. Condorito

    Le 2 janvier 2021

    Bonjour,
    Très intéressant, ce tuto.
    J’essaye de formatter les dates comment dans l’exemple donné ici (et sur les docs d’ACF).
    Mais j’obtiens une erreur sibylline :
    “Uncaught Error: Call to a member function format()”, lors de l’affichage
    (echo $date->format( ‘j F Y’ );)

    C’est “un peu mieux” avec la solution proposée par ACF (via date_i18n);
    mais le 8 avril 2021 (08/04/2021) s’affiche comme 4 Août 2021.
    Je précise que mon site est configuré en français avec les dates ‘j F Y’.

    Une idée ?

  2. Condorito

    Le 2 janvier 2021

    Bonjour Maxime,
    Concernant mon souci, j’ai trouvé un “workaround” :
    $date_string = get_field( ‘date’ );
    if ($date_string){
    $arr_date = explode(“/”, $date_string);
    //revert date order (bug).
    $date_string = $arr_date[1] . ‘/’ . $arr_date[0] . ‘/’ . $arr_date[1];

    $unixtimestamp = strtotime( $date_string );
    // Display date in the format “l d F, Y”.
    echo date_i18n( “l j F, Y”, $unixtimestamp );
    }

    Entre grenoblois, on se comprend !

    1. Maxime BJ

      Le 2 janvier 2021

      Ce n’est pas l’approche la plus optimale car là tu gères une chaine de caractères et non pas une date. En PHP, la bonne méthode est d’utiliser DateTime::createFromFormat (avant d’utiliser format) pour obtenir un objet date qu’il sera plus facile, et plus propre à manipuler. Normalement l’exemple que j’ai donné fonctionne plutôt bien : la date est stockée au format YYYMMDD dans la base donc en faisant un createFromFormat(‘Ymd’, get_field(‘date’)); ça devrait marcher à tous les coups.

  3. Daniel

    Le 28 novembre 2022

    Bonjour
    Mais ou sont passés les champs publication
    Image mise en avant et tout le reste !!

    1. Maxime BJ

      Le 28 novembre 2022

      Ce sont des champs natifs de WordPress. Ils n’ont pas bougé et devraient toujours être là. Mais si tu es dans un Custom Post Type qui ne les prend pas en charge, c’est normal de ne pas les voir.

  4. Jean-luc

    Le 22 novembre 2023

    Merci pour ces cours.
    2 questions :
    Comment position le champs par exemple liste à un emplacement précis de la page?
    Comment charger une liste déroulante à partir du résultat d’une requête SQL?

    1. Maxime BJ

      Le 23 novembre 2023

      Pour le positionnement des données dans ton template, je t’invite à consulter les cours précédents de cette formation : https://capitainewp.io/formations/acf/advanced-custom-fields/. Tu peux aussi consulter la formation développeur de thèmes, et notamment le cours sur le template hierarchy de WordPress : https://capitainewp.io/formations/developper-theme-wordpress/template-hierarchy/
      Pour charger une liste déroulante spécifique, tu peux utiliser le hook ACF : acf/load_field/ dont tu trouveras la documentation officielle avec des exemples ici : https://www.advancedcustomfields.com/resources/dynamically-populate-a-select-fields-choices/

Laisser un commentaire