Guide étape par étape pour créer un slider dans WordPress avec SlideDeck

Après le lancement de WPBeginner Coupons hier, nous nous concentrons entièrement sur la création du meilleur design pour le site principal WPBeginner qui intègre tout tout en restant esthétique. Nous voulions ajouter un slider à notre site, mais chaque script avait ses limites. Puis, grâce à l'excellent Matt Mickiewicz de 99designs, SitePoint et Flippa (voir son interview sur WPBeginner), qui nous a référés aux gens de Digital Telepathy, créateurs de SlideDeck (de loin le meilleur script de slider sur le web). Nous l'avons essayé 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 sliders. Cependant, il est également idéal pour les développeurs car il existe une version jQuery qui offre une liberté supplémentaire aux développeurs pour le personnaliser selon leurs besoins. Dans cet article, nous vous montrerons comment créer un slider dans WordPress sans modifier une seule ligne de code avec le plugin SlideDeck pour WordPress.

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 achetons toujours la version avec support. Nous avons été bloqués à quelques reprises lors de notre développement, et leur support a été incroyable et nous a aidés. Nous vous recommandons vivement d'opter pour la version PRO car elle inclut des fonctionnalités intéressantes telles que : Diapositives verticales, Support tactile, Support, Diapositives intelligentes RSS, Support d'images d'arrière-plan, et bien plus encore.

Une fois que vous avez téléchargé le plugin, installez-le et activez-le. (Suivez notre Guide étape par étape pour installer un plugin WordPress pour débutants)

Créons un slider

Une fois le plugin activé, vous verrez un nouvel onglet appelé SlideDeck. Allons-y et cliquons sur Ajouter un nouveau SlideDeck. Vous serez dirigé vers un écran qui ressemble au panneau d'écriture de publication.

Nous avons donc ajouté le contenu dans notre diapositive et lui avons donné un titre. Nous aurions pu 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 dès sa sortie 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 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 diapositive suivante, et voici ce que cela a 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 de SlideDeck pour publier les diapositives sur votre site. Vous verrez cela sur le côté droit de votre écran de modification des diapositives.

Vous pouvez le sélectionner pour la lecture automatique, autoriser la navigation au clavier, autoriser la navigation avec la molette de la souris, définir la vitesse d'animation, choisir l'un de leurs superbes thèmes, 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 y a un extrait de code de thème qui contient le code à inclure dans votre thème. Vous pouvez l'ajouter n'importe où dans votre thème. Oh attendez, n'avions-nous pas dit que vous n'auriez pas à modifier une seule ligne de code pour intégrer SlideDeck dans WordPress. Oui, nous tiendrons parole dans ce tutoriel. Montrons-vous comment l'intégrer dans votre WordPress sans modifier une seule ligne de code.

Intégrer SlideDeck dans un article/une page WordPress

Créez un nouvel article 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, puis publiez l'article. Une fois l'article publié, votre curseur ressemblera à ceci avec le thème Classique :

Vous pouvez l'utiliser sur un article épinglé, un modèle de page pleine largeur, ou tout autre élément de votre choix. Mais attendez, ce n'est pas tout. Allons un peu plus loin.

Ajouter un curseur avec des articles mis en avant

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 les thèmes avec un contrôle limité pour les utilisateurs. Eh bien, regardons à quel point il est facile de le faire avec SlideDeck. Vous pouvez ajouter un curseur dynamique appelé « Smart SlideDeck » qui vous permet d'afficher vos articles les plus récents, les plus populaires, les articles en vedette (ceux que vous choisissez), vous pouvez trier par catégorie, vous pouvez même importer des flux RSS d'un autre site pour les ajouter à votre curseur. Vous pouvez choisir parmi leurs différents skins, choisir différents types de navigations, et pratiquement avoir un curseur prêt en moins de 5 minutes. Laissez-nous vous montrer comment. Dans notre tutoriel, nous afficherons les entrées en vedette de nos articles.

Accédez à vos articles actuels, sélectionnez 5 articles et ajoutez-les à Smart SlideDecks en cochant la case.

Maintenant, allons dans votre panneau SlideDeck et cliquez sur Ajouter Smart SlideDeck. Choisissez votre skin :

Sélectionnez le nombre de diapositives que vous souhaitez afficher, les options de lecture, le type de contenu (voir comment nous l'avons comme entrées en vedette de l'article). 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 de celui-ci. Récupérez le code de la barre latérale, le code de l'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 souhaitez voir des démos vraiment cool de SlideDeck, visitez le site Web de SlideDeck SlideDeck et jetez-y un coup d'œil.

Faites-nous part de vos réflexions sur le plugin lorsque vous l'implémentez.