WordPress : Advanced Custom Field

image_pdf

ACF, qui signifie Advanced Custom Field, est une extension très populaire sur WordPress qui permet d’ajouter facilement des champs personnalisés à vos types de contenu. Il offre une interface conviviale pour créer et gérer ces champs personnalisés sans avoir à écrire de code.

Focus sur la saisie de contenus, sans risque de tout casser.

ACF permet de se consacrer uniquement à la saisie des contenus, sans avoir à se soucier du design, facilitant ainsi l’expérience utilisateur.

Le design est traité par le modèle (template) conçu par le designer.

ACF est utilisé pour étendre les fonctionnalités de WordPress et permettre aux utilisateurs de créer des sites web plus dynamiques et plus personnalisés.

Seul défaut : aucun rendu de prévisualisation.

Tout d’abord, assurez-vous d’avoir installé et activé le plugin Advanced Custom Fields sur votre site WordPress.

Vous pouvez le trouver dans le répertoire des plugins WordPress ou l’installer directement depuis votre tableau de bord WordPress (Extensions > Ajouter).

Remarque : la version gratuite propose déjà de nombreuses fonctionnalités, cependant une version pro est disponible à partir de 49 $ / an pour un site web, elle embarque davantage de types de champs et options.

Le support fourni une documentation officielle pour vous accompagner dans la gestion des champs ACF.

Une fois l’extension ACF installée / activée, rendez-vous dans l’onglet Champs personnalisés dans le menu de votre tableau de bord WordPress. Cliquez sur Ajouter pour créer un nouveau groupe de champs.

Champs personnalisés > Ajouter

Vous pouvez définir une description du groupe de champs depuis l’onglet Réglages > Réglages du groupe, ceci peut être utilisé pour améliorer la compréhension de l’utilité d’un groupe de champs.

Groupe de champs
Rendu sur l’édition d’un projet (CPT portfolio)

Les différents types de champs ACF

  • texte : plusieurs lignes de texte — limitation possible du nombre de caractères…
  • nombre : valeur minimum / maximum
  • email : vérification de la validité de l’adresse e-mail
  • mot de passe : masque la saisie
  • fichier / image : téléverser ou charger depuis la bibliothèque de médias — retourne l’objet, l’URL ou l’ID
  • sélection : affiche un menu déroulante — supporte la multisélection
  • checkbox : sélection de multiples éléments (case à cocher)
  • bouton radio : sélection d’un élément unique
  • vrai / faux
  • sélecteur de date : sélection depuis un calendrier, avec retour au format souhaité
  • sélecteur de couleur : sélection depuis un sélecteur de couleur, avec retour en format hexadécimal

Des éléments à configurer pour chaque champ :

  • titre du champ : nom qui va apparaître dans le menu ACF
  • nom du champ : nom utilisé dans les templates
  • type de champ
  • requis
  • valeur par défaut
  • texte d’exemple : texte écrit à l’intérieur du champ pour montrer ce qu’il faut saisir
  • préfixe / suffixe : utilisé pour donner des indications au rédacteur
  • limite de caractères
  • valeur minimale / maximale

Remarque :Nom du champ” est généré automatiquement à partir de “Titre du champ” (il s’agit de l’identifiant unique ou slug du champ qui sera utilisé pour afficher sa valeur).

Logique conditionnelle d’affichage

On assigne le groupe de champs…

  • type de publication : article, page, fiche produit ou type de publication personnalisé
  • taxonomie : catégorie, étiquette ou toute autre taxonomie que vous aurez créée
  • format d’article : par défaut, lien, vidéo, citation, audio… (tout dépend de votre thème)
  • modèle de publication : modèles de page, d’article ou autres
  • utilisateur
  • rôle utilisateur
  • formulaire
  • champ de formulaire

Remarque : vous pouvez très bien créer plusieurs groupes de champs et les assigner à un même type de publication, de taxonomie…

Attention ! N’oubliez pas de cliquer sur Publier ou Mettre à jour afin de rendre public votre groupe de champs !

Tous vos groupes de champs sont listés depuis le menu Champs personnalisés > Groupes de champs.

Affichage des valeurs de champs ACF

Fonctions the_field() et get_field()

<!-- afficher le champ texte "project_management" -->
<p>Chef de projet : <?php the_field('project_management'); ?></p>
<?php
// récupérer la valeur du champ URL "lien_vers_le_projet"
$lien_vers_le_projet = get_field('lien_vers_le_projet');
?>

<!-- afficher le champ URL "lien_vers_le_projet" -->
<a href="<?php echo $lien_vers_le_projet; ?>">En savoir plus</a>

Remarque : la fonction the_field() utilise la fonction native get_post_meta() précédemment utilisée pour les champs personnalisés.

Fonctions get_field() : champ ACF image

<!-- afficher l'image "project_thumbnail" -->
<?php $image_projet = get_field('project_thumbnail'); ?>
<?php if ($image_projet) : ?>
    <img src="<?php echo esc_url($image_projet['url']); ?>" alt="<?php echo esc_attr($image_projet['alt']); ?>">
<?php endif; ?>

Remarque : ACF ne retourne ni la balise, ni l’URL de l’image, mais un tableau.

Ceci correspond aux réglages effectués au niveau du champ ACF dans la section “Format de retour“.

Remarque : il aurait également été possible de demander le retour de l’URL de l’image ou de l’ID de l’image.

Dans le cas de la récupération de l’ID de l’image, il vous faudra utiliser la fonction native wp_get_attachment_image() pour générer le code HTML de l’image.

<!-- afficher l'image "project_thumbnail" -->
<?php

$image_projet = get_field('project_thumbnail');

if ($image_projet) {
    echo wp_get_attachment_image($image_projet, 'full');
}
?>

La fonction wp_get_attachment_image() prend l’ID de l’image en premier argument, et 'full' en deuxième argument pour spécifier la taille de l’image à afficher.

'full' signifie que l’image sera affichée dans sa taille originale.

Vous pouvez pareillement spécifier d’autres tailles prédéfinies, telles que 'thumbnail', 'medium', ou 'large'.

Fonctions get_field() : champ ACF sélection

Champ ACF sélection

Vous pouvez utiliser la fonction implode() pour afficher les valeurs sélectionnées d’un champ ACF de type “select” si ce champ permet la sélection de plusieurs options.

La fonction implode() permet de concaténer les valeurs sélectionnées en une chaîne de caractères.

Supposons que vous avez créé un groupe de champs nommé “product” avec un champ “select” nommé “product_colors” qui permet à l’utilisateur de sélectionner plusieurs couleurs pour un produit.

Voici comment vous pouvez afficher ces couleurs sélectionnées à l’aide de implode() :

<!-- afficher les catégories sélectionnées -->
<?php $couleurs_produit = get_field('product_colors'); ?>
<?php if ($couleurs_produit) : ?>
    <p>Couleurs : <?php echo implode(', ', $couleurs_produit); ?></p>
<?php endif; ?>

implode(', ', $couleurs_produit) prend un tableau contenant les valeurs sélectionnées dans le champ “select” de type “product_colors” et le concatène en une chaîne de caractères en utilisant la virgule suivie d’un espace (‘, ‘) comme séparateur entre les différentes valeurs sélectionnées.

Avec cette approche, si par exemple l’utilisateur a sélectionné les couleurs “Noir”, “Rouge” et “Vert”, cela s’affichera sous la forme :

Couleurs : Noire, Rouge, Vert

Champ ACF et requête personnalisée

Trier les contenus selon un champ ACF

Pour traiter une requête personnalisée WP Query triée par un champ ACF (Advanced Custom Fields), vous devrez spécifier le nom du champ personnalisé (meta_key) que vous souhaitez utiliser pour le tri, ainsi que la manière dont vous souhaitez trier les résultats (ascendant ou descendant).

Voici comment vous pouvez le faire étape par étape :

  1. Instanciation de WP Query : commencez par instancier la classe WP Query en utilisant le constructeur et définissez les arguments de votre requête personnalisée, y compris les critères spécifiques de votre requête.
  2. Définir les arguments de la requête : en plus des critères de votre requête personnalisée, spécifiez le nom du champ ACF que vous souhaitez utiliser pour le tri en utilisant le paramètre ‘meta_key’. Vous pouvez également définir le paramètre ‘orderby’ pour indiquer comment vous souhaitez trier les résultats, soit en ordre ascendant (ASC) soit en ordre descendant (DESC).
  3. Exécution de la requête : exécutez la requête.
  4. Boucle sur les résultats : parcourez les résultats avec une boucle pour afficher les contenus triés en fonction du champ ACF spécifié.

Voici un exemple de requête personnalisée triée par un champ ACF appelé “mon_champ_acf” en ordre descendant :

$args = array(
    'post_type' => 'votre_type_de_contenu',
    'post_status' => 'publish',
    'meta_key' => 'mon_champ_acf', // remplacez par le nom de votre champ ACF
    'orderby' => 'meta_value', // trie en fonction de la valeur du champ ACF
    'order' => 'DESC', // trie en ordre descendant
    'posts_per_page' => 10 // nombre de résultats à afficher
);

$query = new WP_Query($args);

if ($query->have_posts()) {
    while ($query->have_posts()) {
        $query->the_post();
        // afficher le contenu de l'article ici (par exemple, le titre et le contenu).
    }
    wp_reset_postdata();
} else {
    // aucun article trouvé.
}

Filtrer les contenus en fonction de champs ACF

Pour filtrer les articles en fonction de valeurs contenues dans un champ ACF (Advanced Custom Fields) avec une requête personnalisée WP Query, vous pouvez utiliser le paramètre ‘meta_query’.

‘meta_query’ vous permet de spécifier les critères de recherche basés sur les champs personnalisés (comme ceux créés avec ACF) et leurs valeurs associées.

Exemple : récupérer les articles de la catégorie ‘ma-categorie’ avec une valeur spécifique dans un champ ACF nommé ‘mon_champ_acf’ (ex. ‘prix’) inférieure à 20.

<?php 

$args = array(
    'post_type' => 'post',
    'category' => 'ma-categorie',
    'meta_key' => 'mon_champ_acf', // remplacez par le nom de votre champ ACF
    'meta_value_num' => 20, // ou meta_value pour tester un texte
    'meta_compare' => '<' // < > != >= <=
);

$query = new WP_Query( $args );

Voici les valeurs possibles pour ‘meta_compare’ :

  • ‘=’ : égal à la valeur spécifiée.
  • ‘!=’ : différent de la valeur spécifiée.
  • ‘>’ : supérieur à la valeur spécifiée (pour les valeurs numériques ou les dates).
  • ‘>=’ : supérieur ou égal à la valeur spécifiée (pour les valeurs numériques ou les dates).
  • ‘<‘ : inférieur à la valeur spécifiée (pour les valeurs numériques ou les dates).
  • ‘<=’ : inférieur ou égal à la valeur spécifiée (pour les valeurs numériques ou les dates).

Exemple : récupérer les articles avec une valeur spécifique dans un champ ACF nommé ‘mon_champ_acf’.

$args = array(
    'post_type'      => 'post', // remplacez par le type de contenu souhaité
    'post_status'    => 'publish',
    'posts_per_page' => 10,
    'meta_query'     => array(
        array(
            'key'     => 'mon_champ_acf', // remplacez par le nom de votre champ ACF
            'value'   => 'valeur_specifique', // remplacez par la valeur recherchée
            'compare' => '=', // opérateur de comparaison (dans ce cas, égalité)
        ),
    ),
);

$query = new WP_Query($args);

Remarque : vous pouvez utiliser des opérateurs de comparaison tels que ‘LIKE’, ‘NOT LIKE’, ‘IN’, ‘NOT IN’, ‘BETWEEN’, etc.

Combiner les ‘meta_query’ dans une relation logique (AND ou OR)

Pour combiner plusieurs ‘meta_query’ avec une relation logique (AND ou OR) dans une WP Query, vous pouvez utiliser le paramètre ‘relation’ dans l’argument ‘meta_query’.

‘relation’ vous permet de spécifier comment les différentes clauses ‘meta_query’ doivent être combinées.

Exemple :

$args = array(
    'post_type'   => 'post', // remplacez par le type de contenu souhaité
    'post_status' => 'publish',
    'posts_per_page' => 10,
    'meta_query'  => array(
        'relation' => 'AND',
        array(
            'key'     => 'champ_acf_1',
            'value'   => 'valeur_1',
            'compare' => '='
        ),
        array(
            'key'     => 'champ_acf_2',
            'value'   => 'valeur_2',
            'compare' => '='
        )
    )
);

$query = new WP_Query($args);

Exporter ses groupes de champs

Champs personnalisés > Outils – Exporter les groupes de champs

Export possible des groupes de champs afin de pouvoir les importer dans un autre site.

Cet export n’import n’inclut pas les valeurs !

Les groupes e champs peuvent ensuite être importés depuis Champs personnalisés > Outils – Importer les groupes de champs.

ACF PRO

ACF Pro, la version payante du plugin Advanced Custom Fields (ACF), offre plusieurs avantages supplémentaires par rapport à la version gratuite.

FonctionnalitésDescription
RépéteurRépétition de l’affichage de champs (pour créer des listes d’éléments répétitifs)
Galerie Galerie photos (pour créer des galeries d’images)
RelationPour créer des liens entre différents types de contenu
GroupePour organiser les champs en groupes
Pages d’options / réglagesPages d’administration pour modification des champs ACF (globales)
SupportSupport technique prioritaire de la part de l’équipe de développement.
Accès aux dernières mises à jour.

Remarque : la version ACF Pro nécessite la saisie d’une clé de licence, à renseigner dans le menu ACF > Mise à jour, elle vous donnera accès aux prochaines versions.

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.