3 façons d’utiliser Advanced Custom Fields pour WordPress

Le plugin Advanced Custom Fields est un puissant outil gratuit et intuitif qui permet de rajouter des champs spéciaux et récurrents à vos posts WordPress. Selon le thème de votre blog ou de votre site, vous pourriez avoir besoin de ces fameux champs qui rendront votre WordPress totalement unique...

Généralement "réservé aux développeurs", je vous propose de découvrir trois façons simplissimes de l'utiliser. Pour cela, nous verrons:

Partie 1 : Comment paramétrer ACF

Partie 2 : Comment afficher les Customs Fields dans votre site

 

Advanced Custom Fields Plugin WordPress

 

Partie 1 : Paramétrer Advanced Custom Fields

Dans un premier temps, on va se focaliser sur le plugin Advanced Custom Fields et créer nos différents champs en seulement quatre étapes :

Étape 1 : Installation de Advanced Custom Fields

La première des choses à faire sera de l'installer dans votre site WordPress.

Installer le plugin Advanced Custom Fields

Pour cela, rendez-vous dans l'onglet EXTENSION de votre back-office, cliquez sur AJOUTER et recherchez Advanced Custom Fields. Étant donné qu'il en existe plusieurs, sélectionnez celui de Elliot Condon. Ensuite, cliquez sur INSTALLER MAINTENANT et activez-le.

Étape 2 : Créer un Groupe de Champs

Créer un groupe de champs avec ACF

Une fois installé, vous retrouverez ACF dans votre menu de gauche. Allez à ACF > GROUPE DE CHAMPS > AJOUTER. Dans le cas pris en exemple, j'ai ajouté un groupe de champs nommé "Bien Immobilier".

Étape 3 : Ajouter des champs dans votre groupe

Advanced Custom Fields propose une quantité considérable de champs différents auxquels vous pourrez faire appel dont les champs TEXTE, MAIL, MOT DE PASSE, IMAGE, LISTE DE CHOIX, GOOGLE MAP etc...

Les différents types de champs ACF

Vous pourrez alors associer les différents champs au groupe créé à l'étape 2 en cliquant sur le bouton "+ AJOUTER". Veillez à bien suivre les différentes instructions. Une fois, le champ renseigné, vous pouvez cliquer sur FERMER LE CHAMP puis en ajouter un nouveau si besoin. Vous pouvez créer un nombre illimité de champs. Dans mon exemple, j'en ai créé six (photo, prix, surface, arrondissement, nombre de pièces et description).

Créer les différents champs

Étape 4 : Assigner le groupe de champs et paramétrer les options

Parametrer les nouveaus type de champs ACF
Maintenant que vos champs sont créés, vous allez choisir les endroits où les faire apparaître. Il s'agit ici de l'affichage du côté de l'administrateur dont dépendra ensuite l'affichage du côté visiteur, comme nous le verrons par la suite (Partie 2)...

L'onglet ASSIGNER CE GROUPE DE CHAMPS vous permet de donner des conditions simples ou multiples par le biais de menus déroulants. Cela va vous permettre de décider si vous voulez que le groupe de champs apparaisse sur un article, sur une page etc... Vous pouvez rajouter des règles grâce aux boutons ET et OU. Dans le cas de mon exemple, j'ai assigné le groupe de champs à une TEMPLATE DE PAGE spécifique que j'ai nommé IMMOBILIER et dont nous allons voir la procédure à suivre (Partie 2 - Option 1).

L'onglet OPTION vous permet de paramétrer le numéro d'ordre, la position dans votre post côté backoffice, le style et les champs à masquer.

Pour finir, n'oubliez pas de cliquer sur PUBLIER comme vous avez l'habitude de le faire pour une page ou un article.

Partie 2 : Afficher les Customs Fields dans votre site.

Une fois que la création de vos Customs Fields est terminée, vous serez naturellement tenté de vous rendre dans votre nouvelle page ou nouvel article afin de renseigner tous vos nouveaux champs... Malheureusement vous risqueriez d'être déçu ! En effet, pour l'instant vous les avez seulement créés, il va falloir maintenant les rendre visibles côté visiteur.

Pour y parvenir, vous aurez besoin de créer un fichier à l'aide d'un éditeur de texte tel que Sublim Text par exemple. Vous pourrez nommer ce fichier comme bon vous semble, pour mon exemple, je l'ai nommé CONTENT-IMMOBILIER.PHP

Créer un fichier de contenu

Ce fichier devra comporter :

  • les balises PHP incluant la fonction GET_FIELDS comme le démontrent les lignes 1 à 11 de la capture d'écran ci-dessus
  • les balises HTML (lignes 13 à 26) qui vous permettront d'ordonner votre contenu. Pour mon exemple, j'ai mis une balise de titre (<h1>), une balise d'image (<img>), une liste (<ul>) et quelques paragraphes (<p>)
  • les fonctions PHP de ACF nommées "the_field" qui vous permettront d'insérer chaque champ créé précédemment. Typiquement, vous les insèrerez au sein de vos balises HTML de la manière suivante : <h1><?php the_field('nom_du_champ'); ?></h1>. Pour en savoir plus, consultez les ressources d'ACF

Ensuite, vous n'aurez plus qu'à sauvegarder votre fichier et l'envoyer dans le dossier de votre thème via FTP.

Note : afin de mieux customiser le rendu visuel final, vous pouvez rajouter des classes à vos balises  HTML que vous utiliserez dans votre fichier style.CSS par la suite.

À présent que vos Customs Fields et le "fichier de base" sont créés, nous allons voir trois façons différentes de les faire apparaître dans votre site :

Option 1 : dans une Template de Page

Une Page Template, ou Modèle de Page en français, est un type de page spécifique qui se traduit par une présentation différente des autres pages de votre thème. Si vous utilisez un thème premium, il se pourrait bien que celui-ci propose deux ou trois modèles différents. On trouve souvent des modèles spécifiques pour la page d'accueil et/ou la page de contact... Mais saviez-vous que vous pouvez créer votre propre modèle de page en deux fois moins de temps qu'il n'en faut pour le dire ? Je vous propose, ici, de créer un modèle de page spécifique pour y faire apparaître vos Advanced Custom Fields :

  1. Rendez-vous dans le dossier de votre thème (via FTP) afin d'y trouver le fichier nommé PAGE.PHP.
  2. Dupliquez-le et renommez-le en PAGE-IMMOBILIER.PHP par exemple.
  3. À l'aide d'un éditeur de texte, modifiez les lignes comprises entre /* et */ situées en haut du fichier juste en dessous de la balise <?php : ici, remplacez le contenu par Template Name: IMMOBILER. En savoir plus sur la HIERARCHIE DES FICHIERS MODELES, les PAGES et les PAGES TEMPLATES
  4. Mais également la ligne get_template_part( 'template-parts/content', 'page' ); par get_template_part( 'content-immobilier' ); . En savoir plus sur la fonction GET_TEMPLATE_PART
  5. Créer une nouvelle template de page

  6. Terminez par l'enregistrement du fichier et par son envoi dans votre thème au même niveau que le fichier PAGE.PHP
  7. À présent, retournez dans le back-office de votre site, ajoutez une nouvelle page qui devrait vous permettre de régler le MODELE sur IMMOBILIER (voir dans l'onglet ATTRIBUT DE LA PAGE de la sidebar située sur la droite) comme vous pouvez le voir dans la capture d'écran ci-dessous. Les Customs Fields vont alors apparaître sur votre page à l'endroit où vous l'aurez paramétré lors de la Partie 1 - Étape 4 (onglet OPTION > POSITION).
  8. Paramétrer la page côté admin

  9. Une fois votre page publiée, vous pourrez alors vous rendre côté visiteur afin de vérifier l'affichage des Custom Fields. À partir de là, tout n'est qu'une question de HTML et de CSS pour rendre votre page un peu plus attrayante !
  10. Rendu visuel côté visiteur

 

Option 2 : dans un Type de Post customisé

Par défaut, WordPress offre quatre types de post, à savoir : les POSTS (articles), les PAGES, les ATTACHMENTS et les REVISIONS. Cependant, cela peut paraître limité selon le type de site que l'on veut construire. Selon votre activité ou votre passion, vous aimeriez peut-être créer de nouveaux types de contenus que vous voudriez différencier de vos pages et de vos articles, par exemple : un portfolio, des annonces, des promotions, des recettes, des tests de produits etc... Je vous propose de découvrir comment créer vos propres types de contenu afin d'y faire apparaître vos Advanced Custom Fields :

Étape 1 : créer un Custom Post Type

Cette manière nécessite l'installation et le paramétrage du plugin CUSTOM POST TYPE UI (CPTUI). Ce plugin, proposé par WebDevStudio, est gratuit et idéal pour rendre votre site totalement unique. Custom Post Type UI et Advanced Custom Fields sont totalement compatibles et complémentaires bien qu'ils puissent être utilisés indépendamment l'un de l'autre.

CPTUI permet, entre autre, de créer de nouveaux types de post et de taxonomies et je vous propose de survoler rapidement la manière de l'utiliser :

  1. Tout d'abord, vous installerez le plugin puis vous l'activerez. Ensuite, dans votre panneau d'administration, vous retrouverez le menu CPT UI qui vous permettra de commencer les réglages.
  2. Plugin Custom Post Type UI

  3. Cliquez ensuite sur ADD/EDIT POST TYPES
  4. Dans les BASIC SETTINGS, renseignez le POST TYPE SLUG, le PLURAL LABEL et le SINGULAR LABEL. Attention, suivez bien les recommandations inscrites dans chaque champ, cela est très important, surtout pour le POST TYPE SLUG qui ne doit pas contenir d'accentuation ou de numéro et dont les espaces doivent être remplacés par des tirets (-) ou des underscores ( _ ).
  5. Dans les ADDITIONAL LABELS, vous pourrez renseigner toutes les informations qui seront utilisées dans votre panneau d'administration.
  6. Setting CPTUI partie 1

  7. Dans l'onglet SETTINGS, vous pourrez paramétrer sur TRUE ou FALSE les diverses options sans oublier de cocher l'option SUPPORT : CUSTOM FIELDS. Enfin vous finirez par cliquer sur le bouton ADD POST TYPE situé tout en bas à gauche.
  8. Setting CPTUI partie 2

  9. Suite à la création du Post Type, vous obtiendrez un message de réussite et vous verrez apparaître un nouveau menu dans votre tableau de bord. Pour mon exemple, il s'agit de l'onglet ANNONCES.
  10. Custom Post Type ajouté

Étape 2 : assigner ACF au nouveau Custom Post Type

Parametrer ACF pour accueillir CPTUI

Maintenant que votre nouveau type de post a été créé via CPTUI, je vous invite à retourner dans le menu de Advanced Custom Fields afin de modifier l'assignation de votre groupe de champs (celui créé en Partie 1 / Étape 2 de cet article). Vous n'aurez plus qu'à rajouter une règle où le TYPE DE PUBLICATION est égal à ANNONCE_IMMOBILIERE (dans le cas de mon exemple).

Étape 3 : créer un nouveau fichier sur la base du SINGLE.PHP

Dupliquer le fichier single.php

  1. Rendez-vous dans le dossier de votre thème, repérez le fichier SINGLE.PHP que vous dupliquerez puis modifierez à l'aide d'un éditeur de texte.
  2. Nommez ce fichier SINGLE-le_nom_de_votre_post_type_slug.PHP : le POST TYPE SLUG est l'identifiant que vous avez renseigné lors de la création de votre Custom Post Type. Dans mon exemple, il s'agit de annonce_immobiliere.
  3. Remplacez simplement la ligne get_template_part( 'template-parts/content', 'page' ); par get_template_part( 'content-immobilier' ); (ligne 19 dans la capture d'écran ci-dessus).
  4. Renvoyez, via FTP, ce fichier dans votre thème au même niveau que le fichier SINGLE.PHP

Étape 4 : publiez une nouvelle annonce

  1. Retournez dans la partie ADMIN de votre site.
  2. Ajoutez une nouvelle ANNONCE comme vous le faites lorsque vous ajoutez un nouvel article.
  3. Renseignez les champs customisés créés avec ACF puis publiez.
  4. Créer une annonce avec CPTUI et ACF

  5. Vérifiez, côté visiteur, le rendu visuel que vous devrez certainement améliorer pour le rendre plus "sexy".
  6. Rendu visuel annonce côté visiteur

 

Option 3 : dans une Catégorie d'article spécifique

Il se pourrait bien que vous ayez besoin de champs personnalisés uniquement dans des articles ayant une catégorie spécifique. Par exemple, si vous êtes blogueur culinaire, vous pourriez avoir besoin de champs différents selon si vos articles sont dans la catégorie RECETTE ou dans la catégorie DEGUSTATION. Logique, non ? Je vous propose alors de voir comment afficher vos Advanced Custom Fields seulement dans une catégorie :

  1. Dans votre partie ADMIN, commencez par créer une nouvelle catégorie d'articles en allant à ARTICLE > CATEGORIE > AJOUTER (dans mon exemple, j'ai ajouté une catégorie nommée VENTES IMMOBILIERES).
  2. Retournez dans l'onglet ACF, donnez une nouvelle règle à votre groupe de champs où CATEGORIE est égal à VENTES IMMOBILIERE (dans le cas de mon exemple). N'oubliez pas de mettre à jour votre groupe de champs.
  3. Paramètres ACF selon catégorie

  4. Rendez-vous dans le dossier de votre thème, repérez le fichier SINGLE.PHP que vous modifierez à l'aide d'un éditeur de texte. Ne le dupliquez pas, on va seulement le modifier... Remplacez simplement la ligne get_template_part( 'template-parts/content', 'single' ); par if ( in_category('ventes-immobilieres') ) { get_template_part( 'content-immobilier' );} else { get_template_part( 'template-parts/content', 'single' );} comme vous pouvez le voir dans la capture d'écran ci-dessous. N'oubliez pas de l'enregistrer.
  5. Modifier le fichier single

  6. Enfin, créez un nouvel article depuis le back-office de votre site et affectez-lui la catégorie où les ACF sont assignés (dans mon exemple, il s'agit de la catégorie "vente-immobiliere").
  7. Rendez-vous côté visiteur pour vérifier que les champs ACF apparaissent bien dans l'article que l'on vient de créer. Comme vous pouvez le voir dans la capture d'écran ci-dessous, l'affichage est différent selon la catégorie de l'article.
  8. ACF selon un type de catégorie spécifique

 

En conclusion

Cet article n'est qu'un avant-goût de ce qui peut être réalisé à l'aide d'Advanced Custom Fields (et de  son association avec CPTUI). Le plugin étant très vaste et très malléable en fonctions des conditions et des créations qu'il suffit d'avoir un peu d'imagination pour l'utiliser à bon escient.

Cependant, pour ne pas alourdir les explications de ce tutoriel, j'ai volontairement omis de parler de la création nécessaire d'un thème enfant. En effet, vous n'êtes pas sans savoir que lorsqu'on modifie un thème, il est préconisé de placer les modifications dans un thème enfant, cela vous protégera de la perte de vos données lors d'une prochaine mise à jour !

 

A propos de l'auteur...

Lycia Diaz

Freelance WordPress, Rédactrice Web et Webdesigner, je suis passionnée par le monde du web et de l'environnement Apple... Je tiens également un blog qui traite de ces sujets. J'adore découvrir, tester et partager mes expériences mais aussi créer et réaliser de nouveaux projets ! Je suis auteure d'un guide complet sur WordPress.

6 commentaires pertinents à ce jour ;)

  • Aurélien Denis dit :
    Bonjour Lycia,

    tout d’abord merci pour ce tutoriel qui permettra aux utilisateurs qui ont envie d’aller plus loin avec WordPress de mettre les mains dans le code sans trop se casser la tête. :)

    Concernant l’affichage des données via la fonction the_field, il serait bon de la conditionner à chaque fois avec un if (get_field('nom_du_champ')) sous peine de se retrouver avec des balises HTML vides si aucune donnée n’a été saisie.

    A+

  • Lycia dit :
    Merci pour cette précision ! En effet, je n’en ai pas parlé…
  • Serge dit :
    Quel travail vraiment
    Merci beaucoup, je vais enregistrer cela dans Pocket pour le lire attentivement
    A chaque fois je suis surpris agréablement
    Continuez je suis fan
  • benoit dit :

    Comme le dis pourquoi s’embêter avec des balises potentiellement vide si le client ne remplis pas le champ et aussi pourquoi dupliquer les …
    alors que avec cette boucle tout se fait tout seul

    :

    Pour l’image un

    <img src=" » />

    Ce type de code est beaucoup moins contraignant à l’utilisation car si on ajoute un champ on est pas obligé de reprendre tous les templates

  • olivier532 dit :
    Bonjour, je souhaite faire un site un peu comme le bon coin (rien à voir évidemment) et j’aurais voulu savoir si c’est ce plugin qu’il me faut pour mettre des champs à remplir à disposition des gens et ce, de manière automatique ? En gros je prépare un template que les gens peuvent remplir eux même en fonction de leur localisation ?
    Merci d’avance,
    Cordialement,
    Olivier
  • Astral dit :
    Bonjour,

    Est-il possible de saisir, via un formulaire en ligne, les champs définis dans un groupe ACF. Je voudrais que l’internaute lui-même ajout le contenu dans les champs.

Et si vous donniez votre avis ?

Tweet39
Share41
Share13
Buffer2