Comment ajouter un slider sur WordPress ? Guide complet 2025

Pourquoi intégrer un slider sur votre site WordPress ?

Le slider, ou carrousel d’images, est un élément visuel populaire pour mettre en avant vos contenus clés : promotions, articles récents, portfolios ou témoignages. Bien utilisé, il capte l’attention et améliore l’expérience utilisateur. Mais attention : un slider mal optimisé peut ralentir votre site et nuire au référencement. Dans ce guide, nous allons voir comment ajouter un slider sur WordPress de manière efficace, que vous soyez débutant ou utilisateur avancé.

Slider WordPress : les différentes approches

Il existe plusieurs méthodes pour ajouter un slider : utiliser un plugin dédié, coder manuellement, ou exploiter les fonctionnalités natives de votre thème. Chaque solution a ses avantages et inconvénients. Voici un comparatif pour vous aider à choisir.

Méthode 1 : Utiliser un plugin slider WordPress

Les plugins sont la solution la plus courante pour ajouter un slider sur WordPress sans coder. Voici les étapes avec l’un des meilleurs : Smart Slider 3.

Étape 1 : Installer et activer le plugin

Depuis votre tableau de bord WordPress, allez dans Extensions > Ajouter. Recherchez « Smart Slider 3 », puis cliquez sur « Installer » et « Activer ».

Étape 2 : Créer un nouveau slider

Une fois activé, un nouvel onglet « Smart Slider » apparaît. Cliquez sur « Nouveau slider ». Choisissez un type : slider classique, carrousel, bloc héros, etc. Donnez-lui un nom et personnalisez les dimensions.

Étape 3 : Ajouter des diapositives

Chaque diapositive peut contenir une image, une vidéo, du texte ou des boutons. Utilisez l’éditeur visuel pour positionner les éléments. Vous pouvez également appliquer des animations et transitions.

Étape 4 : Intégrer le slider dans vos pages

Smart Slider 3 génère un shortcode. Copiez-le et collez-le dans l’éditeur Gutenberg via un bloc « Shortcode » ou dans un widget de votre thème. Vous pouvez aussi utiliser le bloc dédié « Smart Slider ».

Autres plugins recommandés

• MetaSlider : léger, compatible avec Gutenberg, idéal pour les sliders simples.
• Soliloquy : réputé pour sa rapidité et sa facilité d’utilisation.
• Revolution Slider : très complet, mais plus lourd, réservé aux sites nécessitant des animations avancées.

Méthode 2 : Ajouter un slider sans plugin (code personnalisé)

Pour les développeurs, coder son propre slider offre un contrôle total et évite les extensions superflues. Voici un exemple simple avec HTML, CSS et JavaScript (bibliothèque Swiper).

Étape 1 : Préparer les fichiers

Téléchargez Swiper depuis swiperjs.com. Placez les fichiers swiper-bundle.min.css et swiper-bundle.min.js dans votre thème (par exemple dans un dossier assets).

Étape 2 : Enfiler les ressources

Dans le fichier functions.php de votre thème enfant, ajoutez :

function mon_slider_scripts() {
    wp_enqueue_style('swiper-css', get_template_directory_uri() . '/assets/swiper-bundle.min.css');
    wp_enqueue_script('swiper-js', get_template_directory_uri() . '/assets/swiper-bundle.min.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'mon_slider_scripts');

Étape 3 : Créer le HTML du slider

Dans un template ou via un shortcode, insérez la structure Swiper :

<div class="swiper monSlider">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="image1.jpg" alt="Description"></div>
    <div class="swiper-slide"><img src="image2.jpg" alt="Description"></div>
    <div class="swiper-slide"><img src="image3.jpg" alt="Description"></div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

Étape 4 : Initialiser le JavaScript

Ajoutez ce script dans votre thème ou dans un fichier JS chargé en bas de page :

new Swiper('.monSlider', {
    loop: true,
    pagination: { el: '.swiper-pagination' },
    navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
    autoplay: { delay: 3000 },
});

Méthode 3 : Utiliser les fonctionnalités natives de WordPress (Gutenberg)

Depuis WordPress 5.9, l’éditeur de blocs permet de créer des galeries d’images, mais pas de véritable slider. Cependant, des blocs tiers comme « Slider » de Kadence Blocks ou Stackable offrent cette fonctionnalité sans plugin dédié.

Exemple avec Kadence Blocks

Installez et activez Kadence Blocks. Dans l’éditeur, ajoutez le bloc « Slider ». Choisissez le nombre de diapositives, ajoutez vos images et personnalisez les options (autoplay, flèches, pagination). Simple et rapide.

Bonnes pratiques SEO pour un slider WordPress

Un slider peut nuire à votre référencement s’il n’est pas optimisé. Voici comment éviter les pièges.

1. Optimiser les images

Compressez vos images avant de les uploader (outils : TinyPNG, Imagify). Utilisez des formats modernes comme WebP. Définissez des dimensions fixes pour éviter les cumulative layout shift (CLS).

2. Réduire le nombre de diapositives

Limitez-vous à 3-5 slides. Un slider trop long ralentit le chargement et noie l’utilisateur. Privilégiez la qualité à la quantité.

3. Ajouter des textes alternatifs (alt)

Chaque image doit avoir un attribut alt descriptif et contenant des mots-clés pertinents. Évitez le bourrage de mots-clés.

4. Gérer le chargement différé (lazy loading)

Activez le lazy loading pour les images du slider. La plupart des plugins le proposent nativement. En code personnalisé, ajoutez l’attribut loading="lazy".

5. Éviter le contenu en double

Ne mettez pas le même texte dans le slider et dans le contenu principal. Le slider doit compléter, non répéter.

Erreurs fréquentes à éviter

• Slider trop lourd : multiplie les requêtes HTTP et allonge le temps de chargement.
• Autoplay agressif : un défilement trop rapide frustre les visiteurs.
• Négliger la version mobile : assurez-vous que le slider est responsive et tactile.
• Utiliser trop de plugins : cumuler plusieurs extensions slider peut causer des conflits.

Comment ajouter un slider dans une page d’accueil spécifique ?

Si vous voulez un slider uniquement sur la page d’accueil, utilisez une condition dans votre thème ou un plugin de mise en page comme Elementor. Avec Elementor, créez une template pour la page d’accueil et ajoutez le widget « Slider ».

Avec un thème classique

Dans le fichier front-page.php ou home.php, insérez le shortcode du slider à l’emplacement souhaité. Entourez-le d’une condition is_front_page() si nécessaire.

FAQ : Questions fréquentes sur les sliders WordPress

Quel est le meilleur plugin slider pour WordPress ?

Smart Slider 3 est excellent pour sa polyvalence et sa facilité d’utilisation. MetaSlider est plus léger, idéal pour les sites simples. Pour des animations poussées, Revolution Slider reste une référence malgré son poids.

Puis-je ajouter un slider sans plugin ?

Oui, en codant manuellement avec une bibliothèque JavaScript comme Swiper ou Slick. Cela offre un contrôle total et évite les extensions inutiles.

Un slider ralentit-il mon site ?

Potentiellement, oui, à cause du chargement de plusieurs images et scripts. Pour limiter l’impact, optimisez les images, utilisez le lazy loading et limitez le nombre de diapositives.

Comment ajouter un slider dans un article WordPress ?

Utilisez le shortcode du plugin ou le bloc dédié si votre éditeur le supporte. La plupart des plugins proposent un bloc Gutenberg.

Le slider est-il bon pour le SEO ?

Un slider bien optimisé (images légères, alt text, lazy loading) n’a pas d’impact négatif. En revanche, un slider mal conçu peut nuire à l’expérience utilisateur et au référencement.

Comment rendre mon slider responsive ?

Choisissez un plugin ou une bibliothèque qui gère le responsive automatiquement. En code, utilisez des unités relatives (%, vw) et des media queries pour ajuster la hauteur sur mobile.

Recommandations pour un slider efficace

Pour tirer le meilleur parti de votre slider :

• Utilisez des images de haute qualité mais légères (moins de 100 Ko chacune).
• Ajoutez un appel à l’action clair sur au moins une diapositive.
• Testez le slider sur plusieurs navigateurs et appareils.
• Évitez les animations distrayantes ; préférez des transitions douces.
• Si vous utilisez un plugin, mettez-le à jour régulièrement.

Maintenant que vous savez comment ajouter un slider sur WordPress, choisissez la méthode qui correspond à vos compétences et à vos besoins. Que vous optiez pour un plugin, du code personnalisé ou les blocs Gutenberg, l’essentiel est de garder la performance et l’expérience utilisateur au cœur de votre décision.

Photo by Guilherme Vasconcelos on Unsplash