ACF et Divi 5 : afficher un champ personnalisé dans un modèle

ACF et Divi 5 : afficher un champ personnalisé dans un modèle

Résumé de l'article

Avec ACF et Divi 5, créez le champ sur le bon type de contenu et sélectionnez-le dans le module Divi. Vérifiez ensuite le même modèle sur deux publications, dont une avec la valeur vide.

Approfondir avec une IA

Vous souhaitez approfondir un point ou obtenir une réponse adaptée à votre situation ? Ouvrez cet article dans l'IA de votre choix et poursuivez la conversation.

3 min de lecture

Avec ACF et Divi 5, un même modèle peut afficher une information différente sur chaque page. Prenons un exemple simple : afficher une courte introduction propre à chaque projet.

La chaîne du contenu

  1. Champ ACF
  2. Valeur sur la publication
  3. Module du modèle
Les points à vérifier dans l’ordre.

Contrôler le contenu dynamique dans Divi 5

Dans ACF, créez un groupe de champs et ajoutez un champ Texte, par exemple « Introduction du projet ». Donnez-lui un nom technique stable comme introduction_projet. Dans les règles d’emplacement, choisissez le type de publication qui porte réellement cette information. Ouvrez ensuite deux contenus de ce type. Remplissez le champ sur le premier et laissez-le vide sur le second.

Avant de relier le champ

  • Le nom technique du champ utilisé par le modèle.
  • Le type de publication auquel s’applique le groupe ACF.
  • Une publication renseignée et une publication témoin sans valeur.

Relier un champ ACF dans Divi au bon module

Dans le Theme Builder, ouvrez le corps du modèle affecté à ces contenus. Ajoutez un module Texte et ouvrez le sélecteur de contenu dynamique du champ de texte. Choisissez le champ ACF que vous venez de créer. Enregistrez le module, le modèle puis les changements du Theme Builder. Prévisualisez un vrai contenu affecté au modèle pour vérifier la valeur rendue.

ACF est une extension WordPress qui stocke les valeurs dans la fiche du contenu. Le Theme Builder d’Elegant Themes définit leur mise en page. Gardez donc la donnée dans le champ ACF et les réglages d’affichage dans le module. Par exemple, modifiez la typographie dans le modèle si elle doit s’appliquer à toutes les fiches, puis vérifiez le résultat sur téléphone.

Pourquoi un champ ACF dans Divi reste-t-il vide ?

Si le champ manque dans l’éditeur WordPress, vérifiez les règles d’emplacement du groupe ACF. S’il existe mais reste absent du rendu, vérifiez la publication affichée et le modèle réellement appliqué. Une valeur enregistrée sur une page ne se transfère pas d’elle-même à un article ou à une archive.

Exemple de diagnostic

Sur deux fiches de projet qui partagent le même modèle, renseignez « Site vitrine » sur la première et « Refonte » sur la seconde. Si les deux affichent la même valeur, cherchez un texte fixe dans le module ou une prévisualisation restée sur la même publication.

Prévoir un champ ACF dans Divi qui peut rester vide

Vérifiez séparément le texte, son libellé et l’espace que le bloc occupe. Si le champ est vide, un titre ou une marge peut rester visible. Regroupez les éléments qui doivent disparaître et utilisez une condition d’affichage seulement si votre installation sait évaluer le champ concerné. Sinon, choisissez un rendu neutre ou rendez le champ obligatoire si chaque page doit le présenter.

Afficher deux projets avec ACF dans Divi

Sur une copie, renseignez « Introduction du projet » sur la fiche A et laissez le champ vide sur la fiche B. Les deux utilisent le même modèle. Cette paire permet de vérifier à la fois le raccord et le comportement quand le champ est facultatif.

  • Si A et B affichent le même texte, ouvrez le module et cherchez une valeur saisie en dur ou une prévisualisation restée sur A.
  • Si A affiche sa valeur mais que B laisse un titre vide, appliquez la condition d’affichage au bloc qui contient à la fois le titre et la valeur, si votre version le permet.
  • Publiez uniquement le réglage validé, puis ouvrez les deux URL hors connexion.

Un modèle commun permet de tester ACF dans Divi avec deux publications. Renseignez le champ sur l’une et laissez l’autre vide pour vérifier que chaque page affiche sa propre valeur et que le bloc vide reste discret.

Vérifier le résultat

Symptôme observé Premier contrôle
Champ absent de l’éditeur Règle d’emplacement ACF
Champ visible dans l’éditeur et absent en public Contexte de la publication et source dynamique
Espace vide malgré l’absence de valeur Conditions et espacements du conteneur
  • La page renseignée affiche sa propre valeur.
  • La page vide ne laisse ni titre orphelin ni espace gênant.
  • La modification d’un projet ne change aucun autre projet.

Consulter la documentation de référence.

Questions fréquentes

Pourquoi le champ ACF dans Divi n’apparaît-il pas dans le sélecteur ?

Vérifiez le type de champ, les règles du groupe et le type de contenu utilisé pour prévisualiser le modèle.

Renommer le libellé efface-t-il les valeurs ?

Le libellé aide à repérer le champ dans l’éditeur. Conservez son nom technique si des valeurs existent et si le modèle s’appuie sur ce nom.

Pourquoi tester une fiche vide ?

Elle révèle un titre orphelin, un espacement inutile ou un texte de remplacement qui masquerait un problème de raccord.

Pourquoi le champ apparaît-il sur un projet mais pas sur un autre ?

Comparez les valeurs des deux projets et les règles d’emplacement du groupe ACF. Vérifiez que le modèle lit bien le champ du contenu affiché.

Comment traiter un champ facultatif vide ?

Ouvrez un contenu sans valeur et vérifiez si le libellé ou le bloc reste affiché. Masquez ou adaptez le bloc selon le rendu attendu. À lire aussi, les modèles du Theme Builder.

À retenir

Comparez deux publications pour valider le raccord entre ACF et Divi 5.

RÉDIGÉ PAR

Mickaël RENAUX

Webmaster freelance • WordPress • Divi

Dans le web depuis plus de 10 ans et indépendant depuis 2021, j’accompagne les entreprises dans la création, la refonte, la maintenance et le référencement de leur site. Chaque article est rédigé à partir de mon expérience terrain et régulièrement mis à jour.

Sommaire

UN PROJET ?

Parlons de votre projet

Expliquez-moi votre besoin, voyons comment avancer.

Mon expertise sur ce sujet

Pour approfondir le sujet