MetaSlider : un plugin WordPress pour gérer vos diaporamas

MetaSlider est un plugin gratuit, facile à prendre en main, ergonomique, bien conçu et facile d’utilisation. Il permet de créer un ou plusieurs sliders, de définir le style d’affichage, d’ajouter (ou non) des légendes, de paramétrer les délais et la vitesse, et est compatible avec les principaux plugins de gestion de langues (WPML, PolyLang). Bref, c’est le plugin idéal pour ajouter rapidement un slider simple mais complet à vos pages, articles ou dans les fichiers de votre thème.

Cette présentation du plugin a été écrite pour la  Version 3.7.2 sur WordPress 4.9.6.
Après avoir installé et activé le plugin MetaSlider, vous trouverez un nouvel item dans la barre latérale de votre back-office.

Créez votre premier slider

• Rendez vous dans la page de configuration de MetaSlider
• Cliquez sur Ajouter une diapositive
• Sélectionnez dans le gestionnaire de médias les photos que vous souhaitez ajouter
• Cliquer sur Add to slideshow

Prévisualiser votre slider

Vous pouvez à tout moment prévisualiser votre slider en cliquant sur le lien Preview, placé à coté du bouton Enregistrer.

Configurer chaque image

Chaque image peut-être configurée individuellement.

Onglet général

Vous pouvez ajouter une légende à chaque image (soit la légende associée par défaut à la photo, soit une légende personnalisée en décochant « use the image caption »), ainsi que l’URL qui sera utilisée pour rediriger l’utilisateur si il clique sur la photo (avec la possibilité de forcer l’ouverture d’une nouvelle page).

Onglet SEO

Dans cet onglet vous pouvez définir le nom de l’image et le texte alternatif.

Onglet recadrage

Si votre photo n’est pas aux bonnes dimension pour le slider, elle sera recadrée. Par défaut l’image est centrée au centre, mais vous pouvez ici choisir quel type de recadrage est adapté à chaque photo :

Le style du slider

4 styles sont proposés par défaut : Flexslider, R.Slides, Nivo Slider, Coin Slider.

Le style Flex Slider

Ce style vous permet de configurer des enchainements en fondu ou ou défilement et il est responsive.

Le style R.Slides

Ce style vous permet de configurer des enchainements en fondu et il est responsive.

Le style Nivo Slider

Ce style vous permet de configurer des enchainements en aléatoire, défilement, mosaîque, balayage ou plier (dans cet exemple, j’ai choisi le mode aléatoire) et il est responsive.

le style Coin Slider

Ce style vous permet de configurer des enchainements en aléatoire, tourbillon, pluie ou tout droit (dans cet exemple, j’ai choisi le mode aléatoire). Attention, ce slider n’est pas responsive.

Réglages avancés

Dans le bloc réglages avancés, vous pouvez configurer votre slider pour :

• Afficher des images dans un ordre aléatoire
• Que l’image se fige au survol de la souris
• définir le délai entre deux diapositives et deux carrés
• définir le signe « précédent » et « suivant »
• définir l’opacité
• définir la vitesse de la légende
• appliquer des classes CSS

Afficher votre slider

Dans un article ou une page

Pour afficher un slider dans un article ou une page, vous pouvez utiliser le shortcode suivant :

[pastacode lang= »markup » manual= »%5Bmetaslider%20id%3D%22XXX%22%5D » message= » » highlight= » » provider= »manual »/]

Dans votre thème

Pour afficher un slider dans un fichier de votre thème, vous pouvez utiliser le shortcode de cette manière :

[pastacode lang= »php » manual= »%3C%3Fphp%20echo%20do_shortcode(‘%5Bmetaslider%20id%3D%22XXX%22%5D’)%3B%20%3F%3E » message= » » highlight= » » provider= »manual »/]

Bonne mise en place 🙂

 

 

---

Si cet article vous a aidé, si vous avez des questions ou des améliorations à proposer, n'hésitez pas à me laisser un commentaire en bas de page !