Vidéo mise en avant dans les articles Divi avec ACF

Une question m’a été posée récemment : « peut-on ajouter une vidéo mise en avant à la place d’une image dans les articles Divi ? ». Bonne nouvelle, la réponse est OUI et cet article vous explique comment faire.

Pour cela, vous aurez besoin d’utiliser une extension nommée ACF (Advanced Custm Field) en association avec le Thème Builder de Divi.

Cette solution est idéale si vous êtes YouTubeur et que vous souhaitez mettre en avant vos vidéos sur votre blog. D’ailleurs, il existe une chaine YouTube Astuces Divi. L’aviez-vous déjà visitée ?

Annonce : cet article contient des liens d’affiliation que vous reconnaitrez facilement. Les liens classiques sont en violet et les liens sponsorisés sont en rose.

1 – Obtenir les données de la vidéo YouTube à intégrer

Pour la suite de ce tutoriel pour afficher des vidéos mises en avant dans vos articles Divi, vous aurez besoin de données provenant de YouTube. Vous avez certainement l’habitude mais pour les grands débutants, voici comment récupérer l’URL ou le code iFrame d’une vidéo hébergée sur YouTube :

1. Rendez-vous sur la vidéo que vous souhaitez intégrer dans votre article. Cliquez sur Partager.
2. Le lien de la vidéo apparaît, il suffit de le copier.
3. Une alternative existe : cliquez sur Intégrer pour copier le code iFrame de la vidéo.

Selon la finalité que vous souhaitez obtenir, vous aurez besoin de l’un ou de l’autre. Voyons cela en détails…

Savez-vous que vous pouvez tester Divi gratuitement ? Rendez-vous sur cette page et cliquez sur « TRY IT FOR FREE »

2 – Créer des champs personnalisés avec ACF

Pour continuer, vous aurez besoin d’installer l’extension ACF – Advanced Custom Field. Même si WordPress permet nativement de créer des champs personnalisés, ceux-ci ne sont pas optimaux pour les vidéos mises en avant dans vos articles Divi, c’est donc pour cette raison que vous avez besoin d’une extension.

Allez à l’onglet Extensions > Ajouter, installez et activez le plugin ACF. Attention, il en existe plusieurs versions, veillez à installer celui d’Elliot Condon installé sur plus d’1 million de sites.

Ensuite, vous allez créer votre premier champ personnalisé :

1. Allez à l’onglet ACF > Ajouter.
2. Saisissez un titre, par exemple « Vidéo Featured ». Configurez ensuite le champ personnalisé :
3. Titre du champ : Video Featured.
4. Nom du champ : celui-ci s’inscrira tout seul. Par exemple : video_featured.
5. Type de champ : choisissez oEmbed dans le menu déroulant.
6. Instruction : cela est facultatif mais vous pouvez donner une indication qui sera visible dans l’administration de l’article.

7. Dans l’encadré Emplacement, définissez le type de publication qui bénéficiera de ce champ. Par exemple : Articles.
8. Dans l’encadré des réglages, laissez tel quel. Vous pouvez cependant afficher le nouveau champ « sur le côté ». Ainsi, le champ personnalisé sera disponible dans la barre latérale de l’administration de vos articles, au même endroit que l’image mise en avant.
9. Validez votre champ en cliquant sur Publier.

3 – Intégrer le champ Vidéo dans le modèle d’article

Vous êtes maintenant en possession d’un nouveau champ Vidéo Featured, vous devez à présent l’afficher dans vos articles afin qu’il soit visible des internautes.

Pour cela, rien de mieux qu’utiliser le Theme Builder qui va vous permettre de créer un modèle qui s’appliquera à tous vos articles de blog. Ainsi, vous réalisez le travail une seule fois.

Si vous ne savez pas comment faire cela, je vous invite à suivre le tutoriel qui explique comment créer un modèle pour vos articles Divi, puis revenir ici ensuite.

1. Allez à l’onglet Divi > Theme Builder.
2. Créez ou éditez le Corps Personnalisé du modèle assigné à Tous les articles. Vous pouvez évidement assigner ce modèle à un autre type de publication, c’est vous qui voyez, mais dans ce tuto, je vous montre comment ajouter une vidéo de mise en avant dans les articles de blog.
3. À l’endroit désiré dans votre modèle, ajoutez un module Texte et saisissez le code court qui contient le nom de votre champ personnalisé ACF. Ce code court devrait ressembler à cela : [acf field= »video_featured »].

Pour finir, enregistrez votre modèle.

4 – Placer une vidéo mise en avant dans chaque article

Voilà, le champ personnalisé est créé et intégré dans vos articles. Dès à présent, vous pourrez renseigner une vidéo mise en avant dans chaque article avant de le publier :

1. Ajoutez un nouvel article. Vous pouvez utiliser le Divi Builder ou la mise en page par défaut (Gutenberg). Cela n’a aucune incidence. C’est au choix. Pour ma part, sachez que j’utilise uniquement Gutenberg (l’éditeur WordPress) pour rédiger mes articles. J’utilise le Divi Builder uniquement sur mes pages.
2. Dans la barre latérale de l’administration de l’article, vous verrez apparaître votre nouveau champ personnalisé nommé Video Featured. Il vous suffit alors de saisir, dans ce champ, l’URL de la vidéo YouTube à intégrer dans votre article.
3. Lorsque vous visitez l’article côté front, vous voyez que la vidéo a bien été intégrée dans votre article !

Ne tardez plus ! Découvrez le thème Divi ici !

5 – Alternative : afficher une vidéo YouTube en « autoplay »

La solution précédente permet d’intégrer une vidéo YouTube dans vos articles que l’utilisateur pourra lancer s’il le souhaite…

Mais je vous vois venir et je suis sûre que vous alliez me demander en commentaire comment faire la même chose avec une vidéo YouTube qui se lance automatiquement au chargement de la page. Je me trompe ?

Alors voici la solution si vous souhaitez intégrer une vidéo en autoplay :

On recommence comme le tuto précédent :

1. Allez à l’onglet ACF > Ajouter.
2. Saisissez un titre, par exemple « Vidéo Autoplay ». Configurez ensuite le champ personnalisé :
3. Titre du champ : Video Autoplay.
4. Nom du champ : celui-ci s’inscrira tout seul. Par exemple : video_autoplay.
5. Type de champ : choisissez Texte dans le menu déroulant.
6. Instruction : cela est facultatif mais vous pouvez donner une indication qui sera visible dans l’administration de l’article.
7. Dans l’encadré Emplacement, définissez le type de publication qui bénéficiera de ce champ. Par exemple : Articles.
8. Dans l’encadré des réglages, laissez tel quel. Vous pouvez cependant afficher le nouveau champ « sur le côté ». Ainsi, le champ personnalisé sera disponible dans la barre latérale de l’administration de vos articles, au même endroit que l’image mise en avant.
9. Validez votre champ en cliquant sur Publier.

Comme tout à l’heure, une fois que votre champ personnalisé est créé, il vous suffit de l’intégrer dans votre modèle d’article créé avec le Divi Theme Builder :

1. Allez à l’onglet Divi > Theme Builder.
2. Créez ou éditez le Corps Personnalisé du modèle assigné à Tous les articles. Vous pouvez évidement assigner ce modèle à un autre type de publication, c’est vous qui voyez, mais dans ce tuto, je vous montre comment ajouter une vidéo de mise en avant dans les articles de blog.
3. À l’endroit désiré dans votre modèle, ajoutez un module Texte et saisissez le code court qui contient le nom de votre champ personnalisé ACF. Ce code court devrait ressembler à cela : [acf field= »video_autoplay »].

Enregistrez votre modèle.

Ensuite, à chaque fois que vous créez un nouvel article, vous pouvez utiliser le champ Video Autoplay pour intégrer une vidéo YouTube. Toutefois, il y a une petite différence avec l’autoplay, vous avez besoin du code iFrame :

1. Ajoutez un nouvel article. Vous pouvez utiliser le Divi Builder ou la mise en page par défaut (Gutenberg). Cela n’a aucune incidence.
2. Dans la barre latérale de l’administration de l’article, vous verrez apparaître votre nouveau champ personnalisé nommé Video Autoplay. Il vous suffit alors de coller le code iFrame de la vidéo YouTube à intégrer dans votre article.
3. Attention, pour que l’autoplay fonctionne, vous devez ajouter un paramètre dans l’URL du code iFrame. Ajoutez : ?autoplay=1 à la fin de l’URL et avant les guillemets fermants. Voilà, la vidéo YouTube se lance au chargement de la page. Notez toutefois que certains navigateurs bloquent le lancement des vidéos automatiques.

6 – Améliorer le design du modèle

Maintenant que tout fonctionne, vous pouvez améliorer le design de votre modèle d’article. Par exemple, voici le rendu final pour mon exemple :

Quelques explications :

1. Dans le modèle d’article créé avec le Theme builder, j’ai ajouté un module Titre du poste dans la section supérieure.
2. J’ai ajouté ensuite une autre section que j’ai stylisé grâce à un séparateur en biseau. Tout savoir sur les séparateurs Divi ici.
3. La vidéo est affichée grâce au shortcode ACF placé dans un module Texte, comme expliqué précédemment.
4. Ne pas oublier de placer un module Publier un contenu qui permet d’afficher le contenu de votre article, qui ait été créé avec Gutenberg ou Divi.

7 – Vidéo mise en avant dans les articles : en conclusion…

Voilà, en quelques clics vous avez créé des champs personnalisé dans votre site WordPress et vous les avez affiché dans vos articles Divi !

ACF est une extension très puissante qui permet de faire des choses incroyables ! N’hésitez pas à parcourir la documentation officielle pour aller bien plus loin que d’insérer seulement une vidéo mise en avant dans vos articles Divi !!!

Voici une petite liste de lecture qui pourra vous aider :

• Documentation officielle ACF
• Créer des champs personnalisés WordPress
• Comment créer des champs personnalisés avec WordPress
• Comment créer un modèle de portfolio dynamique avec Divi et ACF