Tout savoir sur WordPress

Advanced Custom Fields : Les 6 atouts de la version Pro

La version Pro d’ACF apporte de nouveaux champs absolument incontournables ainsi que la possibilité d’améliorer la mise en page des champs dans l’interface d’administration. C’est ce que l’on va voir aujourd’hui

Cet article fait partie d’une suite de tutoriels autour d’ACF, découvrez également :

Quand j’ai découvert ACF, j’ai tout de suite accroché car il comblait tout ce que WordPress n’était pas en mesure de m’apporter : pouvoir ajouter des champs de texte, image, des autres éditeurs visuels en toute simplicité. Et le tout en offrant une ergonomie parfaite pour mes clients.

ACF pro version

J’ai tout de suite investi dans la version Pro. Vu le temps que ce plugin m’a fait gagné dans tous mes projets, l’investissement était vite rentabilisé. J’ai ensuite décidé de participer à la traduction francophone de l’extension, histoire de rendre un peu à un outil qui m’a beaucoup apporté.

Je vais vous montrer les champs et principales fonctionnalités apportés dans cette version Pro.

1. Le champ répéteur

Le champ répéteur

Il sert par exemple à afficher la liste des collaborateurs dans une page à propros, ou une liste de magasin comme dans l’exemple ci-dessous :

champ repeteur

Pour afficher les contenus d’un champ répéteur, il faut utiliser le code suivant.

<?php

// check if the repeater field has rows of data
if( have_rows('repeater_field_name') ):

 	// loop through the rows of data
    while ( have_rows('repeater_field_name') ) : the_row();

        // display a sub field value
        the_sub_field('sub_field_name');

    endwhile;

else :

    // no rows found

endif;

?>

On utilise cette fois la fonction the_sub_field() pour afficher les valeurs (nom de chaque magasin, adresse, photo…).

Plus d’informations sur la documentation ACF à propos du champ répéteur.

Quand utiliser le champ répéteur, quand utiliser un type de publication ?

Il faut bien comprendre la différence avec un potentiel type de publication :

  • Dans un type de publication, chaque magasin aurait sa page dédiée. S’il y a beaucoup d’informations à afficher, il faut préférer faire un Custom Post Type. Chaque magasin aura sa propre URL et ce sera mieux pour le référencement.
  • Si par contre vous souhaitez simplement faire une liste de choses qui ne nécessitent pas une page dédiée, alors le champ répéteur suffira amplement.

Par exemple, pour la liste des coworkers à Grenoble, chaque personne a sa propre page dédiée, donc le champ répeteur n’était pas le plus approprié. Si on avait juste crée une liste de personnes sans lien derrière, on aurait utilisé le champ répéteur :

cpt

2. Le champ Galerie

Il peut être bien souvent pratique de générer une galerie qui s’affichera en dehors de la zone de contenu principale. Le champ galerie est là pour ça ! Selon moi il est ergonomiquement plus cool que la galerie par défaut de WordPress, même si elle a récemment été améliorée.

Vous pourrez utiliser le champ galerie pour créer une galerie photo ou même servir de base à un slider.

galerie ACF

Il est notamment possible de changer l’ordre via un glisser/déposer.

Pour afficher les images de la galerie, si le champ galerie d’appelle par exemple ‘magallerie’ :

<?php 

$images = get_field('magallerie');

if( $images ): ?>
    <ul>
        <?php foreach( $images as $image ): ?>
            <li>
                <a href="<?php echo $image['url']; ?>">
                     <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
                </a>
                <p><?php echo $image['caption']; ?></p>
            </li>
        <?php endforeach; ?>
    </ul>
<?php endif; ?>

Pour en savoir plus sur la configuration et l’utilisation de la galerie, consultez la documentation ACF Gallery Field sur ce sujet.

3. Le contenu flexible

Le champ flexible permet de laisser la liberté de choix de modules comme dans un page builder, mais sans les risques de casser la mise en page

Un de mes préférés ! Le champ flexible se trouve entre la page à template statique et le page builder. La première ne laisse pas beaucoup de choix de personnalisation alors que le page builder laisse bien souvent trop de libertés (et votre client aura vite fait de tout casser, croyez-moi !)

Le principe est de pouvoir créer plusieurs modules contenant une mise en page et des champs, et laisser à l’utilisateur le choix de la disposition de ces modules.

Exemple pratique :

Sur mon site d’informatique, Xyoos, j’écris des cours qui contiennent plusieurs éléments : du contenu (texte + image), des définitions, des blocs « attention », des publicités…

flexible

Dans cette page, on voit bien les différents blocs. Pour vous en rendre mieux compte, visitez la page en question sur Xyoos.

Chacun de ces modules est défini par mes soins dans ACF, et lorsque j’arrive sur la page d’édition d’un cours, je choisis à quel moment j’ai besoin de quel module :

flexible admin

De plus, à tout moment je peux intervertir l’ordre des blocs à l’aide d’un simple glisser/déposer. Vous pouvez observer que pour la définition j’ai simplement mis un champ « objet article » qui me permet de récupérer facilement le contenu d’un autre article (dans mon cas j’ai limité au post type définitions).

J’ai également utilisé ce système pour l’un des sites de Canal+ : l’équipe rédactionnelle peut entièrement choisir les éléments à afficher sur la page d’accueil et dans quel ordre. Ils sont libres dans une certaine mesure : contrairement à un page builder ils ne risquent pas de casser la mise en page.

Pour afficher les informations des différents modules, voici le code de base :

<?php

// check if the flexible content field has rows of data
if( have_rows('nom_du_champ_flexible') ):

     // loop through the rows of data
    while ( have_rows('nom_du_champ_flexible') ) : the_row();

        if( get_row_layout() == 'texte' ): // Module de contenu

        	the_sub_field('contenu');

        elseif( get_row_layout() == 'definition' ):  //  Module de définition

        	$def = get_sub_field('definition');

        endif;
    endwhile;

else :
    // no layouts found
endif;

Pour plus d’informations et d’exemples à ce sujet, consultez la documentation ACF à propos du flexible content.

J’ai mis longtemps avant d’utiliser ce champ mais au final c’est l’un des plus puissants fournis avec ACF.

4. Les pages options

Les pages options sont très pratiques. Vous allez pouvoir créer des pages dans votre interface d’administration et y lier des champs. Le plus régulièrement je m’en sers pour que l’utilisateur puisse insérer des données qui ne sont pas rattachées à une seule page, mais tout le site. Voici quelques exemples de pages options que je réalise souvent :

  • Header / Footer : les informations à placer en en-tête et pied de page, comme le numéro de téléphone, l’adresse, le message de copyright, les horaires d’ouverture
  • Réseaux sociaux : pour indiquer les liens vers les réseaux sociaux (Facebook, Twitter, Instagram…)
  • Page 404 : pour rendre personnalisable le contenu de la page 404

Une fois les pages et champs définis, voici le résultat dans l’admin :

page options

Il est possible de créer un groupe de pages avec des sous pages (ici Général, Réseaux sociaux…) afin de ne pas surcharger l’interface.

Pour déclarer une page option et son groupe, il faut utiliser le code suivant :

if( function_exists('acf_add_options_page') ) {

  acf_add_options_page(array(
    'page_title'    => 'Options',
    'menu_title'    => 'Options',
    'menu_slug'     => 'options',
    'capability'    => 'edit_posts',
    'position'      => 3,
    'icon_url'      => 'dashicons-welcome-widgets-menus'
  ));

  acf_add_options_sub_page(array(
    'page_title'    => 'Options Générales',
    'menu_title'    => 'Général',
    'parent_slug'   => 'options',
  ));

  acf_add_options_sub_page(array(
    'page_title'    => 'Configuration des réseaux sociaux',
    'menu_title'    => 'Réseaux sociaux',
    'parent_slug'   => 'options',
  ));

  acf_add_options_sub_page(array(
    'page_title'    => 'Options du footer',
    'menu_title'    => 'Footer',
    'parent_slug'   => 'options',
  ));

  acf_add_options_sub_page(array(
    'page_title'    => 'Options de la Page 404',
    'menu_title'    => 'Page 404',
    'parent_slug'   => 'options',
  ));
}

Dans vos templates, pour afficher ce champ il faudra utiliser la fonction suivante :

<p><?php the_field('nom_du_champ', 'option'); ?></p>

Vous retrouverez toutes les informations dans la documentation ACF Options page.

en résumé les pages options sont pratiques pour personnaliser tout ce qui ne sera pas rattaché forcément à une seule page.

5. La mise en page des champs dans l’admin

Quand vous commencez à avoir beaucoup de champs, l’interface de WordPress peut s’en retrouver alourdie. Afin de libérer un peu de place, il est possible de disposer les champs dans des colonnes avec la version professionnelle d’ACF. On peut voir sur cette capture que j’ai mis l’identifiant, la couleur et le niveau sous forme de colonnes.

colonnes champs

Pour configurer les colonnes il faut donner une valeur de taille pour chaque champ, par exemple l’identifiant fait 25%, la couleur 40% et le niveau 35%. Veillez bien à faire en sorte que la somme des colonnes fasse bien 100%.

configuration colonnes

Il est également possible d’assigner une classe ou un ID en particulier, afin de personnaliser facilement le style CSS d’un champ.

Cette fonctionnalité peut paraitre anodine mais elle est d’une grande aide pour optimiser vos interfaces d’administration.

6. L’auto export Json des champs

Si comme moi vous utilisez Git pour versionner vos projets, vous savez que les données stockées en base ne sont pas prises en compte, et dans le cas des champs ACF cela peut être assez contraignant, surtout lorsque vous travaillez en équipe.

Grâce à l’export JSON automatisé des paramètres de champs, vous pourrez versionner l’état de votre ACF afin que vos collègues puissent facilement travailler sur la même version que vous.

Pour activer l’export json il suffit d’ajouter ce petit code à votre functions.php :

<?php 
function acf_json_save_point( $path ) {
  $path = get_stylesheet_directory() . '/acf-json';
  return $path;
}
add_filter('acf/settings/save_json', 'acf_json_save_point');

acf-json est le nom du dossier dans le thème où je veux stocker mes informations de champs. En allant dans groupes de champs (depuis le menu ACF), si un groupe n’est pas à jour et qu’un fichier json est disponible, vous verrez  un lien synchronisation disponible.

acf-pro-sync-available

J’avais l’habitude de travailler en petite équipe sur les sites WordPress, et cette fonction a été très pratique. C’est d’ailleurs aussi très pratique si vous travaillez seul et que vous souhaitez synchroniser les champs de votre site local à votre site en production : une fois Git synchronisé, il vous suffit de lancer la synchro depuis groupes de champs. Finis donc les exports manuels !

C’est d’ailleurs plus pratique qu’exporter les champs ACF en PHP, car ils ne sont plus directement modifiables par la suite dans l’admin.

Conclusion

Ces champs et fonctionnalités sont vraiment devenues incontournables dans les sites que je fabrique. J’utilise le plus souvent le champ répéteur mais j’ai également pas mal tiré parti du contenu flexible récemment.

Lorsque je fais des sites pour des clients, je prend un soin particulier à fignoler la mise en page des champs afin de fournir une interface d’administration la plus propre et la plus ergonomique possible.

Selon moi ACF permet à WordPress de s’imposer comme un véritable CMS

Enfin, la fonctionnalité d’export des champs en json est un atour vraiment pratique, cela me permet de versionner mes champs et donc de plus facilement gérer la mise en ligne d’une nouvelle version d’un site.

Je suis un grand amateur de ACF car je pense qu’il permet à WordPress d’être réellement un CMS et plus seulement une plateforme de blogging. J’espère vous avoir convaincu de l’utilité d’ACF.

Cet article a été mis à jour il y a 274 jours

Article écrit par Maxime BJ

Développeur, bloggeur et formateur Web spécialisé WordPress. 31 ans. Grenoblois. Co-fondateur de WPChef, l’organisme de formation WordPress.

Organisateur de WPInAlps, le meetup WordPress Grenoblois. Vous pouvez me rencontrer lors d’événements tels que WordCamp Paris et Europe. Traducteur Français de l’extension Advanced Custom Fields. Également développeur d’applications web avec MeteorJs. Je m’occupe un site pour apprendre l’informatique aux débutants gratuitement.

J’aime les jeux vidéo, la rando, la bouffe bien grasse et les voyages.

10 Commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

  1. Hello,
    Plus approfondi que le précédent et bien structuré, on passe à l’étape supérieure! Et c’est cool de faire découvrir les fonctionnalités d’ACF qui est à mon goût un page builder.
    Je préciserait cependant que de manière générale, pour faire de l’optimisation, les champs gallery, image, post object, relationship, etc, doivent plutôt être formatté pour retourner des ids plutôt que des objets tout fait par ACF. Car au final si tu as besoin que d’un title et d’une image, tu aura instancié un object entier inutilement.
    Pour les export des champs ACF, cela est plus gourmand de les charger en JSON plutôt qu’en PHP et il ne reste pas moins possible de les versionner. Même plus besoin de synchro.
    Je finirais sur trois aspects :
    – ajouter la constante define( ‘ACF_LITE’, true ) permet de masquer l’admin d’ACF sur un site de recette et/ou prod.
    – il est maintenant possible (5.5.3) d’internationaliser vos champs en se hookant sur « i18ntexdomain », cf https://www.advancedcustomfields.com/blog/acf-pro-5-3-3-update/.
    – depuis la semaine dernière, il faut utiliser le filtre « google_api_key » afin de préciser une clé d’API Google.
    Merci et bonne continuation ! ;)

    • Merci pour ta contribution !
      Tu as pu benchmark pour objet vs id ? Je me demande si il ne vaut mieux pas récupérer l’objet complet un coup plutôt que d’aller faire des sous fonctions WP qui font faire plusieurs requêtes à la BDD.
      Pour Json vs PHP, le truc chiant en PHP c’est que les modifications de champs par la suites sont plus chiantes : c’est à un seul sens. Alors que pour le Json c’est plus simple de mettre à jour des champs dans le futur.
      Pour les autres points tu spoiles à mort les prochains articles là :p

  2. Bonjour Maxime,

    Je souhaite utiliser le champ répéteur pour des liens externes mais je penses que ce n’est pas possible même avec la version pro, j’ai trouvé le plugin ACF link (Advanced Custom Fields: Link) par contre je ne comprends pas avec quel code on peut afficher les données dans le thème, Une idée ?

    • Si tu met un champ URL dans ton répéteur ça devrait marcher !
      Ensuite tu copie colle presque simplement le code de la doc ça devrait marcher

    • Tu met un champ texte en plus du champ URL tout simplement ! Le champ texte te sert pour le titre. Tu peux même ajouter un champ vrai/faux pour définir si c’est un target blank ou non.

  3. Excellent article ! Je débute avec ACF et tous vos articles à ce sujet sont un régal. Et ça me donne envie d’en faire plus avec ACF.
    Merci de partager tout ça avec nous :)

  4. Super vos sites.
    Je démarre avec ACF J’hésite a prendre la version pro.
    En tout cas moi aussi je fait des sites de tutoriels ( Ableton Live ) Un logiciel pour faire de la musique.
    L’idée c’est de former des gens à créer des patch qu’on revend dans une market place.
    En tout cas je suis preneur de tout conseils sur votre experience autour des sites internet de tutoriel

832b85660a74ceea9262a1582e205a3fFFFFFFFFF