Thème WordPress Divi et Advanced Custom Fields (ACF)

27 mai 2020
Comment tirer parti de deux incontournables de Wordpress pour harmoniser la saisie de données en BO et maitriser l'affichage en FO ? O'Aka vous explique comment combiner ACF et le thème Divi.
Tips du jour

Thèmes et plugins

WordPress est un outil remarquable pour créer des sites internet et des sites eCommerce. Alors que de nombreux plugins viennent ajouter de nouvelles fonctionnalités, les thèmes graphiques s'occupent de l'aspect graphique et ergonomique de votre site web.

Voyons ensemble comment décupler vos possibilités en combinant deux incontournables de WordPress que sont Advanced Custom Field (ACF) et le thème Divi. 

L'extension

Le plugin Advanced Custom Field

L'extension Advanced Custom Field (ACF) est un grand classique pour ceux qui souhaite ajouter de nouveaux champs à un type de contenus (article, page, projet, etc.). La structure de vos données est alors maitrisée car la trame de remplissage dans le Back-Office est systématiquement la même d'une page à l'autre.

Mais voilà, comment remonter toutes ces nouvelles informations dans votre thème graphique Divi ?

Le thème

Thème graphique Divi de Elegant Themes

Le thème graphique Divi est plus qu'un thème standard WordPress puisqu'il apporte tout un ensemble de fonctionnalités très utiles. Il met à disposition une richesse de mises en page pré-fabriquées, faciles à prendre en main et qui ne demandent pas forcément de connaissances techniques particulières.

Le revers de la médaille, il est beaucoup plus difficile de dissocier le contenu de la forme et de garantir une homogénéité sur toutes les pages d'un même type de contenus.

La solution

Divi acf integration :
Procédure à suivre

Comment tirer parti de ces deux composants phares de WordPress pour harmoniser la saisie de données en Back-Office et maitriser l'affichage en Front-End ? C'est ce que nous allons découvrir maintenant...

structurer ses champs dans le back-office de WP avec ACF

L'objectif de cet article n'est pas de vous apprendre à utiliser le plugin Advanced Custom Field dans ses moindres détails. Nous vous recommandons de faire une simple recherche dans un moteur de recherche afin de trouver des tutoriels complets à ce sujet.

Pour les besoins de cet exercice, nous vous invitons à créer un groupe de champs dans ACF. Dans notre exemple ci-après, vous trouverez la capture d'écran du groupe de champs "Etude de cas" qui a été associé au type de contenus du même nom. 

Edition dans le back-office avec Advanced et Custom Field

C'est quasiment tout ce que vous aurez à faire avec le plugin ACF. Dans notre exemple, ces champs sont maintenant disponible dans l'édition de tous les contenus "Étude de cas" en Back-Office. Ils permettent de rajouter des caractéristiques aux études de cas présentées sur le site internet de O'Aka :

  • Le nom du client
  • Une brève description de son activité
  • Son secteur d'activité
  • La durée moyenne du projet
  • Et la période à laquelle le projet a été livré

Voici à quoi ressemble le formulaire des champs structurés et personnalisés grâce à ACF. Il s'agit de l'étude de cas "Stéphanie MAIER Photographe" une fois le formulaire d'édition rempli dans le Back-Office d'administration de WordPress.

Champs générés avec Advanced Custom Field dans le BO de WordPress

Récupérer les données ACF (image, etc.) dans une mise en page Divi

O'Aka, votre partenaire digital en Alsace : Pictogramme Contenus Dynamiques Divi Oaka
Lorsque vous éditez un champ texte ou image via le Divi Builder, vous aurez peut être remarqué un pictogramme dans le coin supérieur droit du champs en cours d'édition. Lorsque vous cliquez sur ce dernier, Divi vous propose l'ensemble des champs dynamiques qui lui sont accessibles.

Au bas de la liste, vous retrouverez tous les champs créés à l'aide de l'extension Advanced Custom Field. Il suffit alors de sélectionner celui que vous souhaitez pour que Divi se charge du reste. Une fois votre page enregistrée vous constaterez que les données saisies dans le Back-Office s'affichent automatiquement dans une mise en page maîtrisée sur le Front-End du site WordPress.

Editeur divi builder et gestion des contenus dynamiques

Figer la mise en page d'un bloc de contenus dans la bibliothèque

Nous avons créé des champs spécifiques avec le plugin Advanced Custom Field, les avons associés à un type de contenus puis récupéré les données dans le thème Divi. Pour harmoniser toutes vos pages, nous vous recommandons de sauvegarder la section qui contient vos contenus dynamiques dans la bibliothèque de Divi. Cliquez sur les 3 points verticaux d'une section puis sur "Sauvegarder dans la bibliothèque".

Ainsi, vous pourrez faire appel à ce bloc de mise en page autant de fois que vous le souhaitez via l'onglet "Ajouter depuis la bibliothèque" lors de la création d'une nouvelle section. Attention, cela fonctionne à condition que ce bloc de contenus soit dans une page correspondant au type de contenus associé à vos champs ACF présents dans le bloc. Autrement dit, si je reprends l'exemple de mon "Etude de cas", la section de présentation du client ne fonctionnera que sur les pages étude de cas et non les articles (puisque nous n'avons pas associé de groupe de champs "Etude de cas" à ce type de contenus).

Capture d'écran du back-office du Divi Builder et de la bibliothèque

Pour aller plus loin dans la documentation : le theme builder de Divi, shortcode display, ACF PRO, Repeater, ACF Gallery, etc.

Sur les pages "Étude de cas" du site internet de O'Aka, les champs dynamiques ont été utilisés au sein du Theme Builder de Divi pour garder un module d'entête homogène sur toutes les études de cas (modèle d'article). Ainsi, nous avons automatisé sur le Front-End la récupération du titre de la page, de la catégorie courante, de l'image à la une et de tous les champs ACF créés précédemment.

Nous aurons également l'occasion d'aborder le Theme Builder plus en détails dans un prochain article... 

Header de l'étude de cas de Stéphanie MAIER Photographe sur le site de O'Aka.
O'Aka est une agence digitale basée en Alsace à Obernai. Nous réalisons des sites internet et des sites eCommerce avec WordPress et le thème Divi. Cela nous permet de proposer à nos clients des solutions optimisées, dans l'air du temps et qui peuvent tenir dans de petit budget.

 

 À propos de l'auteur

Portrait de Yoann PIERRE souriant avec une barbe et des lunettes

Yoann PIERRE

Tout d’abord chef de projet digital, puis responsable d'une équipe de développement web, Yoann a fait ses premières armes dans une agence eCommerce strasbourgeoise. En quête de nouveaux challenges, c'est en 2020 qu'il fonde l'agence O'Aka.
Lien d'affiliation avec Elegant Themes
Publicité pour le thème Wordpress Divi
Cultivez vos compétences numériques

Cultivez vos compétences numériques

Connaissez vous la plateforme Pix ? C’est le service public en ligne pour évaluer, développer et certifier ses compétences numériques. Voilà une bonne façon d’enrichir ses compétences numériques pour la rentrée !

Publier une vidéo sur Youtube en 2020

Publier une vidéo sur Youtube en 2020

Vous avez déjà une chaine Youtube mais vous ne savez pas comment envoyer une vidéo de votre ordinateur sur Youtube ? Cette vidéo vous montre pas à pas comment faire avec l’interface de Youtube en 2020.

Thématiques associées :

Le A Coeur blanc et transparent de la marque Alsace

O'Aka, Implantée au coeur de l'Alsace

Pin It on Pinterest