Que contiennent les Advanced Custom Fields (ACF) dans WordPress et à quoi me servent-ils ?

Michael Hörnlimann Dernière mise à jour le 21.10.2020
6 Min.
advanced custom fields wordpress
Dernière mise à jour le 21.10.2020

"Vous ne connaissez pas Advanced Custom Fields ? Sans ACF, je n'utiliserais certainement plus WordPress ". C'est ce qu'un collègue m'a écrit via Slack il y a quelques semaines. Cependant, il est développeur, je suis designer. Mais au plus tard à ce moment-là, j'ai réalisé que je devrais (et voulais) m'en occuper.

Que sont les Advanced Custom Fields?

WordPress offre déjà un large éventail de fonctions. Avec le Advanced Custom Fields , vous pouvez étendre ces fonctions encore plus loin - dans la version standard gratuite. Ils vous permettent de contrôler entièrement le contenu de votre site web.

Par défaut, nous trouvons des champs typiques tels que le titre, le contenu, la date et l'auteur dans le backend des messages et des pages. Advanced Custom Fields , ou le site Plugin, mentionné ci-dessous, vous donne la possibilité d'étendre WordPress et donc de mettre en ligne et de publier des pages de manière pratiquement arbitraire et individuelle.

Ainsi, avec WordPress , presque tout est possible - Advanced Custom Fields presque aussi bien que le réglage de WordPress .

Pourquoi ai-je besoin de Advanced Custom Fields ?

En un mot : Vous avez probablement besoin de Advanced Custom Fields lorsque vous êtes bloqué avec les éléments embarqués dans le backend WordPress . Vous êtes confronté à un défi qui ne peut pas être réalisé, ou seulement partiellement, à l'aide de pages ou de messages.

Selon les souhaits du client, cela peut se faire relativement rapidement. Si vous êtes vous-même un concepteur de sites web, cela vous est certainement aussi familier.

Dans mon cas, par exemple, j'ai été autorisé à construire une recherche avec des critères de filtrage. Il ne s'agit pas d'une simple recherche de texte, qui permet de rechercher un contenu approprié sur l'ensemble du site web, mais d'une recherche où des données spécifiques peuvent être saisies au préalable via un formulaire. L'utilisateur a à sa disposition différents critères de filtrage. Entre autres :

  • Nom (champ de texte)
  • Code postal (champ 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 telle recherche individuelle n'est tout simplement pas possible avec les éléments du tableau WordPress sans ACF.

Advanced Custom Fields: Le libre Plugin

Je cherchais donc une solution pour mettre en place ce filtre de recherche avec l'aide de Advanced Custom Fields .

Le nom Plugin dans l'annuaire officiel WordPress -Plugin- vient d'Elliot Condon. L'Australien y travaille très activement et le développe constamment, de sorte que de nouvelles fonctions apparaissent sans cesse. Si vous voulez être proche de l'action, vous pouvez suivre l'ACF sur Twitter.

Si vous étiez déjà courageux et que vous vous fiez entièrement à l'éditeur de blocs introduit depuis WordPress 5.0 (Gutenberg), il existe également des blocs pour le nouvel éditeur à Advanced Custom Fields .

Le FAC Plugin est actuellement actif sur plus d'un million de sites web. Il est testé de manière très intensive et fonctionne parfaitement avec la dernière version WordPress . Il est également impressionnant de constater que le site Plugin a déjà reçu plus de 1 000 évaluations avec 5 étoiles. En revanche, il n'y a que 16 évaluations avec une seule étoile - probablement des utilisateurs qui ont abandonné après une (très) courte période.

Avec un tel Plugin , c'est clair : il faut un peu de temps et de patience jusqu'à ce que vous compreniez la demande. Bien sûr, je n'ai fait qu'effleurer la surface de Advanced Custom Fields . Je veux juste dire qu'il y a d'autres Plugins que vous installez et qu'ils fonctionnent confortablement en arrière-plan - c'est différent avec ACF. Vous devez concevoir activement et voir le lien global entre la base de données, le backend et le frontend.

Ce qui est également indispensable pour ce Plugin, qui est assez technique : le support.

Je n'ai pas encore eu à 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 Custom Post Types ?

J'ai mentionné plus tôt que la conception active est nécessaire. Cela signifie également que, dans certains cas, ces informations ne vous sont pas d'une grande utilité sur le site Advanced Custom Fields . Ce n'est qu'en combinaison avec les types de poste sur mesure que vous obtenez plus d'options.

Tout d'abord, la question se pose : qu'est-ce qu'un type de poste (normal) ?

Les deux plus populaires sur WordPress sont les pages et les articles de blog. Ainsi, pour chaque nouveau contenu à créer pour un site web, vous décidez quel type d'affichage est le plus approprié. Cela dépend de plusieurs facteurs, notamment de la manière dont vous souhaitez que les informations soient visibles et des champs dont vous avez besoin pour les consulter en arrière-plan.

Mais qu'en est-il lorsque vous souhaitez fournir un contenu qui ne peut être couvert par une page ou un billet ordinaire ?

Vous l'avez peut-être déjà deviné : il vous faut une nouvelle façon d'entrer le contenu dans le back-end. Quasi un masque de saisie avec exactement les champs dont vous avez besoin. C'est ce que Advanced Custom Fields peut vous offrir. Le site Plugin mentionné ci-dessus vous permet de définir et de créer ces champs confortablement dans le backend. Une fois cette structure mise en place, l'étape suivante vient.

advanced custom fields propres champs
Dans le backend de l'ACF Plugins , vous pouvez facilement définir des champs.

C'est à ce moment que les types de poste personnalisés entrent en jeu. Il est très important de savoir qu'il est logique de créer un type de message personnalisé pour l'utilisation de Advanced Custom Fields . Dans mon cas, j'appelle le Custom Post Type (CPT) simplement thérapeute.

Bien entendu, vous pouvez également programmer vous-même le type de poste personnalisée. Toutefois, j'ai utilisé pour cela le site Plugin "Custom Post Type UI", que j'expliquerai plus en détail dans la section suivante.

création d'un type de poste personnalisé
Voici à quoi ressemble l'arrière-plan du site Plugins "Custom Post Type UI".

Interface utilisateur de type "Custom Post" : gratuite Plugin, la deuxième

Si vous n'avez pas encore trouvé de solution magique avec le seul Advanced Custom Fields (ACF), voici le meilleur : ACF en combinaison avec Custom Post Type UI, court CPT UI.

Cela vous permet d'afficher le contenu de la base de données directement dans le frontend, comme vous le souhaitez. Dans mon cas, j'ai été confronté au défi de vouloir construire un filtre de recherche avec différents champs. J'ai donc dû d'abord télécharger toutes les données vers le back-end en utilisant une importation CSV.

Ensuite, j'ai construit la base de la recherche de filtre dans le frontend avec l'aide du Custom Post Type et du Advanced Custom Fields . Vous en saurez plus dans la section suivante.

combinaison personnalisée de type post acf
Par exemple, votre nouveau type de courrier personnalisé pourrait ressembler à ceci.

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

Voilà pour l'instant pour le backend. Il est maintenant temps de passer au front. Vous pouvez donc appliquer l'ensemble et utiliser le site Advanced Custom Fields pour votre cas particulier.

J'ai utilisé l'ACF pour construire une recherche personnalisée avec des critères de filtrage. Cependant, comment est-il possible de présenter le contenu du backend de manière élégante dans le frontend afin que l'interaction de l'utilisateur soit possible ?

Là encore, vous avez le choix entre le développer vous-même et utiliser Plugin. J'ai longtemps cherché une bonne petite aide et j'ai finalement trouvé "Search & Filter Pro" (est lié à la fin du texte).

Cela me donne un moyen ingénieux d'utiliser les données disponibles dans le backend pour les afficher dans le frontend. Dans mon exemple, ce sont les suivantes :

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

En arrière-plan, cela peut ressembler à ceci :

recherche et filtrage pro backend
Avec le Plugin "Search & Filter Pro", vous pouvez créer une recherche individuelle avec des critères de filtrage.

Ensuite, vous pouvez utiliser un raccourci pour insérer le filtre de recherche que vous venez de créer n'importe où dans le backend (sur une page, par exemple).

Vous verrez cependant que cela restera alors un peu peu inintéressant. J'ai amélioré cela par quelques poignées CSS et je trouve que le résultat dans le frontend est tout à fait respectable :

exemple pratique acf

Liens supplémentaires

Je suis impatient de voir ce que je pourrai mettre en œuvre avec Advanced Custom Fields à l'avenir. Vous avez des questions ou des commentaires sur cet article ? Si c'est le cas, je suis heureux de recevoir de nombreux commentaires.

Image : Shane Aldendorff | Unsplash

Michael Hörnlimann, né en 1991 à Zurich, aime la nature et la bonne nourriture. Depuis avril 2018, il travaille exclusivement de manière indépendante et crée des sites web WordPress pour le compte de clients. Depuis lors, il combine le travail avec sa grande passion, les voyages dans des pays et des cultures étrangères. Il vit et travaille de manière indépendante, parfois dans les montagnes, parfois au bord de la mer.

Articles connexes

Commentaires sur cet article

Laisse un commentaire

Ton adresse électronique ne sera pas publiée. Les champs obligatoires sont marqués d'un *.