Ne vous est-il jamais arrivé d'avoir envie d'ajouter plusieurs images à la une pour illustrer un même article ? Je ne parle pas des images que l'on insère dans le corps de l'article mais bel et bien de la imagen resaltada, celle qui illustre votre article sur la page du blog et qui se retrouve également tout en haut de l'article, juste sous son titre.
Bueno, en este artículo, veremos cómo añadir diferentes imágenes a los titulares au sein d'un même article avec l'aide d'un plugin ainsi que quelques lignes de code...
1 - Les prérequis pour ajouter plusieurs images à la une
Aunque íbamos a pedir una extensión añadir múltiples imágenes a la página principal dans nos articles Divi, nous aurons quand même besoin d'ajouter quelques lignes de code çà et là... Pour mener à bien ce tutoriel, vous aurez besoin :
- de la crear un tema infantil para Divi
- d'un éditeur de code comme Bracket ou SublimText
- d'installer et d'activer l'extension Múltiples imágenes destacadas
- d'un peu de concentration et de patience 😉
Dans l'exemple qui suit, je vais ajouter 3 imágenes ofrecidas además de l'image à la une de base. Entonces vamos a conseguir 4 imágenes en el frente au lieu de 1. Bien évidement, vous n'êtes pas dans l'obligation d'en ajouter autant et vous pourrez vous arrêter à deux ou trois imágenes en el frente. Dans ce cas, vous prendrez le soin de modifier légèrement le code afin qu'il n'y ait pas d'erreurs...
2 - Le code à ajouter dans le fichier functions.php
Une fois que vous avez installé et activé l'extension Múltiples imágenes destacadas, necesitará añadir algunas líneas de código al archivo funciones. php de su niño tema Divi.
Ce code s'ajoute à la suite du code déjà présent dans ce fichier funciones. phpAquí está la versión de texto:
add_filter( 'kdmfi_featured_images', function( $featured_images ) { // Añadir imagen ofrecida-2 a página y publicar $args_1 = array( 'id' = 'featured-image-2', 'desc' = confianza 'Esta imagen aparecerá en la parte superior, bajo el título de su artículo', 'label_name' = título 'Imagen en la parte superior de los artículos', 'label_set' = `Choisir', 'label_remove' = `Delete', 'label_use' = 'Choisir', 'post_type' = array( 'page', 'post', 'post', 'post', ); // Añadir imagen ofrecida-3 a páginas $args_2 = array( 'id' = confianza 'featured-image-3', 'desc' = 'la imagen 's', 'label_name' = confianza 'Imagen en el fondo de los artículos', 'Fame', 'Fame', 'Fame', 'Fame', 'Fame', 'Fame',
Este código tiene la intención de añadir varias imágenes a la página principal de sus páginas y artículos. Si desea añadir estas imágenes múltiples sólo en sus artículos, entonces puede cambiar la línea post_type => array( 'page', 'post'), por post_type => array( 'post'),
De même que si vous ne souhaitez ajouter qu'une seule image à la une (en plus de celle déjà présente), alors votre code devrait ressembler à ça :
add_filter( 'kdmfi_featured_images', function( $featured_images ) { $args = array( 'id' = confianza 'featured-image-2', 'desc' = confianza Tu descripción aquí. Imagen destacada 2', 'label_set' = confianza 'Choisir', 'label_remove' = confianza 'Delete', 'label_use' = confianza 'Choisir', 'post_type' = dominio( 'page', 'post'), ); $featured_images[] = $args; devuelve $featured_images; }
Echa un vistazo a las diferencias entre estas dos piezas de código y haz tus cambios basados en los nombre d'images à la une quieres insertar.
Pour plus d'informations, vous pouvez consulter les instructions sur la page de l'extension.
3 - Le code à ajouter dans le fichier single.php
En esta etapa, nueva encarts d'images à la une ont dû faire leur apparition au sein de vos articles. Si vous essayez d'ajouter des images, elles apparaitront bien au niveau du back-office mais pas au niveau du front-office. C'est normal, il reste encore une petite étape à réaliser...
Usted debe duplicar el archivo soltero. php Tema Divi (el tema padre) y añadir esta copia al directorio de su tema infantil.
Par la même occasion, vous devrez éditer ce fichier single.php pour y ajouter quelques lignes de code. Ces lignes vont faire apparaitre vos nouvelles images à la une. Cela signifie que c'est à vous de décider où ajouter ces bouts de code.
Lors de mon test, j'ai ajouté deux imágenes en el frente dentro de mi soltero. php en lugares como la parte superior de mi artículo y la parte inferior de mi artículo:
Aquí está el código para añadir:
kdmfi_the_featured_image( 'featured-image-2', 'full');
N'oubliez pas de le modifier en fonction du nombre d'images à ajouter (featured-image-2, featured-image-3, featured-image-4 etc.).
4 - Changer une option de Divi
Por mi ejemplo, la imagen en la portada de mon article qui apparait dans le module blog ou même dans la page de mes articles est différente de celle que l'on retrouve en haut de l'article.
Para lograr este resultado, no solo necesitarás añadir el bit de código al lugar correcto pero también cambiar una opción Divi.
En la pestaña Divi Opciones temáticas - No., vous devrez positionner l'option "Mettre des vignettes dans des articles" on "Désactiver". Esto evitará encontrarte con dos imágenes después bajo el título de tu artículo.
5 - L'utilisation du Widget "Multiple Featured Image"
Esto widget, implementado gracias al plugin Múltiples imágenes destacadas, te permitirá d'ajouter facilement une image à la une dans la sidebar y/o en el pie de su sitio.
Cette image s'affichera différemment en fonction de vos articles et des images que vous aurez affecté à cet emplacement. C'est idéal pour afficher l'image destinée à Pinterest par exemple ou bien une bannière publicitaire.
6 - En conclusión...
Dans cet exemple, vous pouvez remarquer que l'article affiche quatre images à la une :
- el primero l'image à la une de base
- la seconde est une image à la une qui a été ajoutée en haut de l'article à l'aide du plugin et des divers morceaux de code (dans le soltero. php y dentro funciones. php).
- la troisième est une image à la une qui a été ajoutée en bas de l'article à l'aide du plugin et des divers morceaux de code (dans le soltero. php y dentro funciones. php).
- la quatrième est une image à la une qui a été ajoutée à l'aide d'un widget prévu à cet effet dans la barre latérale (sidebar) (et du code inséré dans le funciones. php).
Bonjour,
J’ai une petite question.
J’ai bien réussi a tout mettre en place comme expliqué dans le tuto
(qui d’ailleurs au passage je le souligne, est très bien expliqué et agréable a lire)
Cependant cela ne fonctionne plus quand mon post est crée par le thème Builder.
faut-il mettre le code ailleurs que dans single PHP pour que cela fonctionne ?
En gros je voudrais que les image 2 – 3 – 4 soit mise a la suite de mon image en avant 1 dans le post direct.
mais ma page post est crée avec le thème buidler comme vous l’avez expliqué dans un de vos articles. (ce qui me va très bien) mais pour le coup ne fonctionne pas.
Pourriez vous m’aider s’il vous plait, enfin m’expliquer comment faire surtout.
Bonjour Lycia,
Je vous ai écrit un message hier soir ici, je bloc complétement sur les images a la une
quand je l’utilise avec la page single.php tout fonctionne sans aucun souci
mais j’ai besoin de pouvoir utiliser cette solution en utilisant le thème Builder !
en faite je eux réussir a avoir deux colonne
1 colonne de gauche = les images à la une que l’on peu agrandir en cliquant dessus un peu comme si c’était une galerie
2 colonne de droite = le texte de mon article
j’ai créée avec theme builder ma page ou j’ai
en haut le titre avec image en fond = ok
en dessous deux colonne
colonne 1 (gauche) j’ai mis titre du post sans afficher le titre et les méta (j’affiche uniquement l’image a la une)
et je voudrais appeler en dessous les images a la une 2,3,4
colonne 2 (droite) j’ai mis publier un contenu pour afficher le contenu texte de mon article.
quel idée ou solution auriez vous pour que je puisse utiliser cette méthode ?
ps: pour info j’ai enregistrer mon nom et email en dessous de commentaires pour être enregistrer mais je doit retaper mon nom et email a chaque commentaire.
Salut Jan… Écoute, ici sur Astuces Divi, j’utilise 2 images à la une et aussi le Thème Builder. Donc les deux sont compatibles, plus ou moins, je pense. Si tu regardes mes articles, il y a une image « en anglais » à la fin de la barre latérale, et bien j’ai utilisé ce tuto ici présent… Mais j’ai fait cela dans une sidebar que j’appelle dans mon modèle d’article. Peut-être que tu devrais faire de même. Ensuite, il te suffit d’ajouter un module « barre latérale » où tu veux dans ton modèle et ton image devrait s’afficher. Voilà, je pense que l’astuce est là. Tiens-moi au courant.