Steg-för-steg-guide för att skapa en bildspelare i WordPress med SlideDeck

After our launch of WPBeginner Coupons yesterday, we are totally focused on building the best design for the main WPBeginner site that integrates everything while still looking good. We wanted to add a slider in our site, but every script had its limitation. Then thanks to the awesome Matt Mickiewicz from 99designs, SitePoint, and Flippa (see his Interview on WPBeginner) for referring us to the folks over at Digital Telepathy who are the creators of SlideDeck (by far the best slider script on the web). We played around with it, and we were impressed. It is great for beginners because it provides a complete WordPress plugin that lets you use the easy drag-drop interface to create sliders. However, it is also great for developers because it has a jQuery version that offers additional freedom to developers to customize it to their needs. In this article, we will show you how you can create a slider in WordPress without editing a single line of code with the SlideDeck WordPress Plugin.

If you want to see what you can create with this plugin, here is a LIVE Demo.

Steg 1. Ladda ner och installera pluginet

Head on over to SlideDeck’s Website and download the plugin. They have a FREE version and a PRO version which offers support and a lot more features. Whenever we are working with a new product, we always get the support version. We got stuck a few times in our development, and their support was amazing and helped us out. We highly recommend that you get the PRO version because it includes cool features like: Vertical Slides, Touch Screen Support, Support, RSS Feed Smart SlideDecks, Background Image Support, and much more.

Once you have downloaded the plugin, then go ahead and install/activate the plugin. (Follow our Step by Step Guide to Installing a WordPress Plugin)

Låt oss skapa en bildspelare

När du har aktiverat pluginet ser du en ny flik som heter SlideDeck. Låt oss gå och klicka på Lägg till ny SlideDeck. Du kommer att dirigeras till en skärm som ser ut som panelen för att skriva inlägg.

Så vad vi gjorde var att lägga till innehållet i vår bildruta och gav den titeln. Vi kunde ha en anpassad bakgrundsbild (PRO-funktion), men för enkelhetens skull gjorde vi inte det. Vi vill visa vad detta plugin kan göra direkt ur lådan. Det var vår första standardbildruta. Nästa bildruta vi lade till i vår demo var en vertikal bildruta (PRO-funktion). Vertikala bildrutor är i princip flera bildrutor inom en bildruta. Om du tittar på bilden ovan finns det en knapp som heter Konvertera till vertikal bildruta. Det är knappen vi klickade på för vår nästa bildruta, och det här är vad som lades till:

Upprepa nu processen för så många bilder som du vill. När du är klar med att skapa bilder, låt oss titta på SlideDeck-alternativen för att publicera bilderna på din webbplats. Du kommer att se detta på höger sida av din skärm för att redigera bilder.

Du kan välja att den spelas upp automatiskt, tillåta tangentbordsnavigering, tillåta navigering med mushjulet, ställa in animationshastigheten, välja ett av deras fantastiska skal och välja vilken bild du vill börja från. Du kan också ordna om bilderna genom att dra och släppa. Du ser att det finns ett kodavsnitt för temat som innehåller koden som du ska inkludera i ditt tema. Du kan lägga till det var som helst i ditt tema. Åh vänta, sa vi inte att du inte skulle behöva redigera en enda kodrad för att integrera SlideDeck i WordPress. Ja, vi står fast vid våra ord i den här handledningen. Låt oss visa dig hur du kan integrera det i din WordPress utan att redigera en enda kodrad.

Integrera SlideDeck i WordPress-inlägg/sidor

Skapa ett nytt inlägg eller en ny sida. Du kommer att se en ny SlideDeck-ruta tillagd i sidofältet till höger.

Klicka på knappen Infoga SlideDeck. Välj den bildspelare du vill lägga till och publicera inlägget. När du publicerar inlägget kommer din bildspelare att se ut så här med Classic Skin:

Du kan använda den på ett klistrigt inlägg, en sidmall i full bredd eller vad du vill. Men vänta, det slutar inte här. Låt oss ta det lite längre.

Lägg till en bildspelare med utvalda inlägg

Bildspelare för utvalda inlägg är bloggares favoriter. Vi ser den här funktionen på många bloggar, men de flesta av dessa bildspelare är hårdkodade i teman med begränsad kontroll för användarna. Låt oss ta en titt på hur enkelt det är att göra det med SlideDeck. Du kan lägga till en dynamisk bildspelare som kallas "Smart SlideDeck" som låter dig visa antingen dina senaste inlägg, mest populära inlägg, utvalda inlägg (de du väljer), du kan sortera detta efter kategori, du kan till och med importera RSS-flöden från en annan webbplats för att lägga till i din bildspelare. Du kan välja mellan deras olika skins, välja olika typer av navigeringar och ganska mycket ha en bildspelare klar på mindre än 5 minuter. Låt oss visa dig hur. I vår handledning kommer vi att visa utvalda poster från våra inlägg.

Gå till dina nuvarande inlägg, välj ut 5 inlägg och lägg till dem i Smart SlideDecks genom att markera rutan.

Nu går vi till ditt SlideDeck Panel och klickar på Lägg till Smart SlideDeck. Välj din hud:

Välj hur många bilder du vill visa, uppspelningsalternativ, typ av innehåll (se hur vi har det som Utvalda inlägg från inlägget). Du kan välja Innehållsinställningar som bildalternativ, titellängd, utdragslängd etc. Välj dina Navigationsstilar och klicka på Publicera.

Du behöver redigera koden på den här. Hämta koden från sidofältet, kodavsnittet för temat, och klistra in den i ditt tema. Troligtvis högst upp i din index.php. Ett exempel på kod skulle se ut så här:

<?php if (is_home()) { slidedeck( 73, array( 'width' => '100%', 'height' => '370px' ) ); } ?>

Detta skulle visa din slider endast på din startsida.

If you want to see some real cool demos of SlideDeck, then visit SlideDeck’s website, and check it out.

Låt oss veta vad du tycker om pluginet när du implementerar det.