Tout savoir sur WordPress
Tutoriel WordPress

Transformer WordPress en un puissant CMS avec Advanced Custom Fields

Cet article s’adresse aux débutants comme aux développeurs confirmés.
Wordpress est un fabuleux outil de publication. Simple, efficace et performant. C’est mon préféré parmi les CMS de tête, devant Drupal et Joomla. Cependant Wordpress souffre du fait que c’est à la base un système de publication de blog, que nous utilisons aujourd’hui comme éditeur de sites.

Ce qui fait défaut selon moi est le fait qu’on ne puisse pas faire d’interfaces avancées car WordPress ne propose par page qu’un seul champ de contenu : l’éditeur visuel WYSIWYG.

C’est là qu’intervient ACF

Développé par Eliott Condon, Advanced Custom Fields est un plugin WordPress qui permet d’ajouter à une page, un template ou un article des champs personnalisés très variés :

  • Champ de texte
  • Editeur WYSIWYG avec import de média
  • Champ d’image
  • Champ de fichier
  • Lien vers un article
  • Sélection d’autres articles (articles liés)
  • Galerie d’image (pour faire une galerie ou un slider)
  • Champ répéteur
  • Relation vers un autre article
  • Champ date
  • Champ couleur

Cela permet de transformer WordPress en un vrai CMS et réaliser des mises en pages plus complexes et variées.

design

Vous réalisez par un exemple un site de voyage dans lequel votre client vous demande de pouvoir mettre : un slider de photos, une description, des onglets d’informations, les dates de départ, les tarifs et un bouton pour télécharger . Vous pourrez difficilement réaliser ceci avec WordPress nativement.

Les avantages

Je ne vois que des avantages à ce plugin

  • Le plugin est gratuit
  • La mise en place des champs se fait par simple glisser déposer .
  • Le code PHP à insérer dans le thème est ultra simple. La documentation sur le site officiel étant très bien réalisée.
  • C’est accessible à un non développeur
  • Le plugin est parfaitement bien intégré à WordPress et sa logique

ACF utilise simplement le système de custom fields déjà intégré à WordPress, mais ajoute son lots de fonctionnalités, avec une ergonomie et une intuitivité poussée.

Comment fonctionne ACF ?

Côté panneau d’administration

Premièrement, vous définissez un groupe de champs via le menu ACF.

groupe-champs

 

Dans ce groupe vous ajoutez des types de champs (par exemple un champ texte, un champ image et un champ fichier)

vous allez ensuite rattacher ce groupe à une page, un article, un type de publication, un template de page … Par exemple vous définissez : Afficher ce groupe de champs dans les articles du blog, ou encore Afficher ce groupe de champs sur le modèle de page « Contact ».

Lorsque vous irez sur la page concernée, les champs apparaitront en dessous de l’éditeur visuel (que vous pourrez masquer pour l’occasion).

les-champs-acf

 

Côté Thème

Pour afficher les informations issues d’ACF, une à quelques lignes suffisent. Reportez-vous à la documentation ACF sur le site officiel, rubrique « Documentation », c’est très clair.

Vous aurez une aide pour chaque type de champs. Par exemple, pour afficher le contenu d’un champ texte, utilisez simplement la fonction

<?php the_field('nom_du_champ'); ?>

Pour les images vous récupérez un tableau qui contient : le titre l’image, et les urls de toutes les tailles.

C’est si simple et si puissant que je ne peux plus m’en passer.

Add-ons du plugin

En bonus, on a droit à des plugins dans le plugin, qu’on appelera add-ons. Eux sont payants, pour un montant de 25$ chaque add-on, paiement une fois pour une utilisation illimitée. Ces add-ons sont :

  • Galerie : permet de faire facilement une galerie photo, ou un slider. La personne pouvant choisir dans quel ordre apparaissent les photos en les glissant
  • Répéteur : permet de créer un sous-groupe de champs que l’on peut répéter autant de fois que lon veut
  • Options : permet de créer une page d’options puissante, comme pour les thèmes que l’on trouve sur themeforest entre autres
  • Flexible content : permet de générer soi même le layout des pages

Télécharger Advanced Custom Fields

Vous trouverez naturellement le plugin sur le repository de plugins WordPress (depuis votre panneau d’administration allez dans Extensions > Ajouter et cherchez ACF, ou depuis le site officiel :

advancedcustomfields.com

Cet article a été mis à jour il y a 1788 jours - Il n'est peut être plus à jour !

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.

18 Commentaires

  1. Bonjour Maxime

    Merci pour ce super article !
    Que conseilles-tu pour mener des recherches suite à l’utilisation d’ACF ?
    → Relevanssi fonctionne, mais offre un simple champ de recherche pas assez développé
    https://wordpress.org/plugins/relevanssi/
    → WPQSF pourrait convenir, mais ne lit pas les custom fields de ACF
    https://wordpress.org/plugins/ultimate-wp-query-search-filter/installation/
    WP Ultimate Search serait LE super outil pour cela, cependant le développement a cessé depuis Août et la version Pro laissé maintenant en Free est bugée.
    https://mindsharelabs.com/support/topic/beta-version-with-all-premium-features-free/

    Je ne saisi pas pourquoi un tel plugin d’une telle qualité ne vient pas avec une solution de recherche intégrée packagée.

    Merci à toi Maxime !!

    • Salut Fabrice ! Tu viens au WordCamp ? Il y aura justement une conf sur relevanssi !
      Perso je n’ai pas eu besoin de faire des recherches poussées sur les champs ACF, sauf une fois pour un site immobilier ou j’ai fait un moteur de filtre avec des WP query à la main. Et encore la plupart des filtres étaient des Taxos. Y’a un plugin pour ça qui le fait bien maintenant.

    • hummm…WP Query à la main..easy ! :(
      CQFD : il y a vraiment un truc qui manque dans ACF. On ne conçoit pas une bibliothèque de conception facile sans possibilité de rechercher des ouvrages (à moins qu’on ne soit bibliothécaire confirmé ayant en tête toute la classification décimale de Dewey pour identifier tous les ouvrages d’après leurs références, ce qui n’est pas nécessairement le cas de tous les visiteurs).
      Bien dommage !
      PS : pour le WordCamp, j’voudrions bien mais mon planning ne me le permet point.

    • Le but d’ACF n’est pas de chercher dans ses données, auquel cas les taxonomies seront plus adaptées pour être recherchées en terme de performance. Ca me parait du coup normal de ne pas avoir d’options de recherches là dessus, de toutes manière WordPress, par sa conception, est assez lourd sur les query visant les custom fields. Je pense que tu devrais essayer de mettre en taxonomies tout ce qui est filtrable / cherchable

  2. Bonjour,
    Je commence à m’intéresser à ce plugin que j’ai installé, et paramétré tous les nouveaux champs. Maintenant j’en suis à l’étape pour les faire apparaitre dans les articles, mais je n’arrive pas à trouver le fichier single.php qu’il faut modifier. Y a-t-il un tuto qui explique en détail comment procéder ? Malhereusement je suis encore un peu mal à l’aise avec worpress alors je tatonne pas mal…

    • Salut,

      ACF est super, tu verras. Par contre il serait mieux que tu connaisse un minimum PHP avant de modifier un thème. Tu trouveras les fichiers de ton thème (dont single.php) dans wp-content/themes/nomDeTonTheme/single.php. Suis la doc de ACF pour ajouter les bonnes lignes et ça devrait fonctionner !

    • Je reviens très longtemps après ma question, mais merci beaucoup pour la réponse!
      Du coup, si on utilise par exemple ACF pour créer un mini annuaire de salles (c’est un exemple hein), et que je met un champ personnalisé « ville » dans un article « salle », une fois tous les articles « salles » publiés, comment je trie pour avoir un affichage par « ville » ? Est-ce que les champs sont considérés comme des tags ?

  3. Bonjour,
    Je ne trouve pas si simple que ça le plugin, surtout la partie code à mettre dans un fichier, je dois créer des sortes de fiches sur des personnes, cela doit ressembler comme à la page contact par exemple
    Nom
    et en dessous le champ où apparait le nom
    si j’utilise le code que vous donnez, n’importe quel visiteur peut modifier le champ, pas bon du coup.
    puis j’aimerai avoir des champs comme téléphone, e-mail à gauche et en face à droite spécialité par exemple, je ne vois pas comment faire.

    • Bonjour,
      il faut un minimum de bases de PHP + theming WordPress je pense pour que ça ne soit pas trop compliqué.
      Mon code ne permet pas à une personne non connectée de modifier son contenu, seul l’admin le peut (ça utilise simplement les custom fields de WordPress)
      Pour ajouter des champs comme téléphone, mail, tu les ajoutes dans l’admin via ACF dans un groupe de champ que tu lies à ton ton type de post (personnes par ex). Quand tu ajouteras une personne les champs téléphone / mail etc apparaitront en dessous de l’éditeur visuel, remplis-les. Dans le template (single-personne.php) tu affiches là o tu as besoin avec the_field(‘contact’) … the_field(’email’)…

  4. Bonjour,

    Je souhaite créer un custom post type « personne » ou j’y renseignerai avec des ACF les noms, email et une checkbox pour les pays associés à cette personne.
    Cependant, c’est la que je suis bloquée, je souhaite créer un formulaire de contact permettant, lorsque l’on clique sur un pays (ex: Italie) d’envoyer le mail à la personne qui s’occupe de ce pays.
    Du coup, je ne sais pas comment lier l’ensemble, que des pays soient associés à des personnes, qui elles même sont associées à une adresse mail.

    J’espère que vous pourrez m’aider,

    Merci

    • Salut,

      En effet c’est pas évident à faire. As-tu regardé gravity forms ? car il y a une fonctionnalité pour le routage, mais pas sûr que ça aille aussi loin. Sinon essaye de trouver un hook avant l’envoi du mail pour en changer son destinataire. Bon courage en tous cas

    • Je ne pense pas que je puisse, mais je vais re regarder pour être sur.
      J’aurai bien fait mon formulaire à la main mais je ne sais vraiment pas comment relier l’ensemble. Je n’ai rien trouvé sur internet, personne pour m’aider. Je commence à baliser… c’est pour mon entreprise et c’est impératif…

    • Dans ce cas code le formulaire à la main oui. Une fois que tu traite le formulaire tu regarde le choix et tu fais ta requête ACF pour récupérer les infos. A la limite code ta fonction de traitement de formulaire sous forme d’un plugin. WordPress te fourni une fonction mail pour gérer l’envoi, c’est toujours ça de gagné.

    • Je n’ai jamais créer de plugin, hormis ça, comment est-ce que je fais pour que si je choisi la « France », on puisse associer ce pays à la personne correspondante et donc son adresse mail. Mon problème c’est que je ne vois pas comment faire pour tout associer. Tu n’aurais pas un lien ou un tuto pour m’aider ? Je suis désolé mais c’est la première fois que je développe quelques chose d’aussi complexe.

    • Du coup en effet c’est délicat car tu as besoin de quelque chose de très très spécifique, donc ça demande forcément une solution sur mesure. A mon avis tu as meilleur compte à penser le problème autrement et tirer parti de Gravity Form : tu remplis ces informations directement dans l’éditeur de formulaire au lieu d’un CPT et ACF et tu actives le routage : si l’utilisateur choisi France, alors ça enverras vers telle personne, etc … Ca devrait résoudre ton souci

    • Tu veux dire comme ca ?
      Pays
      [select* pays
      « France|adress1@mail.fr »
      « Espagne|adress2@mail.fr »
      ]

      Ca fonctionne (avec contact form 7) mais j’aurai voulu que ça soit administrable plus facilement pour que quelqu’un qui n’y connait rien puisse modifier facilement. Sachant en plus que je vais devoir mettre tous les pays + tous les départements de france.

      J’avais espérer trouver une autre solution.
      Merci beaucoup en tout cas !!

    • Oui voilà, c’est bien comme ça. C’est clair que c’est pas top pour administrer mais j’ai pas d’autre solution « simple » pour le moment

62405b8f8936cfadc1e47ebb2726ac3cu