Comment récupérer un champ ACF d’une catégorie

Sommaire

1. Introduction
2. Créer les champs ACF
3. Afficher les champs ACF sans vos catégories
4. Aller plus loin

Si vous voulez voir comment récupérer un champ ACF d’une catégorie WooCommerce, vous pouvez le voir avec ce tutoriel :)

Introduction, mais pourquoi on fait ça ?

Notre cas de figure est le suivant. Nous voulons ajouter à nos pages catégories deux champs personnalisés :

• un texte,
• une image.

Cela peut servir, par exemple, à expliquer une section d’un portfolio ou introduire une catégorie de produits.

Création des champs ACF

Après avoir installé le plugin ACF Pro, il nous faut créer un groupe de champs.
Pour cela, cliquez sur l’item ACF du menu, puis sur Ajouter.

L’item du menu pour créer un groupe de champs.

Nommez votre nouveau groupe Catégorie par exemple (ça n’aura pas d’importance par la suite), puis configurez-le.
Pour cela, dans le module Assigner ce groupe de champs, sélectionnez Termes de taxonomie est égale à category.

Champs à remplir pour créer le groupe de champs – Cliquez pour agrandir.

Cette manipulation nous permet de faire apparaître les champs que nous allons créer dans les catégories du Back Office WordPress :)
Ajoutez maintenant un champ image :

Ajout du champ ACF image – Cliquez pour agrandir.

Puis un champ texte :

Ajout du champ ACF texte – Cliquez pour agrandir.

N’oubliez pas de publier votre groupe de champs ensuite ;)
Si vous allez maintenant voir vos catégories dans le Back Office, vous devriez avoir ça :

Vos champs ACF sont maintenant disponibles dans les catégories ! – Cliquez pour agrandir.

Le code pour les afficher coté front

Une fois vos champs créés, ouvrez le fichier .php de votre thème qui gère les catégories. C’est dans celui-là que nous allons travailler.
Tout d’abord, on va créer une boucle permettant de récupérer l’ID de la catégorie et les champs associés :

<?php $terms = get_the_terms( get_the_ID(), 'category');
if( !empty($terms) ) { 
	$term = array_pop($terms);
	$custom_field = get_field('image_de_fond_de_categorie', $term );
	$custom_field_text = get_field('texte_dintroduction', $term );
?>
<!-- Ici le contenu -->
<?php } ?>

On va maintenant pourvoir y ajouter nos deux champs ACF :

<img src="<?php echo $custom_field; ?>"><!-- Afficher l'image de la catégorie -->
<?php echo $custom_field_text; ?><!-- Afficher le texte de la catégorie -->

Voilà le résultat final :

<?php $terms = get_the_terms( get_the_ID(), 'category');
if( !empty($terms) ) { 
	$term = array_pop($terms);
	$custom_field = get_field('image_de_fond_de_categorie', $term );
	$custom_field_text = get_field('texte_dintroduction', $term );
?>
	<img src="<?php echo $custom_field; ?>"><!-- Afficher l'image de la catégorie -->
	<?php echo $custom_field_text; ?><!-- Afficher le texte de la catégorie -->
<?php } ?>

Maintenant votre texte et votre image bien sur votre site :)

Aller plus loin avec l’objet image ACF

Afin de ne pas surcharger le code de ce tutoriel, j’ai volontairement utilisé la valeur url de l’image.
Une façon plus propre de l’incorporer serait d’utiliser ses données ou son ID. Si vous voulez en savoir plus, je vous invite à lire la page dédiée sur le codex d’ACF.

See ya’ space developer

Source :
https://www.advancedcustomfields.com/resources/get-values-from-a-taxonomy-term/