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

• Étape 1 : Installation de Advanced Custom Fields
• Étape 2 : Créer un Groupe de Champs
• Étape 3 : Ajouter des champs dans votre groupe
• Étape 4 : Assigner le groupe de champs et paramétrer les options

Partie 2 : Comment afficher les Customs Fields dans votre site

• Option 1 : dans une Template de Page
• Option 2 : dans un Type de Post customisé
• Option 3 : dans une Catégorie d’article spécifique

 

 

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.

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

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…

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).

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

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

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. 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

1. 1. Terminez par l’enregistrement du fichier et par son envoi dans votre thème au même niveau que le fichier PAGE.PHP
   2. À 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).

1. 1. 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 !

 

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. 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.

1. 1. Cliquez ensuite sur ADD/EDIT POST TYPES
   2. 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 ( _ ).
   3. Dans les ADDITIONAL LABELS, vous pourrez renseigner toutes les informations qui seront utilisées dans votre panneau d’administration.

1. 1. 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.

1. 1. 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.

Étape 2 : assigner ACF au nouveau Custom Post Type

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

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. 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.

1. 1. Vérifiez, côté visiteur, le rendu visuel que vous devrez certainement améliorer pour le rendre plus “sexy”.

 

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. 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.

1. 1. 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.

1. 1. 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”).
   2. 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.

 

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 !