Step-by-Step Guide till att skapa en slider i WordPress med SlideDeck

Efter vår lansering av WPBeginner Coupons igår är vi helt fokuserade på att bygga den bästa designen för WPBeginners huvudsite som integrerar allt samtidigt som den ser bra ut. Vi ville add to en slider på vår site, men varje script hade sin limit. Då tackar vi den fantastiska Matt Mickiewicz från 99designs, SitePoint och Flippa (se hans intervju på WPBeginner) för att han hänvisade oss till folket på Digital Telepathy som är skaparna av SlideDeck (det överlägset bästa slider-skriptet på webben). Vi lekte med det och vi blev imponerade. Det är bra för Beginnare eftersom det ger ett komplett WordPress plugin som låter dig använda det enkla drag-drop-gränssnittet för att skapa sliders. Men det är också bra för utvecklare eftersom det har en jQuery-version som erbjuder ytterligare frihet för utvecklare att customize det efter deras behov. I den här artikeln kommer vi att visa dig hur du kan skapa en slider i WordPress utan att editera en enda rad kod med SlideDeck WordPress Plugin.

Om du vill se vad du kan skapa med det här pluginet, här är en LIVE Demo.

Step-by-Step 1. Download och installera pluginet

Head över till SlideDecks webbplats och ladda ner plugin. De har en GRATIS version och en Pro-version som erbjuder support och många fler funktioner. När vi arbetar med en new produkt, skaffar vi alltid supportversionen. Vi fastnade några gånger i vår utvecklare, och deras support var fantastisk och hjälpte oss. Vi rekommenderar starkt att du skaffar Pro-versionen eftersom den innehåller coola funktioner som: Vertikala slides, Touch Screen Support, Support, RSS-flöde Smart SlideDecks, Support för bakgrundsbild och mycket mer.

När du har downloadat pluginet, gå sedan vidare och installera/aktivera pluginet. (Följ vår Step-by-Step Guide för att installera ett WordPress tillägg)

Låt oss skapa en slider

När du har aktiverat pluginet kommer du att se en ny tabs tillagd som heter SlideDeck. Lets go, och klicka på Add New SlideDeck. Du kommer att uppmanas till en vy som gillar panelen Post Write.

Så vad vi gjorde var att add to the content in our slide, and gave it the title. Vi kunde ha en custom bakgrundsbild (PRO Feature), men för enkelhetens skull gjorde vi ej det. Vi vill visa vad detta plugin kan göra ur boxen. Det var vår första standard slide. Nästa slide vi addade i vår demo var en vertikal slide (utvald PRO-funktion). Vertikala slides är i princip flera slides inom en slide. Om du tittar på bilden ovan finns det en knapp som heter Konvertera till vertikal slide. Det är den knapp vi klickade på för vår nästa slide, och det här är vad som add to:

Upprepa nu processen för så många slides som du vill. När du är klar med att skapa bilder, låt oss titta på SlideDeck Options för att publicera bilderna på din webbplats. Du ser detta på höger sida av din Edit slides vy.

Du kan välja att den ska spelas upp automatiskt, tillåta tangentbordsnavigering, allow mouse scroll-wheel navigation, ställa in animationshastighet, välja en av deras fantastiska skins och select vilken slide du vill börja från. You can also re-order the slides by the drag-drop. Du ser att det finns ett tema code snippet som har koden för dig att inkludera i ditt tema. You can add it anywhere you want in your theme. Åh nej, sa vi inte att du inte behöver edit en enda rad kod för att integrera SlideDeck i WordPress. Ja, vi kommer att klistra fast våra ord i denna tutorial. Låt oss visa dig hur du kan integrera det i din WordPress utan att editera en enda rad kod.

Integrera SlideDeck i WordPress Post/Pages

Skapa en New Post eller Page. Du kommer att se en ny SlideDeck box add to i den högra sidebaren.

Klicka på knappen Infoga SlideDeck. Välj den slider som du vill add, och Publicera posten. När du publicerar posten kommer din slider att se ut så här med Classic Skin:

Du kan använda den på ett (fast)klistrat inlägg, full width page template, eller något annat du gillar. Men vänta, det slutar inte här. Låt oss ta det lite längre.

Add a Slider med utvalda inlägg

Sliders för utvalda inlägg är bloggarnas favoriter. Vi ser den här funktionen på många bloggar, men de flesta av dessa sliders är hårdkodade i teman med begränsad control för användare. Låt oss ta en titt på hur lätt det är att göra det med SlideDeck. Du kan add to en dynamisk slider anropad ”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 även importera RSS-flöden från en annan site för att lägga till i din slider. Du kan välja mellan deras olika skinn, välja olika typer av navigationer och i stort sett ha en slider klar på mindre än 5 minuter. Låt oss visa dig hur. I vår tutorial kommer vi att visa utvalda inlägg från våra Posts.

Gå till dina nuvarande inlägg och välj ut 5 posts och add to dem i Smart SlideDecks genom att kontrollera boxen.

Nu, låt oss gå till din SlideDeck Panel, och klicka på Add Smart SlideDeck. Välj Your Skin:

Välj hur många slides du vill visa, uppspelningsalternativ, typ av innehåll (Se hur vi har det som utvalda inlägg från posten). You can select the Content Settings like image options, title length, excerpt length etc. Välj din Navigation Styles och klicka på Publicera.

You need to edit the code on this one. Ta tag i koden från Sidebar, Theme Snippet Code, och klistra in den i your theme. Mest troligt högst upp i din index.php. Ett exempel på kod skulle kunna se ut så här:

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

Detta skulle bara visa din slider på din homepage.

Om du vill se några riktigt coola demos av SlideDeck, besök då SlideDecks website och kontrollera det.

Låt oss veta dina tankar om pluginet när du implementerar det.