Guide de démarrage d’Advanced Custom Fields (ACF)

Pourquoi utiliser Advanced Custom Fields ?

Je souhaite commencer en parlant de ma stupéfaction quand j’ai utilisé pour la première fois l’extension Advanced Custom Fields (ACF). Quand j’ai commencé à utiliser WordPress, j’ai compris comment retirer plus de ce que le module d’articles et des pages ont à nous offrir. Je me suis dit que j’allais donner des instructions spécifiques à mes clients concernant l’utilisation des catégories et des pages parentes de façon alambiquée. Puis, j’ai découvert les Custom Post Types et les consoles de gestion de contenu que j’offrais à mes clients sont devenues beaucoup plus simples.

Cependant, même avec des types d’articles différents, chaque contenu reste tout de même dans un canevas : titre, contenu, extrait, image à la une. Si j’ai à développer un module d’événements pour un client, ça l’exige obligatoirement une date de démarrage et des horaires. Pour une section « employés », nous aurons besoin de champs pour les adresses email et des titres. Les produits ont besoin d’un prix, d’une variation de couleurs et de tailles. Tous ces types de contenus demandent à WordPress d’aller au-delà d’une simple personnalisation des types d’articles.

Et les extensions dans tout ça?

Une solution pour cette problématique est de trouver une extension pour chaque type de contenu personnalisé dont vous avez besoin. Ex : installer WooCommerce pour les produits, The Event Calendar pour les événements, Meet My Team pour les employés, Soliloquy pour les slides et WPP pour les éléments d’un portfolio. Cela fonctionne pour beaucoup de gens : c’est plus rapide à développer, au début. Sauf que c’est beaucoup de plugins. Plus de plugins = moins de rapidité et plus de risque d’incompatibilité.

ACF Field Types

Advanced Custom Fields (ACF) est un plugin WordPress extrêmement puissant qui offre la possibilité d’attacher presque n’importe quel type de champ personnalisé à vos différents types d’articles.

Les types de champs inclus

L’extension ACF offre plus de 20 types de champs par défaut :

Texte : Un champ de texte d’une ligne unique, aide HTML optionnelle, limitation des caractères
Champ de texte : Un champ de texte de plusieurs lignes, aide HTML optionnelle, limitation des caractères
Nombre : Nombre, valeurs minimales/maximales
Email : Valide l’ajout d’une adresse email
Mot de passe : Masque le texte lors de l’entrée d’un mot de passe
Editeur WYSIWYG: Un bouton optionnel d’insertion d’images, des boutons d’édition basiques ou étendus
Image : Chargez une image ou sélectionnez-la dans votre bibliothèque WordPress, cela donne l’objet, l’url ou l’ID.
File : Chargez un fichier ou sélectionnez-le dans votre bibliothèque WordPress, cela donne l’objet, l’url ou l’ID.
Sélection : Affiche un menu déroulant, supporte la sélection multiple
Checkbox : Permet la sélection de multiples éléments dans une liste à cocher.
Bouton radio : Permet la sélection d’un élément unique depuis la liste du bouton radio
Vrai / Faux : Permet simplement de sélectionner Vrai ou Faux
Lien de la page : Donne l’URL de n’importe quelle page, peut être limité à un certain type d’articles
L’objet de l’article : Donne l’objet WordPress de n’importe quel article ou page, peut-être limité à un certain type de taxonomies d’articles
Relation : De la même façon que pour l’objet de l’article, mais avec une interface améliorée et un agencement intuitif de drag-and-drop.
Taxonomie : Donne l’objet ou l’ID d’un ou plusieurs termes de taxonomie, peut être limitée aux tags, catégories et taxonomies personnalisées
Utilisateur : Sélectionne un ou plusieurs utilisateurs, peut être défini selon les rôles
Google Map: Définit un point de longitude et de latitude, des niveaux de zoom et la largeur
Sélectionneur de date : Sélectionne une date de calendrier, et donne la réponse formatée en date
Sélectionneur de couleur : Sélectionne la couleur hexadécimale
Message : Pas d’options, laisse un message pour les utilisateurs
Tableau : Collecte les champs suivants dans une interface de tableau

Options de champs gratuites

L’extension WordPress et la page d’ACF ont un certain nombre d’options utiles pour l’extension. Ces options permettent à l’utilisateur de sélectionner un menu, sélectionner une colonne, sélectionner un formulaire Gravity Form, fusionner des groupes de champs complexes et importer des feuilles de calcul.

Options payantes pour d’autres types de champs plus avancés

Il y a certaines options d’ACF qui sont payantes et vraiment très utiles. La plupart coûtent 25 dollars et valent vraiment la peine.

Répéteur : Le champ répéteur d’ACF permet aux utilisateurs de développer des listes d’items complexes. Par exemple, un champ répéteur peut contenir un champ de texte, d’image, d’un WYSIWYG, permettant aux utilisateurs de créer une liste de « Services » avec une icône, un titre et une description.

Contenu flexible : Le contenu flexible permet aux utilisateurs d’établir des interfaces multiples (chacun fait de différents champs) qui peuvent ensuite être sélectionnées et utilisés dans n’importe quel ordre sur la page. Lisez ce tutoriel Snow Fall pour voir, en action, un exemple de champ de contenu flexible.

Page d’options : La page d’options permet aux développeurs de créer des pages d’options personnalisées dans le tableau de bord, ensuite d’y attacher n’importe quel champ personnalisé. Cela est très utile pour collecter les données, comme l’adresse de la société, les liens sur les réseaux sociaux, le numéro de téléphone ou les options de couleurs du thème WordPress que vous utilisé.

Attacher les groupes de champs au contenu

Les groupes de champs ACF peuvent être attachés au contenu selon n’importe quel critère : le type d’article, le template de la page, la page parente, la catégorie ou les tags de l’article, les taxonomies, les médias ou les utilisateurs.

Sur la page d’édition de contenu à laquelle est attachée le groupe de champs, il est possible de cacher n’importe quel élément par défaut de l’interface d’administration WordPress (l’éditeur wyzywyg, l’image à la une, tag, auteur, etc.) et le groupe de champ peut être placé en-dessous du titre, de l’éditeur ou de la colonne de droite.

Utiliser des champs ACF Fields dans les templates

ACF offre plusieurs fonctions PHP utiles pour inclure des champs de données personnalisés dans les fichiers du template WordPress. Les pages de documentation ACF contiennent de nombreuses informations utiles. Voici quelques unes des fonctions les plus utilisées.

get_field()

La fonction get_field('field_name', $post->ID, 'option') donne des contenus formatés des champs personnalisés dont le nom est devenu un paramètre. Un paramètre d’ID d’article est optionnel : si cette fonction est utilisée en dehors du loop ou pour des champs d’accès d’un autre article ou page, l’ID sera nécessaire. Si le champ se trouve sur une page d’options, il faut inclure 'option' dans la fonction.

Puisque la fonction renvoie des données, elle peut être assignée à une variable ou être affichée avec print ou echo.

if ( get_field('staff_image') ) :
the_field('staff_image');
endif;

Sous-champs

Si le champs personnalisé est un champ répéteur ou un champ de contenu flexible, utilisez get_sub_field() et the_sub_field() à la place. Les paramètres $post-ID et 'option' fonctionnent de la même manière.

Faire une boucle dans les champs

Pour faire une boucle dans toutes les rangées d’un champ répéteur ou d’un champ de contenu flexible, utilisez have_rows('field_name', $post->ID, 'option') et the_row(). Ces fonctions fonctionnent de la même façon que les fonctions loop de WordPress :

if ( have_rows('image_rows') ) :
while ( have_rows('image_rows') ) : the_row();
the_sub_field('row_icon');
the_sub_field('row_title');
the_sub_field('row_text');
endwhile;
endif;

Le champ de contenu flexible a différents lay-out. La fonction get_row_layout() donne le nom du lay-out utilisé dans la répétition du loop.

Conclusion

Il n’y a aucune limite dans l’utilisation d’Advanced Custom Field afin de rendre le CMS WordPress complètement personnalisé et adapté à vos clients. Ces champs peuvent être utilisés pour créer du contenu personnalisé très précis et sont imaginés de sorte que l’on crée des interfaces personnalisées complexes.