WPLake > Blog > Advanced Custom Fields : Guide complet
  • English
  • Deutsch
  • Español
  • Italiano

Advanced Custom Fields : Guide complet

Temps de lecture: 16 minutes

-

ACF Plugins Tutoriels

-

Mise à jour 06.10.23

Guide complet : fonctionnalités, installation pas à pas et aperçu de l'interface utilisateur. Apprenez les termes de base et les types de champs, et découvrez de puissants modules complémentaires.

Table des Matières

Le plugin Advanced Custom Fields (ACF) est un outil puissant conçu pour simplifier le travail avec les métas de messages intégrés de WordPress. Avec son histoire riche et une large base d'utilisateurs, ACF s'est imposé comme le plugin de référence pour les développeurs à la recherche d'un moyen efficace de personnaliser et d'améliorer leurs sites web. Dans cet article, nous allons explorer les fonctionnalités, le processus d'installation, l'interface utilisateur, les types de champs disponibles, les règles d'emplacement, les fonctionnalités supplémentaires, les options d'affichage et les modules complémentaires du plugin ACF, afin d'équiper les débutants avec les connaissances nécessaires pour exploiter son potentiel.

Introduction

#lien copié

ACF étend la fonctionnalité intégrée des postmétas de WordPress, vous permettant de gérer et de personnaliser sans effort n'importe quel type de données au sein de votre site web. Avec ACF, vous n'êtes plus limité aux champs par défaut fournis par WordPress. Au lieu de cela, vous pouvez facilement créer des champs personnalisés et les ajouter à vos articles, pages, types d'articles personnalisés, etc. Que vous ayez besoin de stocker des informations supplémentaires pour des produits, des événements ou des profils d'utilisateurs, ACF offre un moyen transparent et intuitif de gérer et d'organiser vos données personnalisées, ce qui vous donne la flexibilité nécessaire pour adapter votre site web à des besoins spécifiques.

Longue histoire

#lien copié

ACF a une longue histoire au sein de la communauté WordPress et a été publié il y a longtemps, en 2011. Les développeurs et les créateurs de sites web lui font confiance depuis des années pour améliorer les fonctionnalités de leurs sites WordPress. Grâce à ses performances fiables et à son développement continu, ACF a gagné une large base d'utilisateurs, ce qui en fait l'un des plugins les plus populaires disponibles aujourd'hui.

Avantages par rapport à la concurrence

#lien copié

Bien qu'il existe d'autres plugins sur le marché, tels que Pods, Meta Box, et Custom Field Suite, ACF se distingue par ses avantages distincts. L'un des principaux avantages d'ACF est sa vaste base d'utilisateurs (plus de 2 millions), qui se traduit par un meilleur support et une communauté florissante. Plus d'utilisateurs signifie plus d'idées, de corrections de bugs et d'améliorations de plugins.

ACF offre également une gamme de fonctionnalités plus large que ses concurrents, fournissant aux développeurs un ensemble complet d'outils pour personnaliser leurs sites web. Que vous ayez besoin de simples champs de texte, de galeries d'images ou de structures de données complexes, ACF vous couvre. L'interface intuitive et conviviale du plugin garantit que même les débutants peuvent naviguer à travers le processus de personnalisation avec facilité.

Documentation complète

#lien copié

De plus, la documentation d'ACF est très appréciée au sein de la communauté WordPress. La documentation claire et complète agit comme une ressource précieuse, guidant les utilisateurs à travers les fonctionnalités du plugin et les aidant à tirer le meilleur parti de son potentiel.

En résumé, les avantages d'ACF par rapport à ses concurrents résident dans sa large base d'utilisateurs, qui se traduit par un meilleur support et une amélioration continue, sa large gamme de fonctionnalités, son interface conviviale et sa documentation complète.

Capacités d'ACF

#lien copié

Le plugin Advanced Custom Fields s'est imposé comme un outil puissant et riche en fonctionnalités. Grâce à ses capacités étendues, ACF est devenu une ressource incontournable pour les développeurs, leur offrant des possibilités illimitées de personnaliser et d'améliorer leurs sites web. Les principaux points sont les suivants :

1. Champs personnalisés

#lien copié

L'un des principaux atouts d'ACF réside dans sa capacité à gérer les données personnalisées de manière transparente. Avec plus de 30 types de champs à votre disposition, vous pouvez capturer et afficher toutes les informations dont vous avez besoin. Par exemple, vous pouvez créer des champs pour recueillir des témoignages de clients, des spécifications de produits, des détails d'événements ou même des structures de données complexes. ACF vous permet de créer des galeries pour présenter une collection d'images, et le champ "répéteur" vous permet de créer facilement des listes dynamiques ou des données détaillées. Les possibilités sont vraiment infinies.

2. gestion du CPT et de la taxonomie

#lien copié

Depuis la version d'ACF 6.1, ACF vous permet d'enregistrer sans effort des Custom Post Types (CPT) et des Taxonomies. Cela signifie que vous pouvez définir et gérer différents types de contenu au-delà des articles et des pages traditionnels. Par exemple, vous pouvez créer un CPT "Portfolio" pour présenter vos projets ou un CPT "Recettes" pour partager vos créations culinaires. Avec ACF, vous avez la possibilité d'adapter la structure de votre site web à vos besoins spécifiques.

3. pages d'options

#lien copié

ACF va au-delà de la simple personnalisation des messages et des pages. Il vous permet de créer des pages d'options, qui servent de centres de gestion centralisée des paramètres de l'ensemble du site. Cette fonction est particulièrement utile lorsque vous devez configurer des paramètres globaux, tels que les couleurs du site, le logo, les liens vers les médias sociaux ou les scripts personnalisés. Grâce aux pages d'options d'ACF, vous pouvez rationaliser la gestion de ces paramètres, ce qui facilite le maintien de la cohérence sur l'ensemble de votre site web.

4. Blocs Gutenberg

#lien copié

Avec la montée en puissance de l'éditeur Gutenberg, ACF propose une intégration transparente grâce à sa fonctionnalité ACF Blocks. Les blocs ACF vous permettent de créer et d'ajouter des blocs Gutenberg personnalisés sans effort. Considérez ces blocs comme des éléments de construction pour le contenu de votre site web. Par exemple, vous pouvez créer un bloc personnalisé pour présenter un curseur de témoignage, une section d'appel à l'action ou une fonctionnalité mise en avant. Les blocs ACF constituent un moyen simple et intuitif d'étendre les capacités de l'éditeur Gutenberg, en vous donnant plus de contrôle sur le processus de création de contenu.

En plus des caractéristiques mentionnées, le plugin Advanced Custom Fields offre de nombreuses autres fonctionnalités, chacune constituant un outil précieux dans l'arsenal des développeurs web. De la logique conditionnelle à la mise en page flexible des groupes de champs, ACF vous permet de créer des sites web personnalisés et dynamiques.

En conclusion, le plugin Advanced Custom Fields est un trésor de possibilités pour les développeurs qui se lancent dans la création de sites web. Avec son large éventail de fonctionnalités, ACF est un outil fiable et polyvalent qui simplifie la personnalisation et ouvre la voie à d'innombrables possibilités créatives.

Basic vs Pro

#lien copié

Il est important de savoir qu'il existe deux versions : Basic et Pro. La version Basic possède toutes les fonctionnalités essentielles dont vous avez besoin et convient à la plupart des sites web. En revanche, la version Pro offre des fonctionnalités supplémentaires et une assistance personnelle.

Nous recommandons de commencer par la version de base, qui offre des fonctionnalités suffisantes pour de nombreux sites web. Si vous avez besoin de fonctionnalités plus avancées, vous pouvez facilement passer à la version Pro.

La bonne nouvelle, c'est que la migration de Basic à Pro se fait en douceur. Toutes les données que vous avez déjà créées à l'aide de la version Basic resteront intactes, ce qui garantit une transition en douceur, sans perte ni désagrément.

Ainsi, la version Pro d'Advanced Custom Fields offre plusieurs avantages par rapport à la version Basic. Ces avantages sont les suivants

1. Des types de champs supplémentaires

#lien copié

La version Pro introduit des types de champs supplémentaires tels que galerie, répéteur et contenu flexible.

  • Champ Galerie
    Le champ Galerie vous permet de créer des galeries d'images dans votre contenu. Vous pouvez facilement télécharger plusieurs images ou les sélectionner dans votre bibliothèque de médias, ce qui permet de présenter de manière attrayante des galeries de photos, des portfolios ou toute autre collection d'images.
  • Champ Repeater
    Le champ Repeater vous permet de créer des ensembles de champs répétitifs. C'est comme si vous aviez un mini-formulaire dans votre formulaire. Cette fonction est particulièrement utile lorsque vous devez collecter et afficher plusieurs instances d'un même type de données. Par exemple, vous pouvez créer un champ répétitif pour une section sur les membres de l'équipe, où vous pouvez ajouter plusieurs membres de l'équipe avec leurs informations respectives telles que le nom, la photo et le rôle. Le champ ACF Repeater vous permet de gérer facilement des structures de données répétitives.
  • Champ Contenu flexible
    Le champ Contenu flexible est une fonction polyvalente qui vous permet de créer des mises en page flexibles et personnalisables. Elle vous permet de définir différents ensembles de champs, appelés "mises en page", puis de choisir et d'organiser ces mises en page dans votre contenu. Cette flexibilité vous permet de créer des structures de page dynamiques avec différentes sections, telles que des bannières de héros, des blocs de texte, des galeries d'images ou tout autre module de contenu dont vous avez besoin. Le champ ACF Flexible Content vous permet de créer des mises en page de contenu hautement personnalisables et réutilisables sans aucune limite.

2. Blocs ACF

#lien copié

Les blocs ACF est une fonctionnalité puissante du plugin Advanced Custom Fields qui vous permet de créer des blocs Gutenberg personnalisés sans effort. Gutenberg est l'éditeur par défaut de WordPress, et les blocs sont les éléments de construction du contenu.

Avec ACF Blocks, vous pouvez concevoir et ajouter des blocs uniques adaptés aux besoins de votre site web. Ces blocs peuvent être utilisés à des fins diverses, comme des témoignages, des profils de membres de l'équipe ou des sections d'appel à l'action. Les blocs ACF s'intègrent parfaitement à l'éditeur Gutenberg, et vous pouvez facilement les ajouter, les personnaliser et les réorganiser.

La beauté des blocs ACF est que vous pouvez utiliser les champs personnalisés avancés pour définir et contrôler les champs de chaque bloc. Vous pouvez ainsi recueillir des données spécifiques pour chaque bloc à l'aide de champs personnalisés tels que des entrées de texte, des téléchargements d'images ou des listes déroulantes. Les blocs ACF offrent une grande flexibilité et une expérience d'édition conviviale.

3. Pages d'options

#lien copié

La fonction des pages d'options est très utile lorsque vous devez configurer des paramètres globaux, tels que les couleurs du site, le logo, les liens vers les médias sociaux ou les scripts personnalisés. Grâce aux pages d'options d'ACF, vous pouvez rationaliser la gestion de ces paramètres, ce qui facilite le maintien de la cohérence sur l'ensemble de votre site web.

Depuis la version 6.2, vous pouvez créer des pages d'options en utilisant l'interface utilisateur du plugin.

4. Soutien personnel

#lien copié

Avec la version Pro, vous avez accès au support prioritaire de l'équipe d'ACF. Ils sont réputés pour leur assistance rapide et utile, ce qui vous permet de recevoir des solutions rapides à tous les problèmes ou questions que vous pouvez avoir.

Installation

#lien copié

La version de base

#lien copié
  1. Accédez au répertoire des plugins WordPress : Rendez-vous dans la section "Plugins" de votre tableau de bord d'administration WordPress.
  2. Recherchez "Advanced Custom Fields" : Tapez "Advanced Custom Fields" dans la barre de recherche.
  3. Cliquez sur "Installer maintenant" : Localisez le plugin ACF dans les résultats de la recherche et cliquez sur le bouton "Installer maintenant".
  4. Activez le plugin : Une fois l'installation terminée, cliquez sur le bouton "Activer" pour activer le plugin ACF.

Félicitations ! Vous avez maintenant la version de base de Advanced Custom Fields sur votre site web.

La version Pro

#lien copié

Pour installer la version Pro, procédez comme suit :

  1. Achetez et téléchargez la version Pro : Visitez le site officiel d'ACF et achetez la version Pro. Téléchargez le fichier du plugin (généralement un fichier ZIP) sur votre ordinateur.
  2. Accédez au répertoire des plugins WordPress : Dans votre tableau de bord d'administration WordPress, naviguez jusqu'à la section "Plugins".
  3. Cliquez sur "Ajouter un nouveau" puis sur "Télécharger un plugin" : Cliquez sur "Add New" et sélectionnez le bouton "Upload Plugin".
  4. Télécharger la version Pro : Cliquez sur le bouton "Choose File" et sélectionnez le fichier ZIP du plugin que vous avez téléchargé. Cliquez ensuite sur "Installer maintenant".
  5. Activez le plugin : Une fois l'installation terminée, cliquez sur le bouton "Activer" pour activer le plugin ACF Pro.

Trouvez le nouvel élément "ACF" dans votre menu d'administration, et cliquez sur le sous-élément "Mises à jour". Sur la page "Mises à jour", entrez votre clé de licence pour débloquer les mises à jour automatiques.

Interface utilisateur

#lien copié

Termes de base

#lien copié

Lorsque vous commencez à utiliser le plugin Advanced Custom Fields, il est important de vous familiariser avec certains termes de base qui vous aideront à naviguer et à tirer le meilleur parti de ses fonctionnalités. Examinons ces termes de plus près :

  1. Groupe ACF
    Un groupe ACF est un conteneur qui contient une collection de champs apparentés. Il vous permet d'organiser et de regrouper des champs dans un but précis. Il s'agit en quelque sorte d'un dossier contenant divers fichiers liés à un projet spécifique. Par exemple, vous pouvez créer un groupe ACF appelé "Détails du produit" qui contient des champs tels que "Nom du produit", "Prix" et "Description".
  2. Champ ACF
    Un champ ACF représente un élément d'entrée ou de sortie spécifique qui capture ou affiche des données. Il définit le type de données que vous pouvez saisir ou récupérer. Vous pouvez assimiler un champ ACF à un champ de formulaire que vous rencontrez sur un site web, tel qu'une entrée de texte, un menu déroulant ou un téléchargement d'image. Chaque champ possède ses propres paramètres et configurations, ce qui vous permet de personnaliser son comportement et son apparence.
  3. Règles d'emplacement du groupe
    Les règles d'emplacement dans ACF déterminent où vos champs sont affichés dans la zone d'administration de WordPress. Ces règles définissent le contexte ou les conditions dans lesquelles vos champs seront visibles. Par exemple, vous pouvez définir des règles d'emplacement pour afficher certains champs uniquement sur des pages, des articles ou des types d'articles personnalisés spécifiques. Ainsi, vos champs apparaissent exactement là où vous en avez besoin, ce qui vous offre une expérience d'édition personnalisée.

Captures d'écran

#lien copié
Interface du groupe ACF. Elle contient la liste des champs du groupe et les paramètres du groupe, comme les règles de localisation.
Paramètres du champ ACF. Le premier onglet 'Général' contient les paramètres principaux du champ, comme le type, l'étiquette et le nom. D'autres, comme l'onglet "Validation", vous permettent d'exercer un contrôle souple sur le champ.
Outil d'enregistrement et de gestion des CPT de l'ACF. Depuis la version ACF 6.1, vous pouvez gérer vos CPT sans quitter le plugin.
Outil d'enregistrement et de gestion de la taxonomie ACF. Depuis la version ACF 6.1, vous pouvez gérer vos Taxonomies sans quitter le plugin.

Ainsi, les groupes ACF vous aident à regrouper des champs apparentés, les champs ACF représentent les éléments d'entrée ou de sortie individuels, et les règles de localisation garantissent que vos champs apparaissent au bon endroit et au bon moment. Ensemble, ces termes jettent les bases de la création et de la gestion de structures de données personnalisées avec facilité et efficacité.

Types de champs

#lien copié

Comme nous l'avons déjà mentionné, ACF dispose de plus de 30 types de champs, ce qui vous donne une flexibilité totale sur les formats de contenu.

Vous trouverez ci-dessous une liste des principaux types de champs, que vous utiliserez probablement le plus souvent ;

Basique

#lien copié
  • Texte
    Le type de champ Texte permet aux utilisateurs de saisir et de stocker du texte simple ou des caractères alphanumériques.
  • Nombre
    Le champ de type Nombre permet aux utilisateurs de saisir et de stocker des valeurs numériques, y compris des nombres entiers ou décimaux.

Contenu

#lien copié
  • Image
    Le type de champ Image permet aux utilisateurs de télécharger et de stocker des fichiers images, ce qui constitue un moyen pratique de gérer et d'afficher des images dans les champs personnalisés.
  • oEmbed
    Le champ oEmbed fournit un composant interactif pour intégrer des vidéos, des images, des tweets, de l'audio et d'autres contenus. Ce champ utilise la fonctionnalité native oEmbed de WordPress.
  • Galerie
    Le type de champ Galerie permet aux utilisateurs de créer et de gérer des galeries d'images en téléchargeant plusieurs images et en les organisant dans un ordre spécifique.
  • Lien
    Le type de champ Lien permet aux utilisateurs de saisir et de stocker des liens URL, y compris des adresses de sites web ou des liens internes/externes.
  • Fichier
    Le champ Fichier permet aux utilisateurs de télécharger et de stocker différents types de fichiers, tels que des documents, des PDF ou des fichiers multimédias.

Choix

#lien copié
  • Vrai/faux
    Le type de champ Vrai/faux fournit une case à cocher ou une option à bascule, permettant aux utilisateurs de sélectionner une valeur vraie ou fausse.
  • Select
    Le type de champ Select propose une liste déroulante ou une liste d'options prédéfinies, permettant aux utilisateurs de choisir une seule valeur parmi les options proposées.

Avancées

#lien copié
  • Google Map
    Le type de champ Google Map s'intègre à l'API Google Maps, ce qui permet aux utilisateurs de sélectionner et de stocker des emplacements géographiques sur une carte.
  • Post Object
    Le type de champ Post Object fournit une liste déroulante ou un champ autocomplet qui permet aux utilisateurs de sélectionner et de créer un lien vers d'autres articles ou pages du site WordPress.
  • Repeater
    Le type de champ Repeater permet aux utilisateurs de créer des ensembles de champs répétables, ce qui permet d'ajouter plusieurs instances d'un groupe de champs pour la saisie de données structurées ou l'affichage flexible du contenu.

Vous pouvez trouver la liste complète des types de champs pris en charge dans la documentation officielle.

Règles de localisation

#lien copié
Les règles d'emplacement dans les paramètres du groupe vous permettent d'"attacher" ce groupe à différents écrans d'administration.

Nous avons passé en revue les termes de base, et nous allons maintenant approfondir les règles de localisation. Grâce à ce paramètre, nous pourrons mieux comprendre les capacités de l'ACF.

Les règles d'emplacement déterminent donc l'endroit où les champs ACF seront affichés. Explorons les différentes options de règles d'emplacement disponibles dans ACF :

Localisations principales

#lien copié
  1. Page
    Vous pouvez attacher des champs ACF à des pages spécifiques de votre site WordPress. Cela signifie que vous pouvez créer des champs personnalisés qui ne sont visibles et modifiables que lors de l'édition de certaines pages. Par exemple, vous pouvez avoir un champ Fichier "Historique de l'entreprise" qui n'apparaît que sur la page "Accueil", ce qui vous permet de joindre un fichier unique pour la page d'accueil.
  2. Post :
    Comme pour les pages, les champs ACF peuvent être attachés à des posts individuels. Cela vous permet de personnaliser les données associées à chaque article séparément. Par exemple, vous pouvez avoir un champ "Classement" qui n'apparaît que lors de l'édition d'un article "Critique de film", vous permettant d'attribuer un classement à ce film spécifique.
  3. Custom Post Type :
    En plus des pages et des articles, les champs ACF peuvent être associés à des types d'articles personnalisés. Les types d'articles personnalisés permettent de créer des structures de contenu adaptées à vos besoins spécifiques. Par exemple, si vous avez une boutique WooCommerce et que vous utilisez le type d'article personnalisé "WooProducts", vous pouvez attacher des champs ACF à ce type d'article pour capturer des informations supplémentaires sur le produit comme le SKU, le prix ou les spécifications.

Emplacements supplémentaires

#lien copié

En plus des écrans d'administration des postes et des CPT, vous pouvez "attacher" votre groupe aux écrans suivants :

  1. User :
    Les champs ACF peuvent également être attachés à des profils d'utilisateurs, ce qui vous permet de collecter des informations supplémentaires sur les utilisateurs au-delà des champs standards de WordPress. Par exemple, vous pouvez créer des champs pour capturer des détails sur l'utilisateur, tels que sa désignation.
  2. Options (à l'échelle du site) :
    Les champs ACF peuvent être attachés à des options à l'échelle du site, ce qui signifie qu'ils seront accessibles et modifiables depuis n'importe quel endroit de votre site WordPress. Ces champs stockent des données qui s'appliquent globalement à l'ensemble du site web. Un exemple pourrait être un champ "Logo du site" qui vous permet de changer facilement le logo affiché sur l'ensemble de votre site.
  3. Taxonomie :
    Les champs ACF peuvent être associés à des taxonomies, qui sont utilisées pour classer et organiser le contenu. Par exemple, si vous avez une taxonomie "Catégorie de produit", vous pouvez ajouter des champs ACF à cette taxonomie pour capturer des informations supplémentaires spécifiques à chaque catégorie, telles qu'une description de la catégorie ou une image.

Qu'il s'agisse de personnaliser des pages, des articles, des types d'articles personnalisés, des profils d'utilisateurs, des options pour l'ensemble du site ou des taxonomies, ACF couvre tous les principaux aspects de WordPress, vous permettant de créer facilement un contenu personnalisé et structuré.

Fonctionnalités supplémentaires

#lien copié

En plus de ses fonctionnalités de base, le plugin Advanced Custom Fields offre plusieurs fonctionnalités supplémentaires qui améliorent ses capacités et le rendent encore plus polyvalent. Explorons ces fonctionnalités en détail ;

  1. CPT et Taxonomie gestion
    ACF simplifie le processus de création de types d'articles personnalisés (CPT) et de taxonomies dans WordPress. Les CPTs vous permettent de définir de nouveaux types de contenu avec leurs propres champs et caractéristiques. Avec ACF, vous pouvez facilement enregistrer des types d'articles personnalisés et les associer à des groupes de champs spécifiques, ce qui vous permet de personnaliser l'expérience d'édition pour chaque type de contenu. Par exemple, vous pouvez créer un CPT appelé "Témoignages" et ajouter des champs tels que "Nom du client", "Texte du témoignage" et "Évaluation".
  2. ACF Blocks
    Les blocs ACF offrent une intégration transparente entre ACF et l'éditeur Gutenberg de WordPress. Ils vous permettent de créer des blocs personnalisés avec des champs ACF, ce qui rend incroyablement facile l'ajout de contenu dynamique et personnalisé à vos pages et articles alimentés par Gutenberg. Les blocs ACF vous donnent la possibilité de construire des composants réutilisables qui peuvent être facilement ajoutés et modifiés à l'aide de l'éditeur de blocs. Par exemple, vous pouvez créer un bloc personnalisé pour une section "Appel à l'action" qui comprend des champs tels que "Titre", "Description" et "Texte du bouton".
  3. Pages d'options
    Les pages d'options ACF vous permettent de créer des pages de réglages globaux pour votre site WordPress. Ces pages d'options agissent comme un endroit centralisé pour gérer les réglages ou les configurations de l'ensemble du site. Elles vous permettent d'ajouter des champs qui contrôlent divers aspects de votre site web, tels que le logo du site, les liens vers les médias sociaux ou les scripts personnalisés. Les pages d'options ACF offrent un moyen convivial de gérer ces paramètres sans avoir besoin de coder. C'est comme si vous disposiez d'un panneau de contrôle vous permettant d'ajuster le comportement et l'apparence du site.

Aperçu des caractéristiques du CPT et de la taxonomie

#lien copié

Grâce à ces fonctionnalités, vous pouvez adapter la structure, le contenu et le comportement de votre site web à vos besoins, ce qui en fait un outil puissant pour les développeurs et les créateurs de contenu.

Vous pouvez regarder la vidéo sur les nouvelles fonctionnalités de gestion des CPT et des taxonomies ci-dessous.

Comment afficher les champs

#lien copié

Lorsqu'il s'agit d'afficher des champs créés avec le plugin Advanced Custom Fields, vous pouvez adopter plusieurs approches.

L'une des méthodes les plus élémentaires consiste à utiliser la fonction get_field(), qui est un moyen universel et flexible de récupérer et d'afficher les valeurs des champs. Cependant, elle exige que vous connaissiez les noms des champs et que vous traitiez correctement les types de retour en vous référant à la documentation d'ACF.

Pour simplifier le processus, nous pouvons utiliser un addon appelé Advanced Views. Cet addon est gratuit et propose des modèles intelligents pour afficher facilement le contenu. Nous l'utiliserons pour présenter les champs ACF, mais il prend également en charge les champs des messages et bien d'autres choses encore. Ce plugin permet de gagner du temps, car il génère automatiquement les balises HTML nécessaires en fonction des champs sélectionnés. Vous pouvez en savoir plus sur les avantages de ce plugin ici.

A) Utilisation de modèles intelligents

#lien copié

Précisons d'abord ce que nous entendons par "modèles" dans le contexte de ce plugin : Les modèles d'Advanced Views sont construits sur le moteur Twig. Vous vous dites peut-être : " Pas mal, mais il faut quand même récupérer des champs via PHP et écrire des balises à partir de zéro, sans parler de la lecture de la documentation Twig ".

C'est là que le plugin brille : "Smart templates". Cela signifie que nous n'avons pas besoin de récupérer des champs ou de créer des balises manuellement à partir de zéro. Le plugin fournit une base solide qui couvre la plupart des cas d'utilisation. Si nous avons besoin de quelque chose de spécifique, nous pouvons facilement le personnaliser. N'est-ce pas agréable ?

Pour suivre la procédure, installez le plugin Advanced Views sur votre site WordPress et n'oubliez pas de l'activer. Vous devez également installer et activer le plugin ACF (gratuit).

Voyons maintenant comment il fonctionne.

Le plugin introduit deux nouveaux Custom Post Types (CPT) : ACF View et ACF Card.

  • Vue pour les données de l'article et Advanced Custom Fields
    Nous créons une vue et assignons un ou plusieurs champs de messages, le plugin génère alors un shortcode que nous utiliserons pour afficher les valeurs des champs aux utilisateurs. Nous pouvons styliser la sortie avec le champ CSS inclus dans chaque vue.
  • Carte pour les sélections d'articles
    Nous créons une carte et y assignons des articles (ou des éléments CPT), nous choisissons une vue (qui sera utilisée pour afficher chaque article) et le plugin génère un shortcode que nous utiliserons pour afficher l'ensemble des articles. La liste des articles peut être assignée manuellement ou dynamiquement avec des filtres.

Le plugin nous offre la commodité de travailler avec les CPTs familiers de WordPress tout en se chargeant d'interroger et de générer automatiquement des modèles de balisage Twig.

Tout ce que nous avons à faire est de spécifier nos exigences, et nous recevrons un shortcode prêt à être placé n'importe où. Dans la version Pro, au lieu d'utiliser le shortcode, nous pouvons créer et utiliser un bloc Gutenberg (avec une simple bascule de case à cocher). Cette fonctionnalité est très précieuse si vous utilisez un thème basé sur des blocs.

Prenons un exemple pratique pour voir le plugin en action.

Étape 1. Création d'une vue

#lien copié

Lorsque vous avez activé le plugin Advanced Views, vous verrez un nouvel élément dans votre menu d'administration, appelé "Advanced Views".

Dans le sous-menu, il y a plusieurs éléments, mais nous n'aurons besoin que de celui appelé "Advanced Views".

ACF Views provides list management via the familiar interface.
Votre liste aura la même apparence, mais sans aucun élément de la vue.

Dans l'onglet Vues ACF, cliquez sur le bouton "Ajouter nouveau" pour créer une vue .

Note : Le terme "View" est le nom donné au type de message spécial fourni par le plugin. Chaque Vue est une liste de champs ACF à afficher, de sorte que vous pouvez avoir plusieurs Vues différentes pour afficher différents champs (ou ensembles de champs) pour différents articles/pages.

Donnez un nom à votre Vue. Il peut s'agir de tout ce qui décrit la vue . C'est le nom qui sera affiché dans la liste des vues , ce qui permettra de la trouver plus facilement. J'ai appelé ma vue "Image de côté de page".

Attribution de champs

#lien copié
ACF Views allow to assign multiple fields within your View.
Attribution de champs à la vue

Vous devez maintenant attribuer un nouveau champ à votre vue . Cliquez sur le bouton "Ajouter un champ" et sélectionnez votre "Groupe" dans la liste déroulante. Dans notre cas, le groupe s'appelle "Page fields". Sélectionnez ensuite le champ cible dans la liste. Dans notre cas, le champ s'appelle "Side image". (Remarque : le type de champ est indiqué entre parenthèses pour faciliter l'identification). Dans ce cas, vous devriez voir que le type est une "image", continuez à choisir une "Taille d'image" dans la liste des tailles disponibles, dans notre cas nous avons choisi "Pleine".

Chaque vue supporte un nombre illimité de champs ACF, mais dans notre cas, nous n'en utiliserons qu'un seul.

Cliquez sur le bouton "Publier" pour enregistrer et publier votre Vue. Une fois votre vue publiée, vous remarquerez que des codes courts ont été générés dans un bloc situé à droite de l'écran d'édition de votre vue. Chaque Vue a son propre shortcode avec un ID unique. La structure du shortcode est donc la même pour toutes les vues, mais les arguments sont uniques.

[acf_views view-id="xxxx" name="x"]

Cliquez sur le bouton "Copier dans le presse-papiers" pour le premier shortcode de votre Vue.

Étape 2. Collez le shortcode à sa place

#lien copié

Ok, maintenant tout devrait être prêt pour afficher le champ image. Visitez la page cible avec le champ image. Assurez-vous que le champ a une image attachée, puis collez le shortcode à l'endroit de votre choix dans le contenu de la page. Pour coller le shortcode avec l'éditeur Gutenberg, cliquez sur le bouton plus et choisissez le bloc "Shortcode" dans la liste. Collez votre shortcode dans le bloc et cliquez sur le bouton "Mettre à jour" pour enregistrer votre article/page.

Bloc Gutenberg avec un shortcode Advanced Views.

Visitez la page pour voir le résultat, et si vous avez tout fait correctement, vous devriez voir votre image ACF affichée dans le contenu.

Champ d'image ACF affiché avec un shortcode sur une page.

Si vous ne voyez pas votre image, revenez en arrière et modifiez la page. Assurez-vous que vous avez attaché une image au champ d'image ACF, car si le champ est vide, il n'y aura rien à afficher.

B) Utilisation de la fonction get_field()

#lien copié

Voyons comment vous pouvez utiliser la fonction get_field() pour afficher différents types de champs :

Le champ Lien avec le format de retour "URL" :

<?php

// don't forget to replace 'link' with your field name
$linkUrl = get_field('link');

if ($linkUrl) {
    // displays the link. Each %s in the string will be replaced with the related argument
    printf("<a href='%s' target='_blank'>Read more</a>",
        esc_url($linkUrl));
}

Le champ image avec le "ID" Format de retour :

// don't forget to replace 'image' with your field name
$imageID = get_field('image');
// can be one of the built-in sizes ('thumbnail', 'medium', 'large', 'full' or a custom size)
$size = 'full';

if ($imageID) {
    // creates the img tag
    echo wp_get_attachment_image($imageID, $size);
}

Le champ Fichier avec le "URL" Format de retour :

<?php

// don't forget to replace 'file' with your field name
$fileUrl = get_field('file');
if ($fileUrl) {
    // displays the file. Each %s in the string will be replaced with the related argument
    printf("<a href='%s' download='prices.pdf'>Prices.pdf</a>", esc_attr($fileUrl));
}

Pour plus d'informations, regardez la vidéo ci-dessous et lisez l'article officiel d'ACF.

ACF get field, video cover

Support multilingue

#lien copié

Si votre site web a, ou va avoir, un contenu en plusieurs langues, vous avez peut-être une question à propos de la traduction.

Comme vous le savez, WordPress n'offre pas le multilinguisme en standard. Pour rendre votre site web multilingue, vous devez donc utiliser des plugins. Les plus populaires sont WPML et Polylang.

Ainsi, en fait, la prise en charge de la traduction sur le terrain dépend du plugin que vous utilisez. La bonne nouvelle est que, comme nous l'avons mentionné, ACF est très populaire, et la plupart des plugins multilingues supportent entièrement ACF. Ils proposent plusieurs options à ce sujet : traduire uniquement les valeurs des champs ou même les étiquettes des champs.

WPML et Polylang supportent tous deux les groupes et les champs ACF.

Conseil : la page d'options de l'ACF est une fonctionnalité qui utilise une approche différente de celle des autres fonctionnalités. Cela signifie que la traduction de la page d'options peut nécessiter des étapes supplémentaires. Pour en savoir plus, consultez l'article sur la page d'options de l'ACF.

Modules complémentaires

#lien copié

L'une des raisons de la popularité du plugin Advanced Custom Fields est la disponibilité de puissants modules complémentaires qui étendent ses fonctionnalités et ajoutent des fonctions utiles supplémentaires. Ces modules complémentaires fournissent des outils et des améliorations supplémentaires. Jetons un coup d'œil à certains d'entre eux :

  1. ACF : Better Search
    Cet addon améliore la fonctionnalité de recherche de votre site web en permettant à la recherche d'inclure le contenu des champs ACF. Il garantit que vos visiteurs peuvent trouver des résultats pertinents basés sur les données personnalisées que vous avez ajoutées à l'aide d'ACF.
  2. Advanced Views
    Le plugin propose des modèles intelligents pour afficher facilement votre contenu. Il dispose de requêtes intégrées et d'une génération automatisée de modèles. Ainsi, nous pouvons développer rapidement, et maintenir la flexibilité.
  3. ACF Quick Edit Fields
    Avec cet addon, vous pouvez modifier les valeurs des champs ACF directement depuis l'écran d'édition rapide de WordPress. C'est un moyen pratique de faire des changements rapides à vos champs personnalisés sans avoir à naviguer vers l'écran d'édition complet.
  4. Colonnes d'administration
    Le plugin permet aux administrateurs de personnaliser et d'afficher les données des champs personnalisés sous forme de colonnes dans la zone d'administration. Cela simplifie l'édition en fournissant une vue d'ensemble rapide des informations pertinentes.

Ce ne sont là que quelques exemples des modules complémentaires disponibles pour le plugin ACF. Chaque module complémentaire a une fonction spécifique et offre des caractéristiques uniques qui peuvent améliorer la fonctionnalité de votre site web et l'expérience de l'utilisateur. Que vous ayez besoin d'améliorer les capacités de recherche, de rationaliser les processus d'édition, d'optimiser le référencement pour un contenu personnalisé ou de créer des tableaux interactifs, il y a probablement un module complémentaire disponible pour répondre à vos besoins.

Changelog

#lien copié

Les développeurs du plugin Advanced Custom Fields ont constamment amélioré le plugin. Ci-dessous, nous passons en revue les dernières versions les plus importantes :

6.0: Nouvelle interface utilisateur

#lien copié

Depuis le 21 avril 2022, le plugin dispose d'une nouvelle interface utilisateur moderne.

6.1: Enregistrement d'un type d'article personnalisé et d'une taxonomie

#lien copié

Depuis le 3 avril 2023, nous pouvons créer des Post Types et des Taxonomies en utilisant l'interface utilisateur du plugin.

6.2: Interface utilisateur des pages d'options et relations bidirectionnelles

#lien copié

Depuis le 9 août 2023, nous pouvons créer des pages d'options en utilisant l'interface utilisateur du plugin. De plus, la nouvelle fonctionnalité Bidirectionnelle pour les champs Relationships nous permet d'obtenir des articles liés sans faire de WP_Query.

Conseil : La liste a été mise à jour. Mettez l'article dans vos favoris pour rester informé des nouvelles mises à jour les plus importantes. Comme cet article couvre toutes les fonctionnalités les plus importantes, vous pouvez l'utiliser avec la documentation officielle.

Résumé

#lien copié

Outil puissant

#lien copié

Le plugin Advanced Custom Fields est un outil puissant qui simplifie le travail avec les données personnalisées dans WordPress. Grâce à son interface conviviale et à ses nombreuses fonctionnalités, ACF est devenu un choix incontournable pour les développeurs lors de la création d'un site web. Le plugin offre un éventail de possibilités, notamment l'enregistrement de types de posts et de taxonomies personnalisés, l'ajout de divers types de champs comme les galeries et les répétiteurs, la création de pages d'options et l'intégration facile avec les blocs Gutenberg par le biais des blocs ACF.

Lors de l'installation d'ACF, les débutants peuvent commencer par la version de base (gratuite), qui fournit des fonctionnalités de base et est suffisante pour de nombreux sites web. Pour ceux qui recherchent des fonctionnalités supplémentaires et une assistance personnelle, il est recommandé de passer à la version Pro . Notamment, la migration de la version de base à la version Pro est un processus sans douleur qui préserve toutes les données créées précédemment.

Intégration étendue

#lien copié

Il est essentiel de comprendre les termes de base des ACF, tels que groupe ACF et champ ACF. Les champs ACF peuvent être attachés à différentes sources telles que les pages, les articles, les types d'articles personnalisés, les utilisateurs, les options (à l'échelle du site) et les taxonomies. Cette polyvalence couvre tous les principaux aspects de WordPress, ce qui permet aux développeurs de personnaliser largement leurs sites web.

L'affichage des champs ACF peut être réalisé en utilisant la fonction flexible get_field(), qui offre une approche universelle et flexible. Cependant, elle nécessite un examen attentif des noms de champs et des types de retour, en se référant à la documentation d'ACF. Le module complémentaire Advanced Views simplifie le processus en permettant l'affichage de champs ou de messages ACF sélectionnés n'importe où sur le site web à l'aide de shortcodes. Le module génère automatiquement des balises HTML, ce qui constitue une solution pratique pour présenter des données personnalisées.

Support étendu

#lien copié

La popularité d'ACF est encore renforcée par la disponibilité de divers modules complémentaires. Ces modules étendent la fonctionnalité du plugin, offrant des fonctions telles que des capacités de recherche améliorées, l'édition rapide des champs ACF, l'analyse du contenu à des fins de référencement et la possibilité de créer des tableaux dynamiques. La diversité des modules complémentaires permet aux développeurs d'adapter ACF à leurs besoins spécifiques.

En conclusion, le plugin Advanced Custom Fields offre aux développeurs une interface conviviale, des fonctionnalités étendues et un large éventail de possibilités pour personnaliser les sites web WordPress. En tirant parti de ses capacités, les débutants peuvent facilement gérer les données personnalisées, afficher les champs de manière efficace et améliorer les fonctionnalités grâce à un large éventail de modules complémentaires. Qu'il s'agisse de créer un simple blog ou un site de commerce électronique complexe, ACF s'avère être un outil inestimable pour créer des expériences WordPress dynamiques et personnalisées.

A propos de l'auteur
Maxim Akimov

Certified WordPress expert from Ukraine with over 8 years of experience. Advocate of the BEM methodology and the overall modular approach. Loves sporting activities and enjoys going to the gym and regularly plays table tennis.

0 Commentaires

    Laisser un commentaire

    Répondre à 

    Veuillez faire preuve d'attention lorsque vous laissez un commentaire.

    Pas d'affichage public

    Got it