Après notre lancement de WPBeginner Coupons hier, nous sommes totalement concentrés sur la Version du meilleur design pour le site principal de WPBeginner qui intègre tout tout en gardant une belle apparence. Nous voulions ajouter un Diaporama dans notre site, mais chaque script avait ses limites. Alors merci au génial Matt Mickiewicz de 99designs, SitePoint, et Flippa(voir son interview sur WPBeginner) pour nous avoir référé aux gens de Digital Telepathy qui sont les créateurs de Diaporama (de loin le meilleur script de slider sur le web). Nous avons joué avec, et nous avons été impressionnés. Il est idéal pour les débutants, car il s’agit d’une extension WordPress terminée qui vous permet d’utiliser l’interface drag-drop pour créer des Diaporamas. Cependant, il est également génial pour les développeurs/développeuses parce qu’il a une version jQuery qui offre une liberté supplémentaire aux développeurs pour le personnaliser selon leurs besoins. Dans cet article, nous allons vous afficher comment vous pouvez créer un slider dans WordPress sans modifier une seule ligne de code avec le plugin WordPress SlideDeck.
Si vous voulez voir ce que vous pouvez créer avec cette extension, consultez cette page de démonstration LIVE.
Étape par étape. Téléchargement et installation de l’extension
Titre sur le site de SlideDeck et téléchargez l’extension. Ils ont une version GRATUITE et une version PRO qui offre du support et beaucoup plus de fonctionnalités. Chaque fois que nous travaillons avec un nouveau produit, nous obtenons toujours la version de support. Nous nous sommes retrouvés épinglés plusieurs fois dans notre développement, et leur support a été incroyable et nous a aidés. Nous vous recommandons fortement d’obtenir la version PRO car elle inclut des mis en avant comme : Diapositives verticales, Support des écrans tactiles, Support, Flux RSS Smart SlideDecks, Support des images d’arrière-plan, et bien plus encore.
Une fois que vous avez téléchargé le plugin, allez-y et installez/activez le plugin. (Suivez notre Guide d’installation d’un plugin WordPress étape par étape)
Créons un Diaporama
Une fois l’extension activée, vous verrez un nouvel onglet ajouté appelé SlideDeck. Allons-y et cliquons sur Ajouter un nouveau SlideDeck. Vous serez invité à un écran qui ressemble au panneau d’écriture de publication.
Nous avons donc ajouté le contenu à notre diapositive et lui avons donné un titre. Nous aurions pu personnaliser l’image arrière-plan (fonctionnalité PRO), mais par souci de simplicité, nous ne l’avons pas fait. Nous voulons afficher ce que cette extension peut faire dans sa version standard. C’était notre première diapositive standard. La diapositive suivante que nous avons ajoutée à notre démo était une diapositive verticale (fonctionnalité PRO). Les diapositives verticales sont essentiellement des diapositives multiples dans une diapositive. Si vous regardez dans l’image ci-dessus, il y a un bouton appelé Convert to Vertical Slide (Convertir en diapositive verticale). C’est sur ce bouton que nous avons cliqué pour notre diapositive suivante, et voici ce qui s’est ajouté :
Répétez le processus pour autant de diapositives que vous le souhaitez. Une fois que vous avez fini de créer des diapositives, regardons les options de SlideDeck pour publier les diapositives sur votre site. Ces options se trouvent dans la partie droite de l’écran Modifier les diapositives.
Vous pouvez sélectionner la lecture automatique, permettre la navigation au clavier, autoriser la navigation par défilement de la souris, définir la vitesse d’animation, choisir l’un de leurs superbes habillages et sélectionner la diapositive à partir de laquelle vous souhaitez commencer. Vous pouvez également trier les diapositives par glisser-déposer. Vous voyez qu’il y a un extrait de code de thème qui a le code pour vous d’inclure dans votre thème. Vous pouvez l’ajouter où vous voulez dans votre thème. Oh attendez, n’avons-nous pas dit que vous n’aurez pas à modifier une seule ligne de code pour intégrer SlideDeck dans WordPress. Oui, nous allons épingler nos mots dans ce tutoriel. Laissez-nous vous afficher comment vous pouvez l’intégrer dans votre WordPress sans modifier une seule ligne de code.
Intégrer SlideDeck dans les publications/pages de WordPress
Créez une nouvelle publication ou page. Vous verrez une nouvelle boîte SlideDeck ajoutée dans la colonne latérale de droite.
Cliquez sur le bouton Insérer un SlideDeck. Choisissez le Diaporama que vous souhaitez ajouter et publiez la publication. Une fois que vous aurez publié la publication, votre Diaporama ressemblera à ceci avec l’habillage classique :
Vous pouvez l’utiliser sur une publication épinglée, un modèle de page pleine largeur, ou tout ce que vous voulez. Mais attendez, cela ne s’arrête pas là. Allons un peu plus loin.
Ajoutez un Diaporama avec des publications mises en avant
Les curseurs de publication en avant sont les favoris des blogueurs. Nous voyons cette fonctionnalité sur de nombreux blogs, mais la plupart de ces Diaporamas sont codés en dur dans les thèmes avec un contrôle limité pour les utilisateurs/utilisatrices. Voyons à quel point il est facile de le faire avec SlideDeck. Vous pouvez ajouter un slider dynamique appelé « Smart Diaporama » qui vous permet d’afficher vos publications les plus récentes, les plus populaires, les mises en avant (celles que vous choisissez), vous pouvez les trier par catégorie, vous pouvez même importer des flux RSS d’un autre site pour les ajouter à votre slider. Vous pouvez sélectionner parmi leurs différents habillages, choisir les différents types de navigation, et avoir un Diaporama prêt en moins de 5 minutes. Laissez-nous vous afficher comment. Dans notre tutoriel, nous allons afficher les mises en avant de nos publications.
Allez dans vos publications actuelles, choisissez 5 publications et ajoutez-les dans Smart SlideDecks en cochant la case.
Maintenant, allez dans votre panneau SlideDeck et cliquez sur Add Smart SlideDeck (Ajouter un diaporama intelligent). Choisissez votre habillage :
Sélectionnez le nombre de diapositives que vous souhaitez afficher, les options de lecture, le type de contenu (voyez comment nous l’avons mis en avant dans la publication). Vous pouvez sélectionner les Réglages du contenu comme les options d’image, la longueur du titre, la longueur de l’extrait, etc. Choisissez vos styles de navigation et cliquez sur Publier.
Vous devez modifier le code de cette page. Prenez le code de la colonne latérale, Theme Snippet Code, et collez-le dans votre thème. Très probablement en haut de votre index.php. Un exemple de code ressemblerait à ceci :
<?php if (is_home()) { slidedeck( 73, array( 'width' => '100%', 'height' => '370px' ) ); } ?>
Ceci afficherait votre Diaporama uniquement sur votre page d’accueil.
Si vous voulez voir des démonstrations de SlideDeck, visitez le site de SlideDeck, et vérifiez-le.
Laissez-nous savoir ce que vous pensez de cette extension au fur et à mesure que vous la mettez en œuvre.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
delpihero says
I put <?php if (is_home()) { slidedeck( 72, array( ‘width’ => ‘849px’, ‘height’ => ‘300px’ ) ); } ?>
at the top of index.php and it worked but its at the top, i need it in the middle, so I place the code where I need it and it shows up but the slider does not work so what have I done wrong.
I also tried putting this in another directory library/includes/featured-page-php but that has the same corrupted effect
CaroletteGoodlowWright says
So I am needing help. I have slide deck pro and I would like to customize it at place it in the header next to my logo. but i do not know how to code it properly.
my site is http://www.chrisrogersconstruction.com can you help? I cannot find any help on this issue.
Thanks,
wpbeginner says
@CaroletteGoodlowWright Sure we can help for a fee. We don’t offer free customization as part of our tutorial. Please use the contact form if you are interested in hiring us.
web design thailand says
The pro version of the plugin is a bit expensive but really worth it. We start to use here and we are very happy about it !
EnkShahbazMehdi says
Jason, you can search for « Sticky Trending Bar using JQuery » and u may find it.
Jason says
Great post! Funny how things just appear… I was looking for a good slider.
What is the BAR Plugin you use below?
Editorial Staff says
It’s not a plugin. It’s custom code that we added on our site.
Administrateur
Adriana says
My template came with an integrated slider too. I didn’t know you can take it down and replace it with another slider.
I have to try in my posts so see exactly how it works before replacing my main slider – I guess.
Thank for the tutorial.
S says
Would it be possible to integrate this into the header only and use it to display an array of header images with link to different sections of the website?
I am trying to figure out how to do this but no luck!
Editorial Staff says
Yes it is possible. You would have to create a slider, then edit your header.php file to paste the code. You can use the smart slider option which only shows images… and display your most recent posts … most featured posts etc.
Administrateur
Michele Welch says
Awesome tutorial! I have a slider integrated into my template, but always had issues with it so had to take it down. This definitely seems like a good alternative! Will definitely give it a try.
I think the best part is that you can add it to your posts. This way you have integrated related posts and decrease bounce rates.
Thanks for sharing this application!