Formation « Des champs administrables avec ACF »

Les principaux champs ACF (1/3) • Contenus et médias

Lecture : 6 minutes • 8

Dans les 3 prochains cours on va découvrir plus en détails les différents champs proposés par ACF, et je vais vous donner quelques exemples où ils pourraient s’avérer utiles.

Dans le cours précédent, on a vu comment créer un groupe de champs et l’assigner à nos publications. Pour aller plus loin, on va maintenant voir plus en détails quels champs sont disponibles dans ACF, que ce soit la version gratuite ou la Pro. Il en existe pas mal et certains d’entre eux peuvent s’avérer très utiles !

Pour afficher leur valeur dans le template, c’est très simple, il suffit dans la majorité des cas d’utiliser la fonction the_field proposée par ACF :

PHP

D’ailleurs depuis quelques temps, la documentation ACF conseille de passer par la fonction esc_html() pour sécuriser les données à afficher :

PHP

C’est comme vous voulez. Après tout, vos champs ne sont administrables que par vos admins, il y a donc peu de risques.

Pour d’autres champs, ce sera légèrement différent. Dans ce cas je vous montrerai le code correspondant au cas par cas.

Pour tous les champs, je mettrai un lien vers leur documentation officielle car ACF a fait un effort considérable pour fournir des exemples clairs et faciles à comprendre.

Conseil

Prenez le temps d’essayer les différents réglages pour chaque champ. Je vais présenter les plus intéressants, mais il y en a trop pour tous les détailler ici, et certains pourraient présenter de l’intérêt selon vos besoins.

Passons maintenant en revue les différents champs et leurs particularités, et on commence avec les champs de contenu, et d’images.

Les champs de texte

Lorsque vous souhaitez saisir du texte, il existe 3 possibilités :

Le champ texte simple

Le champ texte est tout à fait basique et tient sur une seule ligne.

Le champ texte simple d'ACF
Le champ texte simple

Il est idéal pour toute donnée texte courte.

Sa documentation : le champ texte.

Le champ zone de texte (textarea)

Si vous avez besoin d’écrire un texte plus long, optez pour la zone de texte.

Le champ zone de texte d'ACF
Le champ zone de texte sur 4 lignes

Le réglage Lignes vous permettra de choisir la hauteur du champ. Il est réglé sur 8 lignes par défaut mais ça peut très vite charger l’interface.

Vous pouvez également définir comment sont gérés les retours à la ligne : pas de formatage (ils seront ignorés), avec des retours à la ligne via la balise <br>, ou alors chaque ligne est un nouveau paragraphe.

Si vous choisissez paragraphe, alors il ne faudra pas entourer de balises <p> votre champ dans le template (car il est interdit en HTML d’imbriquer des <p>) :

PHP
page.php

Sa documentation : le champ zone de texte.

Le champ éditeur de contenu (WYSIWYG)

Ce champ permet d’appeler l’éditeur Tiny MCE (l’ancien éditeur visuel de WordPress) afin de proposer des mises en formes plus riches, comme le gras, l’italique, la possibilité d’insérer un lien et même pourquoi pas des médias.

Le champ éditeur de contenu d'ACF
Le champ éditeur de contenu avec son bouton d’ajout de média

Parmi les réglages intéressants on retrouve la possibilité d’afficher ou cacher l’onglet HTML (texte brut). En général je choisis de cacher cet onglet afin de simplifier l’interface.

On peut aussi avoir la barre d’outil complète ou basique. Dans le cas où le champ ne devrait permettre que de faire du gras, italique et des liens, choisissez Basic. Mais si vous avez besoin des niveaux de titres, choisissez Full.

Vous pouvez également afficher ou cacher le bouton d’ajout de média, afin d’autoriser ou non l’insertion d’images dans ce champ.

Sa documentation : le champ éditeur de contenu.

Les champs de nombres

Afin d’ajouter un peu de contraintes dans vos champs, vous allez pouvoir utiliser les champs e-mail, nombre, URL ou encore mot de passe.

Le champ nombre

Pour le champ nombre, vous allez pouvoir fixer la valeur minimale, maximale et le pas (l’intervalle) entre chaque appui sur la flèche haut / bas.

Le champ nombre ACF
Le champ nombre avec un suffixe

Vous pourriez également afficher un préfixe ou un suffixe dans le champ : ajoutez par exemple le suffixe € lorsque la valeur attendue est un prix. Pour autant c’est une information uniquement dédiée à l’interface d’administration, et il faudra à nouveau ajouter ce préfixe / suffixe à la main dans le template :

PHP
page.php

Le champ curseur (range)

Pour aller encore plus loin avec les nombres, ACF vous propose également le champ curseur. Il permet de sélectionner une valeur grâce à un bouton à glisser de gauche à droite. Il y a également un champ nombre (qui a l’avantage d’être plus petit) pour définir la valeur à la main.

Du coup ce champ peut être pratique pour définir une valeur en pourcentage par exemple, ou n’importe quelle valeur devant se trouver dans un intervalle délimité.

Le champ curseur, l'alternative au champ nombre
Le champ curseur, alternative au champ nombre

Sa documentation : le champ range.

Les champs URL et e-mail

Les champs URL et e-mail permettent de vérifier le format avant enregistrement afin de contrôler que le texte saisi est bien une URL ou une adresse e-mail valide. ACF utilise simplement les balises correspondantes en HTML5.

Les champs URL et E-mail dans ACF
Les champs URL et E-mail sont des champs texte qui vérifient la validité des données insérées

Le champ mot de passe

Ce n’est pas le champ que vous utiliserez le plus souvent, il permet de cacher une valeur saisie, mais elle ne sera pas chiffrée à l’enregistrement, et un simple coup d’inspecteur permettrait de révéler sa valeur. À utiliser donc avec des pincettes.

Le champ mot de passe d'ACF
Le champ mot de passe

Sinon il possède les mêmes propriétés que le champ texte.

Les champs de médias

Le principal avantage d’ACF est la possibilité d’ajouter des champs de médias comme des images, des galeries, des fichiers et même des contenus embarqués (les embeds).

Le champ image

Le champ image va vous permettre d’afficher une image où bon vous semble dans votre page, et pas forcément dans le contenu. C’est donc un champ très pratique !

Le champ image d'ACF
Le champ image

Comme on l’a vu dans le cours précédent, il vaut mieux sélectionner en format de sortie l’identifiant (ID) de l’image, plutôt que l’URL (car ce serait toujours l’image originale, qui risque d’être trop grande selon le cas) ou un tableau de données (on n’a besoin que de l’ID car on utilisera ensuite les fonctions natives de WordPress).

Il faudra donc utiliser ce code pour afficher votre image dans votre template :

PHP
page.php

Cette fonction va générer la balise image et même le srcset qui va avec. Le second paramètre permet d’indiquer la taille de base de l’image parmi les tailles proposées par WordPress par défaut : thumbnail, medium, medium-large, large, full ou même celles que vous auriez ajouté dans la configuration de votre thème.

Si vous souhaitez appliquer l’image en fond via CSS, utilisez plutôt ce code :

PHP
page.php

wp_get_attachment_image_src retourne un tableau contenant l’URL, la largeur et la hauteur. C’est pour cette raison qu’on récupère l’entrée 0 du tableau, qui correspond à l’URL.

Sa documentation : le champ image.

Le champ galerie [ACF Pro]

Le champ galerie permet d’insérer plusieurs images à la fois en vue d’en faire une galerie photo ou un diaporama par exemple. Il n’est présent que dans la version Pro d’ACF.

Le champ galerie d'Images d'ACF
Le champ galerie, glissez les images pour les réorganiser

Dans les réglages, vous allez pouvoir ajouter des contraintes : taille minimale/maximale des images, poids limite des fichiers…

Dans l’administration de votre page, vous allez pouvoir réorganiser les images grâce à un glisser/déposer après les avoir sélectionnées.

Côté site, ACF ne vous renvoie que les images, c’est donc à vous de faire le nécessaire pour transformer ça en galerie, ou en diaporama animé par exemple, à l’aide de HTML, CSS, et un peu de Javascript. Et pourquoi pas en utilisant une librairie jQuery.

Je dédie un cours à ce sujet justement, pour ceux qui possèdent la version premium de cette formation.

Sa documentation : le champ galerie.

Le champ fichier

Le champ fichier permet de joindre un fichier à une page, en vue de le proposer en téléchargement par exemple.

Vous pouvez contraindre le poids du fichier, ainsi que le type mime de celui-ci. Vous pourriez obliger par exemple l’import d’un fichier PDF uniquement.

En ce qui concerne le format de sortie, je choisis généralement l’URL, par mesure de simplicité, mais vous pourriez laisser sur Données du fichier afin de récupérer toutes ses informations (poids, type…).

Essayez un var_dump() pour voir toutes les données renvoyées par ACF.

PHP
page.php

Sa documentation : le champ fichier ACF.

Le champ oEmbed

Un contenu embarqué est un lien que l’on copie depuis Youtube, Vimeo, Twitter, ou encore Facebook et qui se transforme en élément interactif.

Cela permet d’éviter de copier un code <iframe> dans son éditeur pour intégrer un contenu externe.

Dans WordPress il suffit de coller l’URL d’un service web compatible pour le voir apparaitre dans l’éditeur visuel ou le champ Tiny MCE.

Au lieu d’utiliser le champ éditeur visuel pour un embed, ACF vous propose le champ oEmbed où il suffit de coller une URL. L’aperçu apparaît ensuite en temps réel.

Le champ oEmbed d'ACF
Le champ oEmbed et son aperçu temps réel

Essayez par exemple avec l’URL d’une vidéo Youtube ou d’un Tweet. Pour afficher le contenu, il suffit d’utiliser la fonction the_field() ! Mais si vous voulez ajouter des paramètres au code embarqué, la documentation d’ACF vous donnera la marche à suivre.

Sa documentation : le champ oEmbed.


C’est donc la richesse des champs proposés par ACF qui fait sa force, mais également leur simplicité d’utilisation et une documentation très bien faite.

Pour autant on ne les a pas encore tous vu, et je vous invite donc à en découvrir davantage dans le prochain cours.

8

Questions, réponses et commentaires

  1. thony

    Le 9 septembre 2021

    Bonjour, un très grand merci pour vos cours, ça m’a beaucoup aidé !

    Je me heurte à un problème et je ne trouve pas de solution, je désespère. J’ai besoin de créer un custom post type pour upload des fichiers audio.

    Ces fichiers audio vont me servir à générer une forme d’onde pour avoir un visuel un peu comme sound cloud.

    Ce visuel doit être enregistré dans la base de données. Il est ensuite rappeler sur la page où j’affiche une playlist. De cette façon le JS n’a pas besoin de réanalyser le fichier audio pour refaire la forme d’onde. J’ai donc un affichage beaucoup plus rapide.

    Le problème c’est que j’ai besoin d’enregistrer la forme d’onde au moment de l’upload du fichier audio, et avec ACF, je ne vois pas comment faire.

    (Les plugins sur codecanyon qui font ce que je dis j’ai laissé tomber car j’ai vraiment besoins de champs de formulaire personnalisé. Je sais juste que je vais utiliser la librairie https://wavesurfer-js.org).

    Pouvez-vous me conseillez ?
    Merci d’avance.

    1. Maxime BJ

      Le 12 septembre 2021

      J’allais te conseiller un hook qui se lance après l’upload du fichier, en PHP. Mais en réalité la librairie que tu me montres est en JS, la vague est donc générée à la volée à l’affichage de la page. Ce n’est donc pas compatible avec ce que tu souhaites faire. Pour en revenir à ACF, si tu veux tenter les hooks, j’en ai trouvé 2 : https://www.advancedcustomfields.com/resources/acf-upload_prefilter/ et https://www.advancedcustomfields.com/resources/acf-validate_attachment/ qui s’exécutent lors de l’upload d’un fichier. Si tu règle le souci de génération de vague, tu auras sûrement besoin de ces hooks.

  2. Julien

    Le 14 juillet 2022

    Bonjour,

    Concernant la fonction wp_get_attachment_image_src(), comme indiqué dans le cours, ça me retourne un Array(). Sauf erreur de ma part, il faut faire appel à la variable de cette façon $url[0].

    Bien à vous.

    Un grand remerciement pour votre travail et de nous laisse apprendre librement avec vos tutoriels :).

    1. Maxime BJ

      Le 14 juillet 2022

      En effet ! Je viens de corriger le cours. C’est bien un tableau qui est renvoyé par la fonction, il faut donc bien aller chercher l’entrée 0. Merci.

  3. Ticgirl

    Le 13 janvier 2023

    Bonsoir Monsieur, merci pour votre article. Cependant j’ai une préoccupation depuis quelques jours à propos du plugins ACF. J’ai crée un groupe de champs mais j’arrive pas à récupérer le contenu dans le code. La fonction var_dump() que j’ai éssayé sur les variables renvoie null. J’ai cherché des solutions sans que ça passe. Je serai ravie si vous pouvez m’aider s’il vous plait.
    Merci !!!

    1. Maxime BJ

      Le 16 janvier 2023

      La première chose à faire est de vérifier que tu as bien assigné le groupe de champ à la bonne page (ou modèle). Quand tu édites ton contenu, est-ce que tu vois bien les champs ? As-tu bien intégré des informations dedans ?
      Ensuite, il faut que tu vérifies si tu es bien sur le bon modèle de page du template hierarchy. Peut-être que tu n’es pas dans le bon template (par exemple front-page.php au lieu de home.php)

  4. Papiercode

    Le 4 octobre 2023

    Je trouve ça marrant,
    Depuis des années, j’utilisais la méthode the_field pour les simples champs textes

    La doc acf a changé.
    https://www.advancedcustomfields.com/resources/text/

    Que vaut-il mieux faire selon toi ?

    1. Maxime BJ

      Le 4 octobre 2023

      esc_html() permet de sécuriser l’affichage de la donnée, c’est généralement une bonne pratique dans WordPress. Cela dit, Les champs ACF sont gérés depuis le site, par les administrateurs. Du coup, ce n’est pas très important ici d’ajouter cette couche de sécurité. Personnellement, je reste sur the_field() mais si tu veux être top sécurité, suis leurs recommandations. Je vais mettre à jour le cours.

Laisser un commentaire