Comment faire un carrousel sur WordPress : guide complet
Sommaire de l'article
Introduction
Un carrousel WordPress (ou slider) est une fonctionnalité très utilisée pour présenter des contenus multimédias de manière dynamique sur un site WordPress. Que ce soit pour des images, des vidéos, des témoignages, des produits WooCommerce ou des articles récents, un carrousel permet de capter l'attention des visiteurs tout en améliorant l’expérience utilisateur (UX) et, indirectement, les performances de votre site en termes d’engagement.
Dans ce guide complet, vous allez découvrir pas à pas comment créer un carrousel sur WordPress, avec ou sans plugin, en respectant les bonnes pratiques de performance, d’accessibilité et d’optimisation pour les moteurs de recherche.
Concepts clés à connaître avant de créer un carrousel
Avant de passer à la mise en pratique, il est utile de maîtriser quelques notions fondamentales liées aux carrousels sur WordPress.
- Galerie d’images WordPress : une galerie d’images est une collection d’images organisée, créée directement dans l’éditeur de blocs ou via un plugin de galerie. Certaines extensions transforment ces galeries en carrousels d’images avec navigation, pagination et effets de transition.
- Plugin de carrousel WordPress : les plugins sont des extensions qui ajoutent des fonctionnalités à WordPress. De nombreux plugins sont conçus spécialement pour créer des sliders et carrousels puissants, responsives et personnalisables (carrousels d’images, de témoignages, de produits, d’articles, etc.).
- Shortcode de carrousel : un shortcode est un code court inséré dans une page, un article ou un template pour afficher une fonctionnalité avancée (par exemple un carrousel) sansécrire de code PHP complexe.
- Carrousel responsive : un carrousel responsive s’adapte automatiquement aux différentes tailles d’écran (ordinateur, tablette, mobile). Il ajuste le nombre de slides visibles, les marges, la taille des images et la navigation en fonction de la largeur de l’écran.
- Page builders et constructeurs de thèmes : des outils comme Elementor, Divi ou SeedProd intègrent des widgets de carrousel prêts à l’emploi (carrousel d’images, d’articles, de produits, etc.), souvent plus intuitifs que les plugins traditionnels.
Les principales méthodes pour créer un carrousel sur WordPress
Il existe plusieurs approches pour ajouter un carrousel à votre site WordPress. Le choix dépend de votre niveau technique, du thème utilisé et de vos besoins fonctionnels.
1. Utiliser un plugin de carrousel dédié
C’est la méthode la plus courante pour créer un carrousel sur WordPress sans toucher au code.
Exemples de plugins populaires :
- WP Carousel Pro : plugin premium permettant de créer des carrousels d’images, de posts, de vidéos, de produits WooCommerce, avec de nombreux réglages (mise en page, vitesse, navigation, styles, etc.).
- Soliloquy : plugin léger conçu pour des sliders d’images rapides et responsives, avec une interface simple et des add-ons avancés dans les versions payantes.
- MetaSlider : très utilisé pour créer rapidement des sliders d’images ou de contenu et les insérer via shortcode ou bloc Gutenberg.
- Owl Carousel pour WordPress (ou plugins basés sur Owl Carousel) : permet de profiter de la bibliothèque JavaScript Owl Carousel à travers une interface WordPress conviviale.
Étapes générales pour créer un carrousel avec un plugin
- Connectez-vous à votre tableau de bord WordPress.
- Allez dans Extensions > Ajouter et recherchez un plugin de carrousel (par exemple "carousel", "slider", "image slider").
- Cliquez sur Installer puis sur Activer.
- Après activation, un nouveau menu (par exemple « WP Carousel », « MetaSlider », « Soliloquy ») apparaît généralement dans la barre latérale d’administration.
- Cliquez sur Ajouter un nouveau carrousel / nouveau slider.
- Ajoutez vos contenus :
- images (formats optimisés : JPEG, WebP, PNG léger),
- titres, légendes et descriptions si nécessaire,
- liens vers des pages, articles ou produits.
- Configurez les paramètres du carrousel :
- nombre de slides visibles,
- vitesse de défilement,
- type de transition (fondu, glissement, etc.),
- navigation (flèches, pagination, miniatures),
- lecture automatique (autoplay) et boucle infinie,
- comportement sur mobile (slides par vue, glissement tactile).
- Enregistrez votre carrousel. Le plugin vous fournit en général un shortcode ou un bloc Gutenberg spécifique.
- Insérez votre carrousel :
- dans une page ou un article via l’éditeur de blocs (bloc « Shortcode » ou bloc dédié au plugin),
- ou dans un widget ou un template de thème via le shortcode.
2. Utiliser un page builder (Elementor, Divi, SeedProd…)
Les constructeurs de pages modernes intègrent de plus en plus souvent des widgets de carrousel prêts à l’emploi.
Créer un carrousel avec Elementor
Elementor (version gratuite) propose un widget « Carrousel d’images ». Elementor Pro ajoute des widgets plus avancés, comme le carrousel d’articles ou le carrousel de diaporama.
- Créez ouéditez une page, puis cliquez sur Modifier avec Elementor.
- Ajoutez une section avec la structure de votre choix.
- Dans la colonne souhaitée, faites glisser le widget « Carrousel d’images ».
- Sélectionnez vos images dans la médiathèque et configurez :
- le nombre d’images visibles,
- la taille des images,
- les flèches de navigation et les points,
- la vitesse, l’autoplay, la boucle,
- le comportement sur mobile (slides par vue, espacement).
- Personnalisez le style (espacements, bordures, ombres, typographie des légendes, etc.).
- Enregistrez et mettez à jour la page pour voir le résultat sur le front-end.
Créer un carrousel avec Divi
Divi inclut des modules de slider et, via certains tutoriels ou extensions tierces, des carrousels plus avancés (contenu, témoignages, produits, etc.). Il estégalement possible d’intégrer un carrousel personnalisé en utilisant la bibliothèque JavaScript Swiper.js via un thème enfant.
Créer un carrousel avec SeedProd
SeedProd est un constructeur de pages qui propose un bloc « Image Carousel » dans ses versions avancées. Il permet de créer facilement des pages de vente, des landing pages et d’y intégrer des carrousels :
- installer et activer le plugin,
- créer une nouvelle page via l’interface SeedProd,
- ajouter le bloc « Image Carousel » et configurer les images, la navigation et les effets,
- publier la page une fois le design validé.
3. Utiliser un plugin de galerie ou Jetpack pour un carrousel d’images
Certains plugins de galerie, ainsi que le module de galerie de Jetpack, permettent d’activer un mode carrousel en pleinécran pour vos galeries d’images. Cette solution convient bien si vous souhaitez surtout un carrousel d’images simple intégré à vos articles de blog.
4. Créer un carrousel sans plugin (méthode avancée)
Pour les utilisateurs avancés, il est possible de créer un carrousel sans plugin, en utilisant une bibliothèque JavaScript comme Swiper.js ou Owl Carousel, en ajoutant le code dans un thème enfant ou un plugin personnalisé.
Principe général :
- Charger la bibliothèque JavaScript et la feuille de style correspondante (par exemple via le fichier
functions.phpde votre thème enfant). - Créer un balisage HTML spécifique pour le carrousel (containers, slides, pagination, flèches).
- Initialiser le carrousel avec un script JavaScript (configuration : slides visibles, effets, navigation, breakpoints responsives, etc.).
- Appliquer des styles CSS personnalisés pour adapter le carrousel au design de votre thème.
Cette méthode offre un contrôle total, mais n’est pas recommandée pour les débutants. Dans la plupart des cas, un plugin ou un page builder est plus simple et plus sûr.
Bonnes pratiques pour un carrousel WordPress performant
Un carrousel peut améliorer l’expérience utilisateur, mais mal configuré il peut aussi ralentir votre site ou nuire à la lisibilité. Voici quelques bonnes pratiques à suivre.
Optimiser les images et les médias
- Compresser les images avant de les téléverser (outils en ligne ou plugins d’optimisation d’images), afin de réduire leur poids sans sacrifier la qualité visuelle.
- Utiliser des formats adaptés (JPEG ou WebP pour les photos, PNG seulement si la transparence est nécessaire).
- Limiter la taille d’affichage : inutile de charger une image de 4000 px de large si elle est affichée en 1200 px.
- Éviter les vidéos trop lourdes dans le carrousel. Si vous utilisez des vidéos, privilégiez l’hébergement sur une plateforme externe (YouTube, Vimeo) et l’intégration via iframe ou modules dédiés.
Structure, accessibilité et SEO
- Ajouter des textes alternatifs (attribut alt) descriptifs à chaque image, pour l’accessibilité et le référencement.
- Utiliser des titres et légendes pertinents, qui décrivent clairement le contenu de chaque slide.
- Veiller à ce que la navigation soit utilisable au clavier autant que possible (tabulation, focus sur les flèches ou les boutons).
- Prévoir un contrôle de pause ou désactiver l’auto-défilement si le carrousel contient du texte important, afin de laisser le temps de lecture.
- Éviter de placer tout le contenu essentiel uniquement dans un carrousel, notamment sur la page d’accueil : certains utilisateurs ignorent les sliders, et les moteurs de recherche lisent mieux un contenu statique et structuré.
Performance et temps de chargement
- Limiter le nombre total de slides : un carrousel avec trop d’images non optimisées peut ralentir fortement la page.
- Activer, si possible, le lazy loading (chargement différé des images) pour les slides non visibles au premier affichage.
- Éviter de multiplier les carrousels sur une même page, surtout sur mobile.
- S’assurer que le plugin de carrousel est régulièrement mis à jour et compatible avec la version actuelle de WordPress et de votre thème.
Sécurité du site
- Installer uniquement des plugins de carrousel réputés, avec de bons avis et des mises à jour régulières.
- Supprimer les plugins de carrousel que vous n’utilisez plus, afin de limiter la surface d’attaque potentielle.
- Utiliser un thème enfant pour toute modification de code liée à un carrousel personnalisé (JavaScript, CSS), afin de ne pas perdre vos changements lors des mises à jour du thème principal.
Outils et ressources utiles pour vos carrousels WordPress
Pour créer et optimiser un carrousel sur WordPress de manière professionnelle, différents outils peuvent vous accompagner au-del à du simple plugin.
- Google Search Console : permet de suivre la présence de vos pages carrousel dans les résultats de recherche, de détecter des problèmes d’indexation et d’améliorer la visibilité globale de votre site.
- Google Analytics (ou un autre outil de mesure d’audience) : aide à analyser le comportement des visiteurs face à vos pages contenant un carrousel (taux de rebond, temps passé, conversions).
- Plugins de carrousel recommandés :
- WP Carousel Pro : pour des carrousels d’images, de posts, de produits ou de vidéos avec de nombreuses options d’affichage.
- Soliloquy : pour des sliders d’images simples, rapides et responsives.
- MetaSlider : pour créer facilement des sliders insérables via shortcode ou bloc.
- Plugins basés sur Owl Carousel ou Swiper : pour des carrousels très personnalisables.
- Ressources supplémentaires :
- Documentation officielle WordPress : pour comprendre le fonctionnement des shortcodes, des blocs et des thèmes enfants.
- Forums communautaires WordPress et plateformes de questions/réponses : utiles pour résoudre des problèmes spécifiques de carrousel (conflits avec un thème, CSS, JavaScript, etc.).
- Blogs et tutoriels vidéo spécialisés WordPress : de nombreux créateurs proposent des tutoriels dédiés aux carrousels avec Elementor, Divi ou sans plugin.
Intégration des shortcodes de carrousel dans un thème WordPress
Une grande partie des plugins de carrousel fonctionnent via un shortcode qu’il suffit d’insérer à l’endroit souhaité.
Comment intégrer un shortcode de carrousel dans une page ou un article
- Créez ouéditez votre carrousel dans le plugin concerné.
- Copiez le shortcode généré (par exemple
[mon_carrousel]). - Ouvrez la page ou l’article dans l’éditeur de blocs Gutenberg.
- Ajoutez un bloc « Code court » ou un bloc « Paragraphe » et collez le shortcode.
- Enregistrez ou mettez à jour votre contenu et visualisez le résultat sur le site.
Comment intégrer un shortcode de carrousel dans un fichier de thème
Si vous souhaitez afficher un carrousel directement dans un template (par exemple dans front-page.php, page.php, single.php, etc.), vous pouvez appeler le shortcode depuis le code PHP.
- Ouvrez l’éditeur de fichiers de thème via le tableau de bord WordPress (ou utilisez FTP / SFTP pour plus de sécurité).
- Sélectionnez le fichier PHP dans lequel vous souhaitez afficher le carrousel (par exemple le template de la page d’accueil ou un template spécifique de contenu).
- À l’endroit souhaité dans le code HTML/PHP, insérez une fonction permettant d’exécuter le shortcode, par exemple via
do_shortcodesi votre plugin le recommande. - Enregistrez le fichier et vérifiez l’affichage du carrousel sur votre site.
- Idéalement, effectuez ces modifications dans un thème enfant pouréviter toute perte lors des mises à jour du thème parent.
Comment rendre un carrousel WordPress vraiment responsive
La plupart des plugins et builders récents génèrent des carrousels responsives, mais il est important de vérifier et d’ajuster certains paramètres.
Paramètres de responsivité dans les plugins et builders
- Définir un nombre de slides différents selon la largeur de l’écran (par exemple 1 slide sur mobile, 2 sur tablette, 3 ou 4 sur desktop).
- Ajuster les marges et espacements entre les slides pour les petitsécrans.
- Vérifier que les flèches et points de navigation restent suffisamment grands et cliquables sur mobile.
- Tester le carrousel sur plusieurs tailles de fenêtre et différents appareils (smartphone, tablette, ordinateur portable, écran large).
CSS et adaptations supplémentaires
Si nécessaire, vous pouvez ajouter du CSS personnalisé pour corriger l’affichage sur certainsécrans :
- imposer une largeur maximale au carrousel,
- rendre les images fluides en utilisant
max-width: 100%;, - ajuster la taille du texte des légendes sur mobile,
- réduire les marges et paddings inutiles sur les petitsécrans.
Carrousels spécifiques : produits, témoignages, réseaux sociaux
Au-del à du simple carrousel d’images, vous pouvez créer des carrousels spécialisés pour certains types de contenu.
Carrousel de produits WooCommerce
- Utiliser un plugin de carrousel compatible WooCommerce, ou un module dédié dans un builder (Elementor Pro, Divi, etc.).
- Créer un carrousel de produits qui affiche les nouveautés, les produits en promotion ou les best-sellers.
- Configurer la navigation et la mise en page pour faciliter la conversion (boutons d’ajout au panier visibles, prix bien mis en avant, images de bonne qualité).
Carrousel de témoignages clients
- Utiliser un plugin ou un module « Témoignages » avec option de carrousel.
- Ajouter les avis, noms, fonctions etéventuellement photos des clients.
- Mettre en avant les témoignages les plus pertinents pour vos produits ou services.
Carrousel de publications de blog
- Recourir à un widget de carrousel de posts proposé par un builder comme Elementor Pro, Divi ou par certains plugins de carrousel avancés.
- Afficher les articles récents, les articles mis en avant, ou les contenus d’une catégorie spécifique.
- Veiller à ce que les titres et extraits soient lisibles et suffisamment explicites pour inciter au clic.
Carrousel de contenus issus des réseaux sociaux
- Installer un plugin spécialisé pour afficher un flux Instagram ou d’autres réseaux sociaux sous forme de carrousel.
- Configurer les sources (compte, hashtag) et le nombre de publications à afficher.
- Adapter la mise en page pour conserver une bonne lisibilité, surtout sur mobile.
Foire Aux Questions (FAQ)
Pourquoi utiliser un carrousel sur mon site WordPress ?
Un carrousel sur WordPress permet de présenter plusieurs contenus de manière dynamique et visuellement attractive, sans surcharger la page. Il peut mettre en avant vos meilleurs articles, vos produits phares, vos témoignages ou vos images de portfolio. Utilisé avec parcimonie et correctement optimisé, il contribue à améliorer l’expérience utilisateur et à augmenter la visibilité de certains contenus stratégiques.
Quel plugin choisir pour créer un carrousel sur WordPress ?
Le choix du plugin dépend de vos besoins :
- WP Carousel Pro : adapté si vous avez besoin de nombreux types de carrousels (images, posts, produits, vidéos) et de nombreuses options de personnalisation.
- Soliloquy : idéal si vous cherchez un plugin de slider d’images léger, rapide et simple à prendre en main.
- MetaSlider ou pluginséquivalents : conviennent bien pour des sliders d’images ou de diaporamas basiques, insérables facilement via shortcode.
- Widgets de carrousel intégrés aux builders (Elementor, Divi, SeedProd) : recommandés si vous utilisez déj à un builder et souhaitez tout gérer depuis la même interface.
Comment intégrer un shortcode de carrousel dans mon thème WordPress ?
Pour intégrer un shortcode de carrousel dans votre thème WordPress, vous pouvez procéder de la façon suivante :
- Créez votre carrousel via le plugin choisi et récupérez le shortcode correspondant.
- Ouvrez l’éditeur de thème dans votre tableau de bord WordPress ou, de préférence, les fichiers de votre thème enfant via FTP ou le gestionnaire de fichiers.
- Sélectionnez le fichier PHP dans lequel vous souhaitez afficher le carrousel (par exemple un template de page ou de contenu).
- Insérez le shortcode à l’emplacement souhaité dans le code en utilisant la méthode recommandée par votre plugin (souvent une fonction PHP qui exécute le shortcode et affiche le résultat).
- Enregistrez vos modifications, puis testez l’affichage sur votre site pour vérifier que le carrousel se comporte correctement sur desktop et mobile.
Comment rendre mon carrousel WordPress vraiment responsive ?
Pour rendre votre carrousel responsive, il est important de combiner les réglages du plugin ou du builder avec d’éventuels ajustements CSS :
- choisir un plugin ou un module qui gère nativement la responsivité et les points de rupture (breakpoints),
- configurer un nombre d’éléments adaptés parécran (par exemple 1 slide sur mobile, 2 sur tablette, 3 ou plus sur ordinateur),
- s’assurer que les images ne dépassent pas la largeur du conteneur et qu’elles se redimensionnent automatiquement,
- adapter la taille des textes et des boutons de navigation pouréviter les problèmes de lisibilité ou de clic sur mobile,
- tester systématiquement le carrousel sur plusieurs appareils (ou via les outils de prévisualisation responsive des navigateurs ou des builders).
Un carrousel est-il toujours une bonne idée pour le SEO ?
Un carrousel n’est pas intrinsèquement mauvais pour le SEO, mais il doitêtre utilisé avec discernement. Un carrousel lourd, mal optimisé et rempli de textes difficiles à lire peut ralentir la page et gêner l’expérience utilisateur. À l’inverse, un carrousel léger, bien structuré, avec des images optimisées, des balises alt pertinentes et un contenu utile peut contribuer à la mise en valeur de vos pages les plus importantes. Il est donc recommandé de l’utiliser comme un complément à un contenu statique bien rédigé, et non comme unique support d’information.
Dois-je utiliser la version gratuite ou payante d’un plugin de carrousel ?
Les versions gratuites de nombreux plugins de carrousel suffisent pour des besoins simples : carrousel d’images de base, quelques options de navigation et configuration standard. Les versions payantes deviennent intéressantes si vous avez besoin de fonctionnalités avancées :
- carrousels de posts, de produits WooCommerce ou de contenus dynamiques,
- effets et transitions avancés,
- plus de contrôles sur la responsivité et le comportement mobile,
- support technique prioritaire et mises à jour régulières.
Le choix dépend donc de la complexité de votre projet et de l’importance stratégique du carrousel dans votre site.
Articles similaires
Besoin d'aide avec votre SEO ?
Notreéquipe d'experts peut vous aider à optimiser votre site e-commerce