Que sont les Advanced Custom Fields (ACF) dans WordPress ?

"Tu ne connais pas Advanced Custom Fields (ACF) ? Sans ACF, je n'utiliserais définitivement plus WordPress". C'est ce que m'a écrit un collègue il y a quelques semaines via Slack. Lui est développeur, moi designer. C'est à ce moment-là que j'ai réalisé que je devais (et voulais) m'y intéresser.

Que sont les Advanced Custom Fields (ACF) ?

WordPress en soi offre déjà des fonctions très variées. Avec les Advanced Custom Fields (ACF), tu peux encore fortement étendre ces fonctions - gratuitement dans la version standard. Ils te permettent d'avoir un contrôle total sur le contenu de ton site.

Par défaut, nous trouvons dans le backend des articles et des pages des champs typiques comme le titre, le contenu, la date et l'auteur. Advanced Custom Fields Les modules d'extension de WordPress, ou le plugin mentionné ci-dessous, te donnent la possibilité d'étendre WordPress et donc les pages et les articles pratiquement à volonté et de manière individuelle.

Ainsi, presque tout est possible avec WordPress - Advanced Custom Fields en quelque sorte comme tuning pour WordPress.

Pourquoi ai-je besoin de Advanced Custom Fields?

En bref : Tu as besoin de Advanced Custom Fields probablement lorsque tu ne peux plus utiliser les éléments de bord dans le backend de WordPress. Tu es confronté à un défi qui ne peut pas être réalisé, ou seulement partiellement, à l'aide de pages ou d'articles. Selon les besoins du client, cela peut arriver assez rapidement.

Dans mon cas, par exemple, j'ai dû construire une recherche avec des critères de filtrage. Il ne s'agit pas d'une simple recherche de texte qui parcourt tout le site à la recherche de contenus correspondants, mais d'une recherche qui permet d'entrer des données spécifiques via un formulaire. L'utilisateur dispose de différents critères de filtrage. Entre autres :

• Nom (champ de texte)
• Code postal (zone de texte)
• Pays (liste déroulante)
• Certificats (case à cocher)

Mais nous y reviendrons plus tard. Ce cas d'utilisation m'a donné l'idée d'utiliser Advanced Custom Fields (ACF). Une recherche aussi personnalisée n'est tout simplement pas possible avec les éléments de bord de WordPress sans ACF.

Advanced Custom Fields: Le plugin gratuit

J'ai donc cherché une solution pour mettre en œuvre cette recherche de filtre à l'aide de Advanced Custom Fields .

Le plugin du même nom dans le répertoire officiel des plugins WordPress est en constante évolution, de sorte que de nouvelles fonctionnalités apparaissent régulièrement. Si tu veux être au plus près de l'actualité, tu peux suivre ACF sur Twitter.

Le plugin ACF est actif sur bien plus d'un million de sites web. Il est testé intensivement et fonctionne parfaitement avec la dernière version de WordPress. Ce qui est également impressionnant, c'est que le plugin a déjà reçu plus de 1000 évaluations avec 5 étoiles. En revanche, il n'y a qu'une quarantaine d'évaluations avec seulement une étoile - très probablement des utilisateurs qui ont abandonné après (très) peu de temps.

Avec un tel plugin, il est clair qu'il te faudra un peu de temps et de patience pour comprendre son utilisation. Bien sûr, je n'ai fait qu'effleurer la surface de Advanced Custom Fields . Je veux simplement dire qu'il y a d'autres plugins que tu installes et qui fonctionnent confortablement en arrière-plan - ce n'est pas le cas d'ACF. Tu dois être actif et reconnaître l'interdépendance entre la base de données, le backend et le frontend.

Ce qui est également indispensable pour ce plugin, qui est tout de même assez technique : le support.

Je n'ai pas encore eu besoin de l'utiliser moi-même. La raison est simple : la documentation de première classe qui couvre les types de champs, les fonctions, les filtres et les FAQ.

Que sont les types de messages personnalisés ?

J'ai mentionné plus tôt qu'il est nécessaire d'être actif. Cela signifie aussi que Advanced Custom Fields ne te sera pas d'une grande utilité dans certains cas. Ce n'est qu'en combinaison avec les Custom Post Types que d'autres options s'offrent à toi.

La première question qui se pose est : qu'est-ce qu'un Post Type (normal) ?

Les deux plus connus dans WordPress sont les pages (Pages) et les messages (Blog Posts). Pour chaque nouveau contenu à créer pour un site web, tu décides donc quel type de post est le plus approprié. Cela dépend de différents facteurs, notamment de la manière dont les informations doivent être visibles et des champs dont tu as besoin pour cela dans le backend.

Mais qu'en est-il si tu veux fournir un contenu qui ne peut être couvert ni par une page normale ni par un article ?

Tu t'en doutes peut-être déjà : tu as besoin d'une nouvelle façon d'ajouter du contenu dans le backend. En quelque sorte, un masque de saisie avec exactement les champs dont tu as besoin. Les Advanced Custom Fields peuvent t'offrir cela. Le plugin du même nom mentionné ci-dessus te permet de définir et de créer facilement ces champs dans le backend. Une fois que cette structure est en place, il faut passer à l'étape suivante.

C'est là que les Custom Post Types entrent en jeu. Ce qui est très important ici, c'est qu'il est utile de créer un Custom Post Type pour l'utilisation de Advanced Custom Fields . Dans mon cas, j'appelle le Custom Post Type (CPT) "thérapeute".

Tu peux bien sûr programmer toi-même le Custom Post Type. Mais pour cela, j'ai utilisé le plugin "Custom Post Type UI", que j'expliquerai plus en détail dans la prochaine section.

Custom Post Type UI : Plugin gratuit

Si jusqu'à présent, tu as trouvé que la magie ne fonctionnait pas avec Advanced Custom Fields (ACF), voici le meilleur : ACF en combinaison avec Custom Post Type UI, en bref CPT UI.

Tu peux ainsi afficher le contenu de la base de données directement dans le frontend, si tu le souhaites. Dans mon cas, j'ai dû relever le défi de construire une recherche de filtre avec différents champs. Je devais donc d'abord télécharger toutes les données dans le backend en utilisant un import CSV.

Ensuite, j'ai construit la base pour la recherche de filtre dans le frontend à l'aide du Custom Post Type ainsi que des Advanced Custom Fields . Plus de détails dans la prochaine section.

Exemple pratique : construire une recherche avec des critères de filtrage

C'est tout pour l'instant pour le backend. Maintenant, passons au frontend. Pour que tu puisses appliquer le tout et utiliser les Advanced Custom Fields individuels pour ton cas.

J'ai utilisé l'ACF pour construire une recherche individuelle avec des critères de filtrage. Mais comment est-il possible de présenter élégamment le contenu du backend dans le frontend, de sorte que l'utilisateur puisse interagir ?

Ici aussi, tu as le choix entre développer toi-même et utiliser un plugin. J'ai à nouveau cherché longtemps un bon outil et j'ai finalement trouvé Search & Filter Pro.

Cela me permet d'une manière ingénieuse d'utiliser les données présentes dans le backend pour les afficher dans le frontend. Dans mon exemple, il s'agit de

• Search (champ de recherche normal)
• Post Meta (accès et recherche sur le champ personnalisé avancé correspondant dans la base de données)
• Bouton "Envoyer" (Bouton pour soumettre la requête ou le formulaire de recherche)

Dans le backend, cela peut alors se présenter comme suit :

Ensuite, tu peux utiliser un shortcode pour insérer la recherche de filtre que tu viens de créer à n'importe quel endroit du backend (par exemple sur une page).

Cependant, tu verras qu'il sera encore un peu inesthétique. J'ai amélioré cela avec quelques manipulations CSS et je trouve que le résultat sur le front-end est tout à fait acceptable :

Liens

• Plugin ACF
• Plugin d'interface utilisateur Custom Post Type
• Extensions
• Search & Filter Pro (plugin premium)

Je suis impatient de voir ce que je vais pouvoir réaliser à l'avenir avec Advanced Custom Fields . Tu as des questions ou des remarques sur cet article ? Dans ce cas, je me réjouis de recevoir de nombreux commentaires.