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

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.