advanced custom fields wordpress

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. Il est toutefois développeur, moi designer. Mais c'est au plus tard à ce moment-là que j'ai pris conscience 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. Les Advanced Custom Fields (ACF) te permettent d'élargir encore fortement 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 contributions et des pages des champs typiques comme le titre, le contenu, la date et l'auteur. Advanced Custom Fields Le plugin WordPress, ou le plugin mentionné plus bas, te donne la possibilité d'étendre WordPress, et donc les pages et les articles, pratiquement à volonté et de manière individuelle.

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

Pourquoi ai-je besoin de Advanced Custom Fields?

En résumé, il s'agit d'un outil de gestion : Tu as probablement besoin de Advanced Custom Fields lorsque les éléments de bord du backend de WordPress ne te permettent plus d'avancer. Tu es confronté à un défi qui ne peut pas être réalisé, ou seulement partiellement, à l'aide de pages ou de messages.

Cela peut arriver assez rapidement, selon les souhaits du client. Si tu es toi-même webdesigner, cela te rappelle certainement quelque chose.

Dans mon cas, il s'agissait par exemple de construire une recherche avec des critères de filtrage. Il ne s'agissait donc pas d'une simple recherche de texte qui parcourt tout le site à la recherche de contenus adéquats, mais d'une recherche qui permet de saisir au préalable des données spécifiques via un formulaire. L'utilisateur dispose de différents critères de filtrage. Il s'agit entre autres de

  • 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 embarqués 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 l'œuvre d'Elliot Condon. L'Australien y travaille très activement et le développe en permanence, de sorte que de nouvelles fonctions apparaissent régulièrement. Si vous souhaitez être au plus près de l'actualité, vous pouvez suivre ACF sur Twitter.

Si tu as déjà été courageux et que tu as misé entièrement sur l'éditeur de blocs (Gutenberg) introduit depuis WordPress 5.0, il y a aussi des blocs pour le nouvel éditeur sur Advanced Custom Fields .

Le plugin ACF est actuellement actif sur bien plus d'un million de sites web. Il est testé de manière très intensive et fonctionne parfaitement avec la dernière version de WordPress. Il est également impressionnant de constater que le plugin a déjà reçu plus de 1.000 évaluations avec 5 étoiles. En revanche, il n'y a que 16 é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 faut un peu de temps et de patience avant de comprendre son utilisation. Il va de soi que je n'ai fait qu'effleurer la surface de Advanced Custom Fields . Je veux simplement dire qu'il existe d'autres plug-ins que tu installes et qui fonctionnent ensuite confortablement en arrière-plan - ce qui n'est pas le cas d'ACF. Tu dois être actif et reconnaître le lien global 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 à y recourir moi-même. La raison en est simple : la documentation de premier ordre qui traite des types de champs, des fonctions, des filtres et des FAQ.

"*" indique les champs obligatoires

Consentement*
Ce champ sert à la validation et ne doit pas être modifié.

Que sont les Custom Post Types ?

J'ai mentionné précédemment la nécessité d'une conception active. Cela signifie aussi que, dans certains cas, Advanced Custom Fields ne te sera pas d'une grande utilité. Ce n'est qu'en combinaison avec les Custom Post Types que d'autres options apparaissent.

La première question qui se pose est la suivante : 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 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 manière de saisir les contenus dans le backend. En quelque sorte, un masque de saisie avec exactement les champs dont tu as besoin. Les sites 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.

advanced custom fields champs propres
Dans le backend du plugin ACF, tu peux facilement définir des champs.

C'est alors qu'interviennent les Custom Post Types. Il est important de noter qu'il est judicieux de créer un Custom Post Type spécifique pour l'utilisation de Advanced Custom Fields . Dans mon cas, j'appellerai ce Custom Post Type (CPT) " thérapeute".

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

création de posts personnalisés
Voici à quoi ressemble le backend du plugin "Custom Post Type UI".

Custom Post Type UI : plugin gratuit

Si jusqu'à présent, la magie n'a pas fonctionné pour toi avec Advanced Custom Fields (ACF), voici le meilleur : ACF en combinaison avec Custom Post Type UI, en abrégé CPT UI.

Cela te permet d'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 par filtre avec différents champs. J'ai donc d'abord dû télécharger toutes les données dans le backend via une importation CSV.

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

combinaison custom post type acf
Voici à quoi peut ressembler ton nouveau Custom Post Type, par exemple.

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

Voilà pour le moment ce qu'il en est du backend. Passons maintenant 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 plug-in. J'ai à nouveau longtemps cherché un bon outil et je suis finalement tombé sur "Search & Filter Pro" (lien à la fin du texte).

J'ai ainsi la possibilité, d'une manière ingénieuse, d'utiliser les données disponibles 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 :

search and filter pro backend
Avec le plugin "Search & Filter Pro", tu peux créer une recherche individuelle avec des critères de filtrage.

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

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

exemple pratique acf

Je suis impatient de voir ce que je pourrai encore réaliser à l'avenir avec Advanced Custom Fields . Tu as des questions ou des remarques sur cet article ? Je me réjouis de recevoir de nombreuses réactions.

Tes questions sur l'ACF

Quelles questions as-tu sur l'ACF et WordPress ? N'hésite pas à utiliser la fonction de commentaire. Tu veux être informé(e) des nouveaux articles sur WordPress et le design web ? Alors suis-nous sur Twitter, Facebook, LinkedIn ou via notre newsletter.

As-tu aimé cet article ?

Tes évaluations nous permettent d'améliorer encore plus notre contenu.

Laisse un commentaire

Ton adresse e-mail ne sera pas publiée.