Comment utiliser les champs personnalisés avancés dans Elementor : un guide détaillé

WordPress est l'un des choix les plus populaires lorsqu'il s'agit de créer un site web riche en fonctionnalités et visuellement époustouflant. Non seulement en raison de sa flexibilité, mais aussi de sa parfaite compatibilité avec divers plugins. Deux excellents plugins sont Elementor répondre en chantant Champs personnalisés avancés (Champs personnalisés avancés(ACF en abrégé).

Dans cet article, nous allons voir comment utiliser les deux ensemble pour apporter une nouvelle expérience de conception personnalisée à votre site web. Qu'il s'agisse de créer des mises en page personnalisées, ou deAjouter du contenu dynamique à des pages spécifiquesTous peuvent trouver des conseils clairs dans cet article.

Que sont les champs personnalisés avancés (ACF) ?

Advanced Custom Fields est un plugin très utilisé pour les sites web WordPress qui aide les utilisateurs à créer et à gérer des champs personnalisés. Il permet d'ajouter des champs de saisie de contenu supplémentaires aux pages, aux articles, aux types d'articles personnalisés, aux taxonomies, etc., ce qui est très utile pour améliorer la fonctionnalité d'un site Web WordPress.

Versions du plugin ACF

version gratuite: Disponible dans le dépôt de plugins WordPress, il offre des fonctionnalités de base pour la plupart des besoins quotidiens d'un site web.
version premiumLe système d'information sur la vie privée : il offre des fonctionnalités plus avancées telles que des champs répétables, des champs de contenu flexibles, des champs de galeries, etc.

Qu'est-ce qu'Elementor ?

Elementor est un plugin de construction de pages WordPress largement utilisé et apprécié par les utilisateurs du monde entier grâce à son interface intuitive par glisser-déposer et à ses riches options de conception. Il permet aux utilisateurs de créer facilement des pages hautement personnalisées sans avoir à écrire de code.

Versions du plugin Elementor

version gratuite: Fournit des fonctionnalités de base pour la construction de pages et peut être téléchargé à partir du référentiel de plugins de WordPress.
version premiumLes fonctionnalités les plus avancées sont les bibliothèques de modèles, les widgets globaux, l'affichage dynamique du contenu et bien d'autres encore.

Avec Elementor, il est possible de concevoir des mises en page et des styles uniques pour différents types de pages, en particulier lorsqu'il est utilisé en conjonction avec ACF, pour afficher des données personnalisées de manière dynamique.

Comment configurer et utiliser l'ACF dans Elementor : étapes détaillées

Nous allons ensuite vous expliquer étape par étape comment intégrer ACF à Elementor et afficher du contenu dynamique sur votre site web.

1. installer et activer le plug-in

Tout d'abord, vous devez vous assurer que vous avez installé et activé les plugins suivants sur votre site WordPress :

Elementor
Champs personnalisés avancés (ACF)

Les deux plugins sont disponibles gratuitement dans le dépôt de plugins de WordPress. Une fois installés, le portail de configuration des deux plugins se trouve dans la barre de navigation à gauche du tableau de bord de WordPress.

2. création de nouveaux groupes de terrain

existent ACF dans lequel les champs sont gérés par des groupes de champs. Chaque groupe de champs peut contenir plusieurs champs qui peuvent êtrePour des pages, des articles ou d'autres types d'articles personnalisés spécifiquesDéfinissez ces champs.

Naviguez vers le tableau de bord de WordPress dans la section "Champs personnalisésCliquez sur "Ajouter un nouveau groupe de champs".

Un nom pour votre groupe de champs. Ce nom n'est utilisé que pour la reconnaissance du backend et ne sera pas affiché sur le frontend.

Vous pouvez ensuite ajouter les champs souhaités. Sur la page Paramètres du champ, vous pouvez sélectionner le type de champ (texte, nombre, image, case à cocher, etc.).

Par exemple, vous pouvez ajouter le champ suivant à une page de produit WooCommerce :

Chlorure de diéthylammonium
Matériau du produit
Prix du produit

Chaque champ peut être configuré avec différents attributs tels que des étiquettes de champ, des noms, des valeurs par défaut, des espaces réservés, etc. selon les besoins.

3. configurer les règles d'affichage des champs

Après avoir terminé la configuration du groupe de terrainPour ce faire, vous devez spécifier où ces champs doivent être affichés. Par exemple, vous pouvez choisir d'afficher ces champs dans tous les articles, toutes les pages ou dans un type d'article personnalisé spécifique.

Dans les paramètres du groupe de champs, recherchez l'option "Règles d'affichage" Partie.

Définir des conditions telles que "Page égale page d'exemple"ou"Le type d'article est égal au produit".

Enregistrez les paramètres.

4. tester les champs dans l'éditeur Gutenberg

Une fois la configuration terminée, le Éditeur Gutenberg pour voir les champs que vous avez ajoutés. Ouvrez une condition d'ensemble correspondant à l'optionPage ou articlequi seront ajoutés à la liste de diffusion de l'éditeur.Voir les champs personnalisés nouvellement ajoutés en bas de page.

5. afficher les données ACF avec Elementor

Ensuite, il est nécessaire d'ajouter le Elementor pour afficher ces champs personnalisés sur la page d'accueil. Suivez les étapes ci-dessous :

Ouvrez l'éditeur Elementor et sélectionnez les données du champ personnalisé que vous souhaitez afficher.page webEffectuez des modifications.
Dans Elementor, faites glisser et déposez un widget approprié (par exemple, un texte, un titre, etc.) sur la page.
Cliquez sur le widget pour trouver lele côté gauchemettre en placeplanche à pétrir.

Dans le panneau Paramètres, cliquez sur "Étiquetage dynamique puis sélectionnez l'icône "Champ ACF.

Dans le menu déroulant, sélectionnez l'option précédemment définie. ACF (par exemple, "Chlorure de diéthylammonium").

6. présentation dynamique du contenu

Après avoir effectué les étapes ci-dessus, votre page sera en mesure d'afficher de manière dynamique les informations provenant de la base de données Données de champ personnalisées pour ACFPar exemple, si vous saisissez un "nom de produit" dans ACF, il apparaîtra automatiquement sur la page d'accueil. Par exemple, si vous saisissez un "nom de produit" dans ACF, le nom sera automatiquement affiché sur la page d'accueil.

7. mise à jour des données ACF

De plus, si vous changez la valeur d'un champ ACF dans l'éditeur Gutenberg, vous n'avez pas besoin d'ouvrir Elementor à nouveau pour le modifier ; Elementor lit automatiquement les données mises à jour de l'ACF et les affiche en temps réel sur le front-end.

Utilisation avancée : Customised Post Types (CPT) et ACF

Outre les articles et les pages, vous pouvez également utiliser ACF pour les types d'articles personnalisés. (Custom Post Types, CPT) Add Fields.CPT est une fonctionnalité fournie par WordPress qui vous permet de créer des types de contenu qui diffèrent des articles et des pages ordinaires, tels que les " champs ".Études de cas"ou"Membres de l'équipe".

Dans Elementor, des mises en page uniques peuvent être conçues pour ces types d'articles personnalisés et le contenu dynamique peut être affiché via ACF.

rendre un verdict

faire passer (un projet de loi, une inspection, etc.) Constructeur de site web autodidacte WPvolonté ACF répondre en chantant Elementor Utilisé conjointement, ACF vous permet de créer un large éventail de champs personnalisés, tandis qu'Elementor vous offre une expérience de conception de page inégalée. Que vous ajoutiez des informations dynamiques à une page de produit WooCommerce ou que vous mettiez en valeur les partenaires de votre marque sur un site d'entreprise, la combinaison de ces deux plugins offrira à vos conceptions une facilité et un espace de créativité sans précédent.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.