Advanced Custom Fields le plugin WordPress indispensable !

Créé par l’Australien Elliot Condon, Advanced Custom Fields (ACF) est devenu un incontournable pour les développeurs et les propriétaires de sites.

Ce plugin freemium permet d’étendre les fonctionnalités de WordPress en matière de création de champs personnalisés. Ainsi, avec ACF, vous pourrez créer facilement des champs personnalisés, créer des pages options, définir des règles d’affichage conditionnelles et d’intégrer des données personnalisées dans les articles, les pages ou encore vos custom types.

En allant plus loin, vous pourrez même concevoir vos propres thèmes, voir vos propres blocs Gutenberg, mais nous verrons cette fonctionnalité dans un prochain tutoriel.

Présentation d’Advanced Custom Fields

Les champs personnalisés d’ACF

Voici la liste des champs natifs gérés par ACF. Ceux marqués d’un astérisque font partie de la version premium. Pour plus d’informations, je vous ai ajouté le lien vers la documentation du plugin pour chaque champ, afin que vous compreniez comment les utiliser.

Les champs basiques

Les champs de contenus

Les champs de choix

Les champs relationnels

Les champs avancés

Les champs de mise en page

Advanced Custom Fields gratuit VS premium

Le comparatif

La version premium d’ACF offre quelques fonctionnalités supplémentaires :

• Les Répéteurs (repeater) : ils permettent de créer un groupe de champs pouvant être répétés à l’infini. Par exemple, vous pouvez créer un groupe de champs « Plats » avec des sous-champs tels que « Nom du plat », « Prix » et « Ingrédients ». Vous pouvez ensuite répéter ce groupe pour créer votre carte.
• Le clone : vous pouvez cloner des champs et leurs valeurs d’un autre groupe de champs.
• Le contenu flexible : il permet de créer un système de constructeur de pages côté backend en utilisant un système de glisser-déposer. Il est utile pour la création de thèmes et permet de limiter les actions de l’utilisateur dans le backend pour éviter les erreurs.
• La galerie : possibilité de créer une galerie photo à l’intérieur des groupes ACF.
• Blocs : vous pouvez créer vos propres blocs Gutenberg. J’utilise cette fonctionnalité pour construire mes thèmes entièrement à l’aide des blocs Gutenberg pour mes clients.
• Les pages options : elles sont des pages supplémentaires dans l’administration et constituent un menu supplémentaire. Elles sont utiles pour regrouper des paramètres répétitifs tels que les mentions légales ou les coordonnées de contact. Les modifications effectuées sur ces pages seront appliquées à tous les emplacements où ces données sont utilisées. Null besoin de changer les données sur chaque pageoù elles sont affichées.

La version gratuite d’ACF convient généralement à la plupart des cas. Cependant, les fonctionnalités supplémentaires de la version premium, comme les répéteurs et les blocs, sont essentielles dans l’utilisation que j’en fais.

Le prix

Si vous souhaitez obtenir la licence d’ACF, sachez qu’elle coûte entre 49 $ et 249 $ par an.

Si, comme moi, vous avez acheté une licence avant la mise en place des formules de mensualisation, vous conservez une licence à vie. Cependant, veuillez noter que les mises à jour automatiques ne sont plus disponibles. Vous devrez donc télécharger à nouveau le plugin depuis le site de temps en temps pour bénéficier des dernières mises à jour.

Les limites pour les utilisateurs expérimentés

ACF a mis en place certaines limites pour l’utilisation de son plugin dans des thèmes ou des plugins :

Les types de publications où d’ACF peut intervenir

Vous allez pouvoir paramétrer ACF pour qu’il vous affiche les champs ci-dessus dans certains types de publication côté backend.

Les publications / articles

Les pages

Compte

Formulaires

Comment créer des champs dans Advanced Custom Fields ?

Présentation de l’interface

L’interface utilisateur d’ACF est ergonomique et intuitive. Voici les étapes pour créer des champs personnalisés :

1. Donnez un nom à votre groupe de champs pour les regrouper de manière logique.
2. Ajoutez différents types de champs en fonction de vos besoins spécifiques.
3. Paramétrez les conditions d’affichage en backend pour indiquer où afficher votre groupe de champs dans votre page.

Dans cet onglet des réglages, on va indiquer où faire apparaitre notre groupe de champ dans notre page coté backend (sous le contenu ou dans la colonne de droite).

De plus, ACF offre également la possibilité de masquer certains éléments de l’interface d’administration, tels que les commentaires ou les permaliens, pour simplifier l’expérience de gestion du contenu.

Vous pouvez également désactiver les champs, ajouter une description et intégrer les données dans l’API de WordPress pour les manipuler à distance.

Ajouter des champs

Chaque champ peut être entièrement personnalisé avec ses propres paramètres :

1. Choisissez le type de champ.
2. Définissez son nom.
3. Indiquez son identifiant (il nous servira pour afficher les champs).
4. Indiquez une valeur par défaut si nécessaire.
5. Configurez les options de validation, telles que le rendu du champ obligatoire.

Dans l’onglet de présentation, vous pouvez utiliser les paramètres d’affichage pour contrôler l’apparence du champ dans l’interface d’administration. Cela peut être particulièrement utile si vous créez un site pour un client et souhaitez offrir une expérience utilisateur optimisée.

Une fonctionnalité puissante d’ACF est la logique conditionnelle, qui permet d’afficher ou de masquer des champs en fonction des valeurs d’autres champs du même groupe. Cela offre une flexibilité accrue dans la collecte et la gestion des données, permettant une expérience d’administration plus fluide et adaptée aux besoins spécifiques de votre site.

Affichage des champs Advanced Custom Fields dans les pages grâce aux builders

Les constructeurs de pages vous permettent d’intégrer des champs personnalisés sans avoir besoin de coder. Voici comment ajouter vos valeurs dans les constructeurs les plus populaires :

Avec Elementor

Les champs simples

• Choisissez le widget Elementor que vous souhaitez utiliser
• Cliquez sur « Dynamique »
• Sélectionnez ACF Field et choisissez le champ spécifique à afficher dans le menu déroulant « Field Name ».

Afficher les champs issus de repeater dans Elementor

En préparant ce tutoriel, j’ai effectué pas mal de recherches (je n’utilise plus Elementor depuis un moment) et il s’est avéré, qu’Elementor ne dispose pas cette fonction de manière native. Vous devez donc passer par des plugins additionnels tels que :

ACF Repeater de chez Dynamic.ooo (59$ à 499$/ans)

AnyWhere Elementor Pro (49$ à 299$/ans)

Elementor Repeater for ACF de chez wycan (19$ à 139$ / ans)

L’autre solution gratuite qui va s’offrir à vous, c’est d’utiliser un shortcode et du CSS, nous verrons cela plus bas.

Affichage des champs Advanced Custom Fields dans les pages à l’aide du thème

Les principes de base

L’utilisation d’ACF dans le code n’est pas compliquée, à condition d’avoir une certaine connaissance en manipulation de code et de boucles dans les thèmes WordPress.

Récupérer un champ issu de la même page

Pour récupérer une valeur de champ et l’afficher, utilisez l’identifiant du champ que vous avez défini précédemment. Vous pouvez ensuite afficher la valeur en utilisant un simple
« echo ».

$mavariable = get_field('mon_champ');
echo $mavariable

Issu d’une autre page

Par défaut, ACF se base sur les champs de la page en cours. Si vous souhaitez récupérer un champ d’une autre page ou d’une page option, vous devrez spécifier où ACF doit aller chercher les données.

$postiD = "23";
$mavariable = get_field('mon_champ', $postiD);
echo $mavariable

Pour une donnée présente dans une page option :

$mavariable = get_field('mon_champ', 'options');
echo $mavariable

Récupérer un sous champ

$maSousVariable = get_sub_field('mon_champ');
echo $maSousVariable

Les sous-champs nécessitent l’utilisation de boucles. Vous rencontrerez ces cas dans les répéteurs, les contenus flexibles ou les groupes. Les exemples de boucles ci-dessous vous aideront à comprendre comment afficher les valeurs des sous-champs.

Les boucles dans Advanced Custom Fields

Les boucles d’ACF suivent les principes de base des boucles WordPress et de PHP.

Elles sont utiles et indispensables si vous souhaitez récupérer une ou plusieurs valeurs d’un champ ACF.

La boucle simple en foreach

Utilisez une boucle foreach pour afficher des champs multiples tels que les objets de publication, les listes déroulantes, les cases à cocher, etc. En bref, tous les champs où vous avez plusieurs valeurs qui peuvent être retournées.

<?php
$ingredients = get_field('ingredients');
if( $ingredients ): ?>
<ul>
    <?php foreach( $ingredients as $ingredient ): ?>
        <li><?php echo $ingredient; ?></li>
    <?php endforeach; ?>
</ul>
<?php endif; ?>

Explications

• Je récupère mon champ ACF « ingredients » et je le place dans la variable $ingredients.
• Je m’assure que ce champ n’est pas vide avant de continuer le code avec un if($ingredients).
• Dans cet élément, je peux avoir plusieurs cases cochées donc plusieurs ingrédients. Je vais ainsi traiter les données une par une avec un foreach en les plaçant dans la variable $ingredient.
• J’affiche chaque donnée dans un élément de liste.

Afficher les posts qui ont un champ avec une valeur spécifique ACF

Ici, je vais demander à WordPress de me montrer tous les articles qui ont l’ingrédient
« pomme » coché dans le champ « ingredients ».

$args = array(
    'post_type' => 'post', // Type de contenu (article)
    'posts_per_page' => -1, // Nombre d'articles à afficher (-1 pour tous)
    'meta_query' => array(
        array(
            'key'     => 'ingredients',
            'value'   => 'pomme',
            'compare' => 'LIKE',
        ),
    ),
);

$posts = new WP_Query($args);

if ($posts->have_posts()) {
    while ($posts->have_posts()) {
        $posts->the_post();
       the_title('<h2>', '</h2>');       
    }
    wp_reset_postdata();
} else {
    // Aucun article trouvé
    echo 'Aucun article trouvé.';
}

Explications :

• On donne les arguments pour filtrer nos articles dans la boucle.
• On passe ces arguments dans la boucle avec la nouvelle instance de WP_Query.
• On vérifie que notre boucle a bien du contenu.
• On demande d’afficher le titre de chaque article qui correspond à la requête.

Les boucles en while : les répéteurs et groupes

ACF traite ses informations sous forme de tableau. Chaque tableau contient des lignes avec des valeurs.

Nous allons donc parcourir ces lignes (« rows ») et rechercher les valeurs à afficher.

<?php if( have_rows('ingredients') ): ?>
<ul id="recette">
    <?php while( have_rows('ingredients') ): the_row(); 

        // Get sub field values.
        $nomIngredient = get_sub_field('nom');
        $quantite = get_sub_field('quantite');

        ?>
        
            <li><?php echo $nomIngredient; ?> - <?php echo $quantite; ?></li>
             
    <?php endwhile; ?>
 </ul>  
<?php endif; ?>

Explications

• Nous vérifions tout d’abord si les champs ne sont pas vides afin d’éviter une erreur.
• Nous commençons la boucle avec un « while », que l’on peut traduire par « tant que nous avons une ligne, faisons ceci ».
• Nous récupérons tous les sous-champs, ici le nom de mon ingrédient et la quantité désirée.
• Tant qu’il y a une ligne, nous affichons nos valeurs dans un élément de liste.

Le résultat sera le suivant :

• Pomme – 40g
• Poires – 30 g

Les nested groups

Il peut arriver que parfois, vous ayez besoin de créer des répéteurs ou des groupes imbriqués.

Je crée un répéteur « Équipe » qui me permet d’ajouter plusieurs membres et d’afficher leur nom et prénom.

<?php if( have_rows('equipe') ): ?>

    <?php while ( have_rows('equipe') ) : the_row(); ?>

        <?php if( have_rows('membre') ): ?>
            <ul>
                <?php while( have_rows('membre') ): the_row(); ?>
                    <li><?php the_sub_field('nom'); ?> - <?php the_sub_field('prenom'); ?></li>
                <?php endwhile; ?>
            </ul>
        <?php endif; ?>

    <?php endwhile; ?>

<?php endif; ?>

Les groupes sans boucles

Les repeater sont des groupes de champs avancés qui se répètent.
Cependant, nul besoin de créer une boucle pour parcourir les lignes d’un simple groupe de champs.

Prenons l’exemple d’un groupe dans lequel nous avons placé les éléments nécessaires pour créer un bouton.

Nous aurons donc : le texte du bouton, son lien, une classe CSS.

Notre champ ressemblera à ceci :

Pour afficher nos données, nous utiliserons la syntaxe des tableaux :

<?php
$monBouton = get_field('bouton');
if( $monBouton ): 
$lien = $monBouton['lien'];
$class = $monBouton['class'];
$intitule = $monBouton['text'];
?>
    <div class="<?php echo $class; ?>">
        <a href="<?php echo $lien; ?>"><?php echo $intitule; ?></a>
     </div>
<?php endif; ?>

Explications :

• J’appelle ma valeur dans une variable.
• Nous vérifions si les champs ne sont pas vides afin d’éviter une erreur.
• Nous stockons chaque élément de mon tableau dans une variable.
• Nous affichons nos variables dans notre code.

Avec des shortcode

Je vous ai expliqué le rôle et comment créer des shortcodes dans un précédent article.

ACF embarque de base des shortcodes, ils vous seront utiles pour les intégrer à des pages ou à l’intérieur d’articles.

Pour des champs simples

Ce shortcode retourne la fonction « get_field » ou « the_field » que nous avons vue précédemment.

[ acf field="nom_du_champ" post_id="123" ]

Dans le cas d’une page option, nous utiliserons ce modèle :

[ acf field="nom_du_champ" post_id="options" ]

Pour des groupes ou repeaters

Si nous souhaitons afficher le premier élément (la première ligne) de notre répéteur
« ingredients », nous indiquerons ceci :

[ acf field="ingredients_0_nom" ]

Créer ses propres shortcodes

Si vous souhaitez afficher des répéteurs sans passer par un plugin annexe ou afficher votre répéteur avec une mise en forme précise, nous pouvons créer un shortcode dans functions.php.

function recette_shortcode_inumedia($atts) {
    ob_start();
    if (have_rows('ingredients')) :
        ?>
        <ul id="recette">
            <?php while (have_rows('ingredients')) : the_row();
                // Récupérer les valeurs des sous-champs.
                $nomIngredient = get_sub_field('nom');
                $quantite = get_sub_field('quantite');
                ?>
                <li><?php echo $nomIngredient; ?> - <?php echo $quantite; ?></li>
            <?php endwhile; ?>
        </ul>
        <?php
    endif;
    return ob_get_clean();
}
add_shortcode('recette', 'recette_shortcode_inumedia');

Ainsi, vous pouvez afficher tous les éléments de votre répéteur en utilisant le shortcode
[ recette ] dans vos articles ou Elementor.

Conclusion

Advanced Custom Fields est un outil puissant qui facilite la création et la gestion de champs personnalisés dans WordPress. C’est pourquoi, il offre une solution pour répondre aux besoins spécifiques de chaque site, améliorant ainsi l’expérience utilisateur et la personnalisation des contenus.

À travers ce tutoriel, je vous ai donné les bases nécessaires pour utiliser le plugin sur vos sites. Nous aborderons des exemples plus approfondis dans le futur, dans de prochains articles.