Formation « Des champs administrables avec ACF »

Assigner des champs aux taxonomies, utilisateurs, menus, widgets…

Lecture : 7 minutes • 0

Les champs ACF ne sont pas seulement limités aux publications comme les pages et les articles. Il est également possible d’assigner des groupes à des taxonomies, des utilisateurs, des médias ou encore des widgets.

ACF peut s’insérer dans les moindres recoins de WordPress. On va voir dans ce cours qu’on est loin d’être limités aux simples publications. D’ailleurs, on a vu précédemment qu’on pouvait tout à fait assigner un groupe de champs à une page d’options.

Eh bien on va voir qu’on peut ajouter des groupes à de nombreux endroits comme l’écran des de gestion des taxonomies, le profil des utilisateurs, la bibliothèque de médias, les menus et même les widgets.

Assigner un groupe de champs à une taxonomie

Pour commencer, on va voir comment ajouter un groupe de champs ACF à l’interface d’édition des taxonomies.

Pour cela on va créer un nouveau groupe qui nous permettra de définir une couleur et un pictogramme pour chacune de nos catégories du site. C’est quelque chose que je fais fréquemment dans mes blogs d’ailleurs.

La configuration d'un groupe de champs pour une taxonomie
Choisissez Taxonomie dans la rubrique « Formulaires »

Dans les conditions d’assignation du champ, sélectionnez Taxonomie dans la sous-rubrique « Formulaires ». Ne vous trompez pas car il y en a deux. Voici leur différence fondamentale :

  • Articles > Taxonomie permet d’afficher un groupe dans un article lorsqu’une catégorie en particulier est sélectionnée ;
  • Alors que Formulaires > Taxonomie affiche les champs dans l’interface de gestion de la taxonomie en question.

Si vous avez choisi le bon, vos champs apparaitront lorsque vous ajoutez ou modifiez une catégorie :

L'interface d'édition d'une taxonomie (ici la catégorie), avec les champs ACF
Les champs apparaissent bien dans le formulaire d’édition de la taxonomie

Maintenant, il ne nous reste plus qu’à afficher la donnée dans notre template. Comme pour les options ACF, il faut utiliser le second paramètre de la fonction the_field() :

PHP
category.php

Ce code s’utilisera surtout dans les pages category.php, tag.php ou taxonomy.php.

Vous pouvez également retrouver ces valeurs lorsque vous faites un menu affichant vos taxonomies sur le blog :

PHP
home.php

Pour plus d’informations, consultez la documentation ACF à ce sujet.

Assigner un groupe de champs aux médias

De la même manière, on va pouvoir afficher des champs ACF dans la bibliothèque de médias de WordPress.

On pourrait imaginer d’ajouter un champ « Copyright » pour indiquer qui est l’auteur du cliché.

Assigner un groupe de champs à un média
Vous pouvez même définir les formats de fichiers concernés

En assignant le groupe de champs, je vais même pouvoir indiquer sur quels formats de médias je veux afficher ce champ. Je peux choisir un format en particulier comme le JPG, tous les formats images d’un coup, vidéo, fichiers…

Une fois dans la bibliothèque, je vois bien mon champ apparaitre :

La bibliothèque de médias, affichant un groupe de champs supplémentaire
Le groupe de champ apparait en bas à droite

Et pour récupérer cette information, voici le code à utiliser :

PHP
page.php

Là encore, la documentation ACF vous donnera quelques informations utiles.

Assigner un groupe de champs aux widgets

Si vous utilisez encore les widgets, vous pouvez les améliorer en ajoutant des champs ACF à l’intérieur !

Pour cela créez un groupe de champs et assignez-le au widget de votre choix. Je choisis simplement le widget Texte :

Assigner un groupe de champs à un widget WordPress
Assignez le groupe de champs au widget Texte

Vos champs devraient apparaitre dans votre widget. Allez dans Apparence > Widgets et ajoutez un widget Texte.

L'interface de gestion des widgets
Le champ ACF apparait dans mon widget

Le but maintenant va être de Hooker le widget en question pour modifier son apparence lors de son affichage :

PHP
functions.php

Référez-vous à la documentation ACF pour plus d’exemples.

Assigner un groupe de champs aux menus

Il y a deux manières d’ajouter des champs ACF aux menus, selon votre besoin :

  • Soit assigner des champs au menu de manière générale ;
  • Soit assigner des champs à chaque élément du menu.

La première solution permet par exemple de définir une couleur de fond pour votre menu, ou éventuellement sa disposition (horizontal, vertical…) en jouant avec des classes CSS.

La seconde solution va permettre de personnaliser chaque élément du menu, et vous pourrez par exemple permettre de définir des icônes en plus (ou à la place) des intitulés.

Champs pour le menu en général

On va imaginer vouloir permettre de modifier la couleur de notre menu. Pour cela on crée un groupe de champs avec un simple champ couleur, que l’on va assigner à tous les menus.

Assigner un groupe de champs à un menu WordPress
Assignez le groupe à Menu et Tous

Petite astuce : choisissez le réglage Sans contour pour ne pas afficher le titre du groupe de champ et ainsi éviter une démarcation avec la zone du dessus (Réglages du menu). Rendez-vous dans Apparence > Menus pour voir le résultat :

Le groupe de champs apparait dans l'interface de gestion des menus.
Notre champ couleur apparait dans les réglages du menu

Maintenant, on va jouer avec un hook dans functions.php pour modifier le HTML généré et incorporer notre couleur :

PHP
functions.php

Une documentation très complète est disponible pour les menus et ACF.

Information

En réalité, on aurait très bien pu passer par une page d’options. Ça aurait été beaucoup plus simple puisqu’il aurait suffi d’assigner la couleur de fond sur le bloc parent au menu.

Champs pour les éléments d’un menu

Cette fois, on va agir au niveau des éléments de notre menu. Ce sera beaucoup plus utile. On ne va pas recréer un groupe de champs mais simplement reprendre le même que pour les taxonomies, qui contient un champ couleur et un champ icône.

Un groupe de champs assigné à la fois aux catégories, et aux éléments de menus
On reprend le groupe de champs des taxonomies

Il nous suffit donc d’ajouter une condition grâce au bouton Ajouter une règle, et choisir cette fois Élément de menu est égal à Tous.

L'interface de gestion des menus de WordPress
Les champs apparaissent dans les éléments de menus

Ouvrez un élément de votre menu en cliquant dessus, et les champs devraient apparaître juste au-dessous du Titre de la navigation. Il ne nous reste plus qu’à ajouter le code correspondant, toujours via un hook :

PHP
functions.php

Selon ce que vous souhaitez obtenir, il faudra peut-être effectuer quelques manipulations supplémentaires. Pensez à utiliser var_dump() sur la variable $item pour découvrir tout ce qu’elle a à vous offrir.

Et comme toujours, il y a une documentation ACF dédiée à ce sujet.

Conseil

Avec cette technique, vous allez donc pouvoir donner la possibilité d’ajouter des icônes à vos menus, ce qui est souvent demandé par les clients, mais pas possible nativement.

Assigner un groupe de champs aux commentaires

On peut également assigner un groupe de champs aux commentaires. Du coup, le formulaire va finir dans la partie publique du site. D’ailleurs on verra dans quelques cours comment afficher un formulaire ACF directement en front.

Imaginons qu’on veuille afficher une case à cocher pour demander à l’internaute d’accepter la politique de confidentialité. Je crée un groupe de champs pour cela, avec un bouton vrai/faux que je rends obligatoire, et j’assigne le champ aux Commentaires.

Assigner un groupe de champs aux commentaires.
Assignez le groupe à Commentaire

En affichant un article, vous verrez votre bouton apparaître juste en-dessous de la zone de texte Commentaire.

Le champ J’accepte la politique de confidentialité s’affiche

Afficher le champ dans l’administration WordPress

Maintenant, si on veut afficher cette information dans la liste des commentaires dans l’admin, il va falloir utiliser le hook suivant :

PHP
functions.php

Voici ce que ça donne dans votre interface de gestion des commentaires de WordPress :

L'interface de gestion des commentaires de WordPress.
La mention RGPD accepté apparait sous l’auteur

Afficher les champs en back et en front

Vous pourriez également imaginer un champ image, afin que vos internautes puissent joindre une capture d’écran à leur commentaire, ce qui est pratique si vous faites du support.

Dans ce cas utilisez plutôt le hook comment_text pour insérer l’image à la suite du contenu du commentaire :

PHP
functions.php

Ce hook va s’exécuter autant côté back, que front. Ajoutez un test avec is_admin() si vous voulez limiter son affichage au backend.

Pour plus d’informations, consultez la documentation.

Assigner un groupe de champs aux utilisateurs

Et pour terminer, on va voir comment gérer nos groupes de champs en fonction des utilisateurs. Et il existe plusieurs conditions relatives tantôt aux rôles, et tantôt directement aux utilisateurs. D’ailleurs leurs effets sont très différents.

Champs dans le profil utilisateur

Vous pouvez assigner un groupe de champ aux utilisateurs, afin d’ajouter des informations à leur profil. Dans cet exemple on va ajouter un champ Twitter et un champ Facebook.

Il faudra ensuite assigner le groupe de champs à Formulaire utilisateur et Ajouter / Modifier.

La metabox pour assigner le groupe de champs ACF
Sélectionnez Ajouter / Modifier

Le champ apparaitra autant lors de l’ajout d’un utilisateur, que lors de sa modification. au niveau des autres choix on a :

  • Inscription, qui permet d’ajouter les champs lorsque l’utilisateur s’inscrit par lui-même, si votre site le permet ;
  • Ou Ajouter, qui permet d’afficher les champs seulement à la création du compte, et ne seront donc pas visibles dans le profil par l’utilisateur lui-même.
L'écran de réglage du profil utilisateur dans WordPress avec des champs ACF
Les champs apparaissent dans le profil utilisateur

Au niveau du code PHP, c’est assez simple et ça fonctionne partout :

PHP
single.php

Pour cibler l’utilisateur, il faut indiquer user_ suivi de son identifiant. Celui-ci est récupérable de plusieurs manières, selon ce que vous voulez faire :

  • Si vous voulez afficher le profil de l’utilisateur actuellement connecté, utilisez get_current_user_id();
  • Pour afficher le profil de l’auteur d’un article, utilisez $post->post_author.

Pour plus d’informations, il existe une documentation ACF sur ce sujet.

Vous pourriez également limiter l’affichage de ces champs à un rôle en particulier, par exemple les auteurs.

Pour cela il faut ajouter une règle dans le groupe de champs :

La condition rôle utilisateur permet de définir à qui s'adressent nos champs.
Seuls les abonnés verront les champs

Après tout ces champs ne sont pas nécessaires pour l’administrateur.

Afficher un groupe en fonction du rôle utilisateur

Si vous voulez maintenant limiter l’accès à certains groupes de champs à des rôles bien précis, c’est tout à fait possible grâce à la condition Rôle utilisateur actuel :

Assigner un groupe de champ à un rôle en particulier.
Choisissez le rôle qui aura accès à ces champs

Si vous choisissez Administrator, le groupe n’apparaitra pas aux éditeurs ou autres rôles. Pratique pour limiter la responsabilité des données.

Utilisez le bouton Ajouter une règle pour ajouter un autre rôle. Il faudra par contre réécrire tout le bloc de conditions précédent.

Aparté : La différence entre Rôle utilisateur et Rôle utilisateur actuel

Le rôle utilisateur n’est utile que dans la page de profil utilisateur. Rôle utilisateur actuel a un tout autre but : vérifier que l’utilisateur connecté a bien le droit d’afficher et modifier les valeurs d’un groupe de champs dans les différentes pages de l’administration.


ACF n’est donc pas limité aux seules publications du site, il peut s’inviter partout dans votre interface d’administration ! Cela peut-être utile dans bien des cas lorsque les projets deviennent un peu complexe.

En tout cas ACF ne reculera devant aucun obstacle, et vous non plus ! Il reste un cas de figure que l’on n’a pas encore vu, et il est tellement intéressant qu’il mérite son propre cours : assigner un groupe de champs à un bloc Gutenberg.

0

Questions, réponses et commentaires

Laisser un commentaire