Après notre lancement de Coupons Themelocal Hier, nous nous concentrons totalement sur la création du meilleur design pour le site principal de Themelocal qui intègre tout tout en restant beau. Nous voulions ajouter un curseur dans notre site, mais chaque script avait sa limite. Ensuite, merci au génial Matt Mickiewicz de 99designs, SitePoint et Flippa (voir son interview sur Themelocal) pour nous avoir référés aux gens de Digital Telepathy qui sont les créateurs de SlideDeck (de loin le meilleur script slider sur le web). Nous avons joué avec et nous avons été impressionnés. Il est idéal pour les débutants car il fournit un plugin WordPress complet qui vous permet d’utiliser l’interface glisser-déposer facile pour créer des curseurs. Cependant, il est également idéal pour les développeurs car il dispose d’une version jQuery qui offre une liberté supplémentaire aux développeurs pour le personnaliser selon leurs besoins. Dans cet article, nous allons vous montrer 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 ce plugin, voici une démo en direct.
Étape 1. Téléchargement et installation du plugin
Rendez-vous sur le site Web de SlideDeck et téléchargez le plugin. Ils ont une version GRATUITE et une version PRO qui offre un 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 coincés à quelques reprises dans notre développement, et leur soutien a été incroyable et nous a aidés. Nous vous recommandons fortement d’obtenir la version PRO car elle comprend des fonctionnalités intéressantes telles que : diapositives verticales, prise en charge de l’écran tactile, SupportSlideDecks intelligents de flux RSS, prise en charge des images d’arrière-plan et bien plus encore.
Une fois que vous avez téléchargé le plugin, continuez et installez/activez le plugin. (Suivez notre guide étape par étape pour installer un plugin WordPress)
Créons un curseur
Une fois que vous avez activé le plugin, vous verrez un nouvel onglet ajouté appelé SlideDeck. Allons-y et cliquez sur Ajouter un nouveau SlideDeck. Vous serez invité à un écran qui ressemble au panneau Post Write.
Nous avons donc ajouté le contenu de notre diapositive et lui avons donné le titre. Nous pourrions avoir une image d’arrière-plan personnalisée (Fonctionnalité PRO), mais par souci de simplicité, nous ne l’avons pas fait. Nous voulons montrer ce que ce plugin peut faire hors de la boîte. C’était notre première diapositive standard. La diapositive suivante que nous avons ajoutée dans notre démo était une diapositive verticale (Fonctionnalité PRO). Les diapositives verticales sont essentiellement plusieurs diapositives dans une diapositive. Si vous regardez dans l’image ci-dessus, il y a un bouton appelé Convertir en diapositive verticale. Eh bien, c’est le bouton sur lequel nous avons cliqué pour notre prochaine diapositive, et voici ce qui a été ajouté :
Répétez maintenant le processus pour autant de diapositives que vous le souhaitez. Une fois que vous avez terminé de créer des diapositives, examinons les options SlideDeck pour publier les diapositives sur votre site. Vous le verrez dans la partie droite de votre écran Modifier les diapositives.
Vous pouvez le sélectionner pour une lecture automatique, autoriser la navigation au clavier, autoriser la navigation par molette de la souris, définir la vitesse d’animation, choisir l’un de leurs skins incroyables et sélectionner la diapositive à partir de laquelle vous souhaitez commencer. Vous pouvez également réorganiser les diapositives par glisser-déposer. Vous voyez qu’il existe un extrait de code de thème contenant le code à 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 nous en tiendrons à nos mots dans ce tutoriel. Laissez-nous vous montrer comment vous pouvez l’intégrer dans votre WordPress sans modifier une seule ligne de code.
Intégration de SlideDeck dans les publications/pages WordPress
Créez un nouveau message ou une nouvelle page. Vous verrez une nouvelle boîte SlideDeck ajoutée dans la barre latérale droite.
Cliquez sur le bouton Insérer SlideDeck. Choisissez le curseur que vous souhaitez ajouter et publiez le message. Une fois que vous avez publié le message, votre slider ressemblera à ceci avec l’habillage classique :
Vous pouvez l’utiliser sur un article collant, un modèle de page pleine largeur ou tout autre élément de votre choix. Mais attendez, ça ne s’arrête pas là. Allons un peu plus loin.
Ajouter un slider avec des publications en vedette
Les curseurs de publication en vedette sont les favoris des blogueurs. Nous voyons cette fonctionnalité sur de nombreux blogs, mais la plupart de ces curseurs sont codés en dur dans des thèmes avec un contrôle limité pour les utilisateurs. Voyons à quel point il est facile de le faire avec SlideDeck. Vous pouvez ajouter un curseur dynamique appelé « Smart SlideDeck » qui vous permet d’afficher soit vos messages les plus récents, les messages les plus populaires, les messages en vedette (ceux que vous choisissez), vous pouvez les trier par catégorie, vous pouvez même importer des flux RSS à partir d’un autre site à ajouter dans votre slider. Vous pouvez choisir parmi leurs différents skins, choisir les différents types de navigation et avoir à peu près un curseur prêt en moins de 5 minutes. Laisse nous te montrer comment. Dans notre didacticiel, nous afficherons les entrées en vedette de nos publications.
Accédez à vos publications actuelles, sélectionnez 5 publications et ajoutez-les dans Smart SlideDecks en cochant la case.
Maintenant, allons dans votre panneau SlideDeck et cliquez sur Ajouter Smart SlideDeck. Choisissez votre peau :
Sélectionnez le nombre de diapositives que vous souhaitez afficher, les options de lecture, le type de contenu (voir comment nous l’avons en tant qu’entrées en vedette de la publication). Vous pouvez sélectionner les paramètres de contenu tels que 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 sur celui-ci. Récupérez le code dans la barre latérale, code d’extrait de thème, 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' ) ); } ?>
Cela afficherait votre curseur uniquement sur votre page d’accueil.
Si vous voulez voir des démos vraiment cool de SlideDeck, visitez le site Web de SlideDeck et jetez-y un coup d’œil.
Faites-nous part de vos réflexions sur le plugin au fur et à mesure de sa mise en œuvre.