Ajouter un slider sur la page d’accueil de son site WordPress

Ajouter un slideshow sur la page d'accueil de son site Wordpress

Dernièrement, j’ai voulu ajouter un slider sur la page d’accueil d’un autre site WordPress que je gère. Je me suis donc renseigné sur le meilleur plug-in à utiliser pour atteindre cet objectif. Après quelques tests, je me suis résolu à faire appel à Easing Slider.

1è étape : paramétrer son diaporama avec Easing Slider

Une fois l’extension installée dans votre administration WordPress, le plug-in apparaît sous l’intitulé « Sliders ». Il vous suffit simplement de cliquer dessus et d’ajouter un slider. Vous pourrez alors attribuer un nom à votre diaporama et effectuer quelques réglages tels que :

  • les dimensions,
  • les effets de transitions,
  • l’activation ou non des flèches de navigation,
  • l’activation ou non des icones de pagination,
  • la lecture automatique

Interface du plug-i Easing Slider

Une fois ces paramètres définis, il ne vous reste plus qu’à cliquer sur « Ajouter des slides ». Ensuite, pour que votre diaporama s’affiche sur votre site, vous devez cliquer sur le nom de votre nouveau slider et, au choix, récupérer le shortcode que vous placerez dans votre page d’accueil (rubrique « Pages » dans le back-office WordPress) ou en copiant la fonction que vous irez placer dans votre fichier index.php pour n’afficher votre slider que sur la page d’accueil ou dans le fichier header.php pour qu’il s’affiche sur l’ensemble de vos pages.

Code Php Easing Slider

 

Néanmoins, tout comme moi, vous pourriez avoir un petit problème qui est simplement lié à la manière dont votre thème est fabriqué. Aussi, dans mon cas, en ajoutant le shortcode dans la page « Accueil », cela faisait bugger mon site, générant ainsi une page blanche. Idem lorsque j’ajoutais la fonction Php dans le fichier index.php. Seul l’ajout du code dans le fichier header.php fonctionnait. Malheureusement, le diaporama s’affichait sur l’ensemble des pages, ceque je ne voulais pas. Il a fallu que je trouve une solution.

2è étape : adapter la fonction php

J’ai donc sillonné les forums à la recherche d’un code php spécifique et voici ce que j’ai trouvé :

<?php if ( is_home() ) { if ( function_exists( ‘easingslider’ ) ) { easingslider( 2032 ); } } ?>

Vous devez ajouter ce code dans votre fichier header.php. Bien sûr, l’ID « 2032 » devrait être différent pour vous. En fait, cette ligne de code est la même que la fonction que vous propose de copier Easing Slider à cela près qu’on précise, via la fonction is_home, qu’on ne veut l’afficher que sur la page d’accueil.

Encore une fois, dans mon cas personnel (certainement est-ce dû à mon thème WordPress), ce code ne fonctionnait pas et affichait, là encore, une page blanche.

Grâce à l’intervention d’un ami développeur, David Durand, j’ai enfin pu obtenir la ligne de code qui marche pour mon site. Il suffit de remplacer la fonction is_home par la fonction is_page et de récupérer l’ID de votre page d’accueil pour préciser qu’on ne cible qu’elle.

<?php if ( is_page( 80 ) ) { if ( function_exists( ‘easingslider’ ) ) { easingslider( 2032 ); } } ?>

Comment récupérer l’ID de votre page d’accueil ?

Pour récupérer l’ID de votre page d’accueil, rien de plus simple, il vous suffit de vous rendre dans vos pages, de passer votre souris (sans cliquer) sur le nom de votre page d’accueil et, en bas à gauche de la fenêtre de votre navigateur de repérer l’identifiant correspondant. Pou ma part, l’ID de ma page d’accueil était le numéro 80.

Récupérer l'identifiant d'une page dans WordPress

Autre possibilité (selon votre thème)

J’ai essayé de mettre en place un slider uniquement sur la page d’accueil d’un autre site, installé sur le thème WordPress « Travelify » mais la solution que je préconisais au-dessus ne semblait pas fonctionner. C’est pourquoi je me permets de vous proposer une autre alternative à partir de laquelle je vous invite à faire des essais en fonction de votre thème.

Dans ce cas présent, j’ai ajouté la ligne du slider dans mon fichier header.php.

<?php if ( is_page( 80 ) && function_exists( ‘easingslider’ ) ) { easingslider( 2270 ); } ?>

Voilà, j’espère que vous aussi cela pourra vous être utile.

S’il y a des experts sur le sujet, je vous invite à me laisser un commentaire si certains aspects techniques ont été mal présentés.

 

6 commentaires

  1. Jérémy dit :

    Hello Antho,

    Merci pour ton article. Il m’a vivement intéressé car, justement la semaine dernière, j’ai cherché un plug-in afin de faire des Sliders sur WordPress pour l’un de mes sites. Pour ma part, j’ai pris Meta Slider car il était beaucoup téléchargé et bien noté… Mais je vais quand même tester Easing Slider.

    Pareil pour l’ID de la page d’accueil, encore un hasard je te jure c’est vrai, j’avais rapidement chercher à le connaître et je n’avais pas réussi. En effet, j’avais trouvé pour toutes les pages par une autre méthode (en allant sur chacune des pages et en cliquant sur « obtenir le lien court ») mais cette technique ne fonctionnait pas pour la PA. Alors merci de l’info. Surtout, ta méthode est bien plus rapide que la mienne 😉

    A toute.
    Jérémy.

  2. Eyram ADZRA dit :

    Merci pour ce tuto si bien expliqué et détaillé. Je passais donc ma deuxième journée de travail à chercher le bon plugin et la bonne configuration. Là c’est bon, ça marche parfaitement, un plaisir. Merci.

  3. Dith dit :

    Bonjour, merci pour ce post utile pour beaucoup de personnes je suppose ;).
    J’avais une petite question, je souhaiterais que le slider s’affiche sur toutes les pages, mais quand je mets la page d’accueil en statique, le slider n’apparait pas justement, et je ne trouve pas la solution…

    Cordialement.

  4. Jeremie dit :

    Article très utile, ça m’a beaucoup servi.
    Merci beaucoup.

  5. florent dit :

    Salut,

    Je dois faire des modif sur le thème Ironband et ainsi ajouter un slider.

    J’ai créé 2 slides mais je ne vois pas comment les insérer ensuite..

    J’ai donc tenté d’installer Easing Slider et cela m’a mis un message d’erreur quand j’ai voulu l’activer :

    Fatal error: Can’t inherit abstract function EasingSlider\Foundation\Contracts\Activation\Activator::activate() (previously declared abstract in EasingSlider\Foundation\Activation\Activator) in C:\Users\FLO\Desktop\InstantWP_4.5\iwpserver\htdocs\wordpress\wp-content\plugins\easing-slider\src\Foundation\Activation\Activator.php on line 15

    help :-)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Retour en haut