Skip to content

Tout pour WordPress, le développement web — et plus encore

🔄 Comment créer un slider dynamique dans WordPress : un guide complet

🔄 Comment créer un slider dynamique dans WordPress : un guide complet

Les pages statiques fonctionnent bien pour les landing pages: vous arrivez, lisez un titre, cliquez sur un bouton. Mais dès qu’un site dépasse la dizaine d’articles, de produits ou de lieux, le contenu statique atteint ses limites. Modifier chaque page manuellement est une impasse. Et changer la structure d’un slider sur cinquante articles en une seule fois? Sans contenu dynamique, c’est impossible.

Le problème n’est pas le manque de temps. Le problème, c’est que WordPress fonctionne par défaut avec des blocs statiques: un slider égale un jeu d’images. Si une chaîne de salles de sport a dix établissements, il vous faut dix sliders. La solution est un slider dynamique qui va chercher le contenu directement dans la base de données et affiche automatiquement les images, les tarifs et les titres pertinents pour chaque fiche.

Voici un guide complet: du concept de contenu dynamique jusqu’à la mise en place de deux types de sliders en combinant Toolset et Gutenberg. Un minimum de code, un maximum d’automatisation.

💡 Aperçu rapide:

  • Comprendre en quoi le contenu dynamique se distingue du statique et où il est réellement nécessaire.
  • Choisir le bon type de slider: images ou contenu d’article (tâches différentes, logiques différentes).
  • Choisir une extension: Toolset pour un contrôle total de la structure, Slider Revolution pour la puissance visuelle, Smart Slider 3 pour un démarrage rapide.
  • Suivre la configuration pas à pas d’un slider d’images dynamique (CPT, champs, template, bloc slider).
  • Configurer un slider de contenu d’article dynamique avec les Vues et les conteneurs Toolset.

Qu’est-ce que le contenu dynamique et pourquoi votre site WordPress en a besoin

Le contenu dynamique est une information affichée sur une page qui change selon l’article, le produit ou l’enregistrement en base de données que vous consultez. À l’inverse, le contenu statique reste identique quel que soit le contexte.

Le contenu statique se justifie sur les landing pages. La page de téléchargement de WordPress.org en est un exemple classique: le titre, la description et le bouton ne changent pas, peu importe qui clique.

Page de téléchargement statique de WordPress org

En revanche, si vous avez un blog, le statique ne fonctionne pas. Un nouvel article doit apparaître automatiquement en haut du fil. Si le contenu est statique, la première position est occupée indéfiniment par le même article. Un fil dynamique, lui, se réorganise après chaque publication.

Flux de blog dynamique avec les derniers articles

Autre scénario: un site de voyages avec un type de contenu personnalisé pour les circuits. Chaque circuit est un article distinct avec son propre prix, ses dates et ses photos. Vous pourriez concevoir chaque circuit individuellement, mais que se passe-t-il si vous décidez de modifier la structure de la fiche? Vous devrez éditer tous les articles manuellement.

Exemple de type de publication personnalisé pour des circuits

La bonne solution consiste à créer un template avec du contenu dynamique: le titre, les images et le prix sont extraits automatiquement des champs de l’article. Vous cliquez sur «Semuc Champey» et vous voyez les informations le concernant. Vous cliquez sur «Vallée des Rois» et le contenu change. Un seul template pour tous les articles.

Types de sliders dynamiques

1. Slider d’images dynamique

Exemple de diaporama d'images dynamique WordPress

Un slider d’images dynamique est un bloc que vous placez une seule fois dans un template, et il extrait les images de la base de données en fonction de l’article consulté. Un seul slider sert pour tous les articles de ce type.

L’exemple type est le site d’une chaîne de fitness. Vous avez un type de contenu personnalisé appelé «Salle» et dix établissements. La page de chaque établissement a besoin d’un slider avec les photos de cette salle spécifique. Au lieu de dix sliders, vous créez un slider dans le template, et il affiche automatiquement les images du champ «Galerie photo» de l’article en cours.

Un slider statique ne fonctionnerait pas ici: il montrerait les mêmes images pour l’établissement du centre-ville et celui de la banlieue.

2. Slider de contenu d’article dynamique

Diaporama de contenu dynamique avec texte et prix

De nombreux sliders ont besoin de plus que de simples images. Les sliders sur les pages d’accueil contiennent souvent des titres, des descriptions, des prix et des boutons, et toutes ces informations doivent changer d’une diapositive à l’autre.

Revenons à la chaîne de fitness: trois diapositives, chacune représentant une salle. Si vous affichez uniquement une image de fond, les visiteurs ne connaîtront ni le nom de la salle, ni le coût de l’abonnement, ni les équipements disponibles. La solution est un slider de contenu dynamique construit sur des champs personnalisés: l’image, le nom, le prix, l’adresse et le bouton d’appel à l’action sont extraits des champs meta de chaque fiche salle.

Chaque diapositive fonctionne ici comme une page distincte. Vous faites glisser, et le contenu change complètement pour afficher les informations d’un autre établissement. Le contenu statique ne peut pas produire cet effet.

Extensions pour créer des sliders dynamiques

Trois outils couvrent pratiquement tous les besoins, du lancement rapide à la personnalisation poussée de la structure.

1. Toolset

Interface de l'extension Toolset pour WordPress

🔗 Site officiel de Toolset

Toolset est l’un des outils les plus polyvalents pour construire des sites WordPress avec du contenu dynamique. Son produit phare, Toolset Blocks, est une extension Gutenberg qui vous permet d’afficher du contenu personnalisé sans coder: sliders, champs personnalisés, gabarits de conception, archives, recherche et cartes.

L’avantage clé de Toolset, c’est l’intégration: vous créez des types de publication personnalisés, vous ajoutez des champs personnalisés (y compris des champs répétables comme des galeries d’images), vous construisez un gabarit avec des blocs dynamiques, et vous obtenez une structure entièrement automatisée. Au-delà des sliders, Toolset propose la recherche sur le site, des formulaires front-end et l’intégration de cartes, le tout dans un seul package.

2. Slider Revolution

Extension Slider Revolution pour WordPress

🔗 Site officiel de Slider Revolution

Slider Revolution est le choix à faire lorsque vous avez besoin d’une flexibilité visuelle maximale. La version 7 propose un éditeur visuel, plus de 200 modèles et des modules de contenu dynamique intégrés qui vous permettent d’intégrer directement des articles WordPress dans les diapositives.

Une remarque importante: Slider Revolution crée des sliders dynamiques mais ne crée pas les champs personnalisés depuis lesquels vous allez extraire les données. Vous aurez besoin soit d’un thème avec une prise en charge native des champs personnalisés, soit d’un plugin séparé (ACF, Meta Box, Pods), soit de champs écrits en code. Plus de 9 millions de sites utilisent ce plugin, ce qui en fait le constructeur de sliders le plus populaire pour WordPress.

3. Smart Slider 3

Extension Smart Slider 3 pour WordPress

🔗 Smart Slider 3 sur WordPress.org

Smart Slider 3 se distingue par son éditeur de diapositives en direct intuitif: vous voyez le résultat en temps réel. La version gratuite peut construire des diapositives dynamiques à partir des articles WordPress (avec filtrage par catégories et étiquettes). La version Pro étend les sources aux types de publication personnalisés, aux produits WooCommerce, aux flux de réseaux sociaux (Facebook, Twitter, YouTube, Flickr) et aux événements provenant de plugins de calendrier.

Un autre atout est la compatibilité avec tous les constructeurs de pages populaires: Elementor, Divi, Beaver Builder, Gutenberg et d’autres. Pour un lancement rapide sans configuration approfondie de la structure, c’est l’une des options les plus équilibrées.

Comment créer un slider d’images dynamique

Passons à la pratique. Je vais vous montrer la configuration avec Toolset et ses blocs Gutenberg. Toolset a été choisi parce qu’il couvre l’ensemble du cycle: champs personnalisés → template → slider, sans avoir à jongler entre différents plugins.

Pour référence, voici le guide vidéo officiel de Toolset sur les galeries et sliders dynamiques pour les templates.

J’utilise le site de démonstration d’une chaîne de fitness fourni par Toolset, basé sur le template gratuit de salle de sport. L’objectif: ajouter à chaque fiche du type de publication «Gym» un slider qui affiche les photos de cette salle en particulier.

Étape 1. Créer un type de publication personnalisé et des champs personnalisés

Avant d’ajouter un slider, vous devez préparer la structure: créez un type de publication personnalisé (CPT) et définissez les données à afficher.

Créer un type de publication dans Toolset se fait en une seule action; il suffit de lui attribuer un nom.

Création d'un type de publication personnalisé dans Toolset

Une fois le type de publication «Gym» prêt, configurez son contenu via des champs personnalisés. Pour un slider d’images, vous avez besoin d’un champ de type galerie. Mais un champ personnalisé classique stocke une seule valeur, alors qu’un slider nécessite plusieurs images.

La solution est un champ personnalisé répétable. Toolset vous permet de rendre un champ répétable en cochant une simple case lors de sa création.

Configuration d'un champ personnalisé répétable dans Toolset

En plus de la galerie, j’ai ajouté des champs pour la note, l’adresse et les horaires d’ouverture, qui seront utiles pour le slider de contenu de publication dans la deuxième partie de ce guide.

Ensemble de champs personnalisés pour une publication de salle de sport dans Toolset

Étape 2. Ajouter des images aux publications

Le champ est créé; il faut maintenant le remplir avec du contenu. Allez dans chaque fiche du type «Gym» et ajoutez des images au champ «Galerie photo» de la même manière que vous ajoutez une image mise en avant: cliquez sur le bouton «+» → téléversez.

Téléversement d'images dans la galerie photo d'une publication de salle de sport

Ces images servent désormais de source pour le slider dynamique. Chaque fiche de salle de sport affiche en front-end toutes les images ajoutées à sa «Galerie photo».

Étape 3. Ajouter le slider au template

Une fois le champ personnalisé alimenté, créez le slider dynamique. Vous devez déjà disposer d’un template pour les publications (Toolset → Templates).

J’insère le bloc Image Slider de Toolset dans le template. Comme les images sont déjà téléversées dans le champ «Galerie photo», je sélectionne une source dynamique et j’indique ce champ.

Bloc Diaporama d'images Toolset dans un template Gutenberg

Le slider affiche les images téléversées dans le champ personnalisé sélectionné.

Diaporama d'images dynamique dans l'éditeur Toolset

Vous pouvez vérifier que le slider est bien dynamique grâce à la liste déroulante en haut de l’éditeur: passez à une autre publication, et le slider charge les images de cette publication. Cela fonctionne.

Bien que cet exemple utilise Toolset, la plupart des sliders WordPress dotés de fonctionnalités dynamiques reposent sur une logique similaire: vous créez d’abord le contenu, puis vous sélectionnez une source de données «dynamique» lorsque vous ajoutez le slider à une publication, une page ou un template.

Comment créer un slider de contenu de publication dynamique

Si votre slider doit afficher non seulement des images, mais aussi des titres, des prix, des notes et des boutons, construisez-le avec Toolset Views. Le tutoriel vidéo de Toolset couvre ce scénario en détail.

Étape 1. Créer un type de publication personnalisé avec des champs

La base est la même que pour le slider d’images: un type personnalisé «Gym» avec des champs pour le nom, le prix, la note, l’adresse et la galerie. Je réutilise la structure déjà créée dans la première partie.

Étape 2. Configurer les sources dynamiques via Views

Contrairement au slider d’images, je travaille ici avec le bloc Views. Il charge des publications depuis la base de données et les affiche sous différents formats, y compris un slider.

Bloc Vues Toolset pour charger des publications depuis la base de données

Après avoir inséré le bloc Views, je lance l'assistant de configuration. Je définis la pagination pour que les visiteurs puissent passer d'une diapositive à l'autre et je laisse le style non formaté (je gérerai le style plus tard avec des conteneurs).

Configuration de la pagination et du style pour le bloc Vues

Je sélectionne le type de publication source, «Gym». La vue est créée.

Maintenant, dans la barre latérale droite du slider, je configure son comportement. D'abord, je sélectionne le bloc Views via la navigation par blocs dans le coin supérieur gauche.

Barre latérale des paramètres du diaporama dans Vues Toolset

Une fois la structure du slider prête, j'insère un bloc conteneur et je le remplis avec du contenu dynamique: image de fond, titre, prix, note, adresse, bouton. Lors de l'ajout de chaque élément, je choisis «Sources dynamiques» → le champ personnalisé approprié → je configure les paramètres d'affichage (couleurs, polices, positionnement).

Étape 3. Vérifier le résultat sur le front-end

Je sauvegarde le slider et je le vérifie sur le front-end. Selon les champs ajoutés, vous devriez voir un slider de contenu dynamique entièrement fonctionnel: chaque diapositive affiche les données d'une salle de sport spécifique.

Diaporama de contenu dynamique finalisé en front-end

Le principe est universel: Toolset propose une sélection de source de données dynamique pour chaque bloc, Slider Revolution inclut des modules de contenu dynamique intégrés et Smart Slider 3 utilise des générateurs. La logique est la même partout: insérer un module de contenu, attribuer une source dynamique, configurer les styles.

⁉️🤔 Foire aux questions

Dois-je savoir coder pour créer des sliders dynamiques?

Avec les plugins mentionnés, non. Toolset fonctionne entièrement via l'éditeur visuel Gutenberg, Slider Revolution via son propre constructeur visuel et Smart Slider 3 via un éditeur en direct. Une compréhension de base de la structure de WordPress (types de publication, champs personnalisés) suffit. Si vous codez un slider from scratch en PHP, vous aurez besoin de connaître WP_Query, les boucles et les champs meta.

Quel plugin choisir pour mon premier slider dynamique?

Si vous avez besoin d'un contrôle total sur la structure (CPT, champs, templates), choisissez Toolset. Si les résultats visuels et les animations sont plus importants, choisissez Slider Revolution. Si vous avez besoin d'un démarrage rapide avec une configuration minimale, choisissez Smart Slider 3 (la version gratuite suffit pour un slider à partir d'articles classiques). Les trois plugins sont activement maintenus et mis à jour en 2026.

Puis-je créer un slider dynamique avec des produits WooCommerce?

Oui, les trois plugins le permettent. Smart Slider 3 Pro fonctionne directement avec les produits WooCommerce comme source de diapositives dynamiques. Slider Revolution utilise son module de contenu dynamique pour récupérer n'importe quel champ personnalisé, y compris les champs WooCommerce. Toolset peut charger des produits en tant que type de publication personnalisé via Views et les afficher dans un slider.

Que faire si le slider n'apparaît pas sur la page?

D'abord, ouvrez la console du navigateur (F12) et vérifiez les erreurs JavaScript. Une cause fréquente est un thème ou un autre plugin qui charge une version obsolète de jQuery, bloquant le script du slider. Ensuite, vérifiez que le shortcode ou le bloc du slider est inséré au bon endroit dans le template. Enfin, assurez-vous que la source dynamique pointe bien vers un champ personnalisé existant avec du contenu.

Dois-je créer un type de publication personnalisé pour un slider dynamique?

Non. Smart Slider 3 et Slider Revolution peuvent construire des diapositives dynamiques à partir des articles et pages WordPress standards. Un type personnalisé est nécessaire lorsque vous travaillez avec un type de contenu spécifique (salles de sport, circuits, portfolio) qui a sa propre structure de champs.

Est-ce que l'implémentation d'un slider dynamique vaut le coup en 2026

Les sliders dynamiques ne sont plus un outil de niche réservé aux développeurs. Des plugins modernes comme Toolset, Slider Revolution 7 et Smart Slider 3 ont rendu la technologie accessible à toute personne capable de travailler avec les blocs Gutenberg. Un template configuré une seule fois alimente automatiquement des dizaines ou des centaines d'articles: ajoutez une nouvelle adresse, un circuit ou un produit, et le slider sur sa page fonctionne déjà.

Si votre site comporte plus de cinq entités similaires nécessitant leur propre slider, l'approche dynamique rentabilise le temps de configuration dès les trois premières. Le contenu statique implique ici de modifier manuellement chaque page à chaque changement, et en 2026, c'est un gaspillage de ressources injustifié.