Pourquoi ACF est indispensable à WordPress ?

Si WordPress a gardé si longtemps sa réputation de « plateforme de blog », c’est parce que, nativement, le CMS manque d’outils lui permettant de proposer des mises en page de sites modernes (avec sections, colonnes …).

Si aujourd’hui il connait tant de succès, c’est en grande partie grâce à ACF, utilisé par la grande majorité des agences web.

Avant de nous lancer dans la formation, je vous propose de découvrir pourquoi ACF est devenu un outil incontournable pour les développeurs WordPress.

Les limites de WordPress

Pour comprendre l’émergence d’un outil comme ACF (Advanced Custom Fields), il faut revenir un peu dans le temps, bien avant l’arrivée de Gutenberg et du Full Site Editing.

Voici à quoi ressemblait WordPress avant :

Pour tout éditeur de contenu, on avait une zone de texte améliorée, gérée par un éditeur nommé Tiny MCE.

C’était pratique pour mettre en forme du texte, mais pas pour faire de la mise en page de contenus.

Le problème, c’est que WordPress a tardé à proposer une solution plus moderne, à une époque ou le design web connaissait de nombreuses révolutions : design par sections, composants, responsive web design…

Comment réaliser une telle mise en page et rendre le contenu administrable avec seulement WordPress ? C’était impossible.

Une solution était d’utiliser les champs personnalisés de WordPress, ou custom fields en anglais, qui permettait d’ajouter des champs administrables.

Au niveau du template, il suffisait de récupérer les différents champs, par exemple le titre, la description, l’intitulé et le lien du bouton…

Mais là encore, il y avait un problème : l’interface était très limitée et difficile à prendre en main.

Bon, autant vous dire qu’avec ces interfaces, WordPress n’aurait jamais connu le succès qu’il rencontre aujourd’hui, avec plus 43% du web qui l’utilise.

Aux environ de 2011 (ça date !), mon designer s’est enflammé avec des design de plus en plus modernes. Alors du coup, il a bien fallu trouver des solutions ! C’est là qu’on a découvert le fameux ACF.

Solutions pour lever les limites

À l’époque, il n’y avait pas 50 solutions pour faire des sites avec WordPress : soit on téléchargeait un thème tout prêt sur Theme Forest, soit on développait notre thème sur-mesure.

Mais ensuite, les constructeurs de page ont fait leur apparition. Il y a eu 2 écoles : le WordPress des no-codeurs, et le WordPress des développeurs.

Les Pages Builders

Depuis quelques années, les constructeurs de pages ont pris une place prépondérante dans l’univers WordPress. Tout le monde les utilise, mais plus particulièrement les no-codeurs et les bricodeurs.

Le principe est de concevoir ses pages sans code, grâce à des outils de mise en page que l’on utilise au clic.

Ils permettent de créer des sections, des colonnes, et d’ajouter des contenus et personnaliser le tout dans les moindres détails.

Parmi les plus connus, on retrouve Elementor, Beaver Builder et Divi Builder (qui est un thème premium à la base).

Le problème c’est que lorsque vous faites un site pour un client, et que vous lui donnez l’accès à cet outil, il sera en face de quelque chose de très complexe, et il aura la main pour tout modifier et éventuellement tout casser.

À la place, je vais vous proposer une approche « encadrée » que je trouve bien plus saine.

Advanced Custom Fields

L’autre solution, c’est le célèbre ACF : Advanced Custom Fields. C’est une extension qui ajoute une interface pour créer des champs personnalisés à nos contenus, que l’on va pouvoir personnaliser à volonté !

Le créateur de thème va créer des groupes de champs qu’il va ensuite assigner à des contenus : une page en particulier, aux articles …

Et ces champs peuvent être du texte, du contenu riche, des images, des liens, des fichiers…

Il y a des champs select, texte, des boutons on/off, et même des onglets pour organiser tout ça !

Et ces champs, on va ensuite pouvoir les afficher très facilement dans nos templates, à l’endroit où on le souhaite !

Par contre c’est une approche qui n’est pas très visuelle pour votre client, mais au moins, c’est un no-brainer : il lui suffit de remplir les informations demandées, et on s’occupe de la mise en page !

Au final, le client met le focus sur le contenu, et pas sur le design. Cette approche plait énormément.

Le Full Site Editing

Aujourd’hui, WordPress s’est grandement modernisé notamment avec l’arrivée de Gutenberg, l’éditeur de blocs, et le Full site Editing, qui permet de gérer l’intégralité de son site visuellement, sans extension tierce.

L’édition de contenu est entièrement visuelle, puisqu’on modifie les texte en direct à leur emplacement dans la page. Une vraie révolution en somme.

J’ai d’ailleurs dédié une formation complète à ce sujet. N’hésitez pas à y jeter un œil, car c’est vraiment l’avenir de WordPress.

Mais du coup, est-ce que ACF reste utile aujourd’hui ? Eh bien oui ! Car parfois, on aura quand même besoin de stocker des informations dans des champs personnalisés au niveau de la page, et non pas au niveau du contenu.

La raison est simple : si demain vous souhaitez afficher la liste des jeux vidéo les mieux notés sur votre page d’accueil via une WP Query, alors vous aurez besoin que la note soit stockée au niveau de la page, dans les métadonnées. Et c’est justement ce que ACF permet.

De plus, ACF permet de créer des blocs Gutenberg en toute simplicité en PHP, là où WordPress nous demande de maîtriser React pour créer des blocs Gutenberg. Là aussi, j’ai une formation dédiée à ce sujet si ça vous intéresse !

Pourquoi utiliser ACF ?

ACF c’est très simple à mettre en place, ça fait gagner énormément de temps au développeur, et ça permet de créer une interface plutôt sympa pour vos rédacteurs.

De plus, ACF utilise les mécanismes de base de WordPress en ce qui concerne l’enregistrement des données des champs personnalisés (dans les post metas). Il n’y a donc pas de surcouche qui viendrait ralentir votre site !

Que des bons points en somme !

UX : Focus sur la saisie de contenu, pas sur le design

Le fait de proposer des champs administrables à vos rédacteurs va leur permettre de se focaliser sur une chose : la saisie du contenu.

Le design de votre template est conçu par le designer, l’auteur va à l’essentiel et n’a donc qu’à remplir les « trous ». Il n’a pas besoin de penser au design ou au rendu.

Contrairement à un Page Builder, il n’a même pas accès à tous les outils de mise en page.

L’auteur se focalise donc sur la saisie des champs et uniquement sur ça. Le seul désavantage du coup c’est qu’on ne voit pas directement le rendu réel que cela va avoir sur la page.

Mais ça reste tout de même simple d’utilisation. J’ai utilisé ACF pour tous mes sites clients à l’époque, comme beaucoup d’agences aujourd’hui, et tous les utilisateurs ont toujours été ravis de cette approche : simple, et efficace !

Et même si aujourd’hui on va privilégier la création des pages avec Gutenberg, on va voir que parfois, on aura tout de même de stocker des informations dans des champs personnalisés grâce à ACF.

C’est donc vers cette solution que l’on va se tourner maintenant. Grâce à ACF, vous allez vous ouvrir bon nombre de possibilités nouvelles ! Et très vite, vous ne pourrez plus vous en passer !

---

Dans le prochain cours, on va voir comment créer notre premier groupe de champs, l’assigner à un contenu, et afficher les données dans votre template.