Comment ajouter le plugin Smooth Slider à son blog WordPress

je viens d’ajouter le plugin Smooth Slider pour WordPress sur mon blog. Il y a quelques manipulations à faire, alors pour en garder trace j’ai décidé d’écrire une petite doc d’installation que je vais partager avec vous.

Smooth Slider c’est quoi ?

Ce plugin permet d’afficher un slideshow ou un diaporama des articles que vous voulez promouvoir sur votre site. Typiquement on le met en haut de la page d’accueil, juste avant les articles.

Cela donne ça :

Slideshow sur page accueil

Télécharger Smooth Slider

Le lien de téléchargement se trouve sur la page des plugins WordPress.

Installation du plugin Smooth Slider

Si vous ne savez pas comment installer un plugin, allez voir mon article Comment-sécuriser votre blog WordPress sans peine.

Activez-le.

Configurer le plugin

Une fois installé et activé vous allez voir apparaître un nouveau menu.

Menu du plugin Smooth Slider

Nosu irons voir le sous-menu Settings plus tard.

Ajouter des articles au Slider

Pour ajouter un article ou une page au slider, allez sur le dashboard et éditez un article.

Plus bas dans la page d’édition d’un article Worpress vous allez trouver une zone ressemblant à ceci :

Ajout d'un article dans le plugin Smooth SliderPour ajouter l’article il faut cocher la case à cocher « Add this post/page to ».

Vous pouvez ajouter l’article à un autre slider, mais il vous suffira de prendre celui qui a été créé par défaut (surligné en bleu sur la capture d’écran).

Faites cela pour tous les articles et pages que vous voulez ajouter dans le slider.

Vous pourrez visualiser les articles ajoutés dans le menu Smooth Slider / Sliders.

Relooker le plugin

Maintentant, cliquez sur le menu Smooth Slider / Settings.

Une page apparaît sur laquelle vous pouvez modifier l’apparence du slider.

Vous pouvez saisir les valeurs suivantes :

  • Number of Posts in the Slideshow : le nombre d’articles que vous voulez afficher
  • WordPress Image Extract Size : Thumbnail
  • Pick content From : From Content
  • Maximum content size (in characters) : 200
  • Maximum content size (in words) : 20

Vous pouvez aussi changer les couleurs de la bordure, du fond, du titre, du contenu.

Je vous conseille de changer Read more et Featured posts en une traduction en Français.

N’oubliez pas de sauvegarder les modifications.

Afficher le slider dans la page d’accueil

Pour finir il nous faut afficher le Smooth Slider dans la page d’accueil. On notera que l’on dispose aussi d’un widget (dans le menu Widgets du dashboard WordPress) mais je ne vais pas l’aborder. Vous pouvez l’utiliser dans une colonne ou un pied de page.

Pour afficher le slider dans la page d’accueil de votre blog il faut un peu bricoler.

Il y a des instructions sur la page d’installation de Smooth Slider, mais dans ma version de WordPress et avec le thème Mystique, voici comment faire.

Utilisez le menu Appearance / Editor du dashboard pour éditer le fichier home.php de Mystique (il faut sélectionner dans la liste déroulante en haut à droite Mystique puis cliquer sur Select).

plugin smooth slider édition du fichier home

Dans le fichier home.php (qui se situe dans wp-content/themes/mystique) il faut repérer la ligne :

<?php if(have_posts()): ?>

Et ajouter sur la ligne précédente les lignes :

        <?php if ( function_exists( 'get_smooth_slider' ) ) { get_smooth_slider(); ?>
        <p/>
        <br/>
        <?php }  ?>

Sauvegardez et voilà, c’est fait !

Ouvrez la page d’accuiel de votre blog et corrigez l’apparence dans le menu Smooth Slider / Settings.

Gérer les articles et pages dans le slider

Pour gérer les éléments affichés dans le slider, les supprimer ou changer le titre, il faut aller dans le menu Smooth Slider / Sliders.

Ajouter une image

Smooth Slider prend les images d’illustration des articles, mais, pour une raison quelconque, vous pouvez considérer que l’image ne convient pas.

Vous pouvez donc télécharger une nouvelle image. Dans la page d’édition d’une image (de la mediathèque) il est possible d’associer cette image à Smooth Slider et d’indiquer l’url de l’article vers lequel elle devra pointer dans le slider.

Ajouter une image au plugin smooth slider

Conclusion

Si vous rencontrez des différences, merci de les noter dans les commentaires pour partager avec tout le monde.

À bientôt,

Michel.

 

Comments ( 12 )

  1. Mick
    Moi j'ai un soucis avec le plugin. Au lieu de se suivre, que ce soit avec l'une ou l'autre des animations proposées. Mes articles sont superposés (comme des calques que l'ont pose les uns sur les autres) et ne bougent pas. Alors que dans le "setting", l'aperçu est nikel.
    • Michel de Changer Gagner
      Bonjour Mick. Cela peut-être dû : - au thème que tu utilises - au navigateur que tu utilises (il doit être récent) - ... Pose la question aux auteurs du plugin ou sur un forum de développeurs WP. Sinon, il doit exister d'autres plugins de ce genre.
  2. Célila
    Salut, merci pour le tuto. Par contre idem que Mick, les images du slider sont superposées et ne s'affichent pas comme un slider normal. Cela peut-il être du à la mise à jour de Wordpress ? Est ce que Mick à trouvé une solution ? Je vais continuer à chercher de mon côté, si je trouve je vous informe. Merci.
  3. Mick
    Salut Célila. Non je n'ai pas trouvé de solutions. Mais je n'ai pas essayé de changer de thème pour voir. Tu l'as fait toi? C'est dommage, la preview dans le setting du plugin rend bien pourtant.
  4. Célila
    Salut Mick. Impossible pour moi de changer le thème, car c'est un thème sur mesure que je dois garder. Je pense que c'est une question de config du module Smooth Slider tout simplement mais je continue de chercher. Si je trouve j'en ferais part. Merci.
    • Michel de Changer Gagner
      Célila, il faut aussi vérifier où est implémenté le plugin dans votre page. Il suffit qu'il soit dans une DIV HTML qui ne va pas pour que cela fasse n'importe quoi. Enregistrez la page au format HTML, puis essayer de déplacer le code du plugin pour voir si cela marche mieux.
  5. Mick
    Moi j'ai placé la DIV un peu partout dans index.php (ou dans header.php). Résultat, le slider bouge en fonction de son emplacement dans les .php, mais les articles se chevauchent encore.
  6. Célila
    Bonjour. Effectivement, après tests le fait de placer le slider dans une DIV autre ne m'a pas servi. Je continue mes recherches. Merci.
    • Michel de Changer Gagner
      Avez-vous édité le fichier home.php ? Voici ce qu'il y a dans le mien : (enregistrer l'image avec un clic droit pour la voir en plus grand ou cliquer dessus.
  7. immobilier Montpellier
    Bel article, très bien ecrit, comme toujours sur ce site. Je repartage ce billet tout de suite ! merci pour ces informations fortes interessantes.
  8. maximilien
    tres pratique comme plugin, surtout bien expliqué dans cet article de qualité!

Leave a reply

Your email address will not be published.

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge