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

Efter vår lansering av WPBeginner Coupons igår, fokuserar vi helt på att bygga den bästa designen för huvudwebbplatsen WPBeginner som integrerar allt samtidigt som den ser bra ut. Vi ville lägga till en slider på vår webbplats, men varje skript hade sina begränsningar. Tack vare den fantastiske Matt Mickiewicz från 99designs, SitePoint och Flippa (se hans intervju på WPBeginner) för att ha hänvisat oss till personerna på Digital Telepathy som är skaparna av SlideDeck (överlägset det bästa slider-skriptet på webben). Vi lekte med det och vi var imponerade. Det är utmärkt för nybörjare eftersom det tillhandahåller en komplett WordPress-plugin som låter dig använda det enkla dra-och-släpp-gränssnittet för att skapa sliders. Det är dock också utmärkt för utvecklare eftersom det har en jQuery-version som erbjuder ytterligare frihet för utvecklare att anpassa det efter sina behov. I den här artikeln kommer vi att visa dig hur du kan skapa en slider i WordPress utan att redigera en enda kodrad med SlideDeck WordPress Plugin.

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

Steg 1. Ladda ner och installera pluginet

Gå till SlideDecks webbplats och ladda ner pluginet. De har en GRATIS version och en PRO-version som erbjuder support och många fler funktioner. När vi arbetar med en ny produkt skaffar vi alltid supportversionen. Vi fastnade ett par gånger under vår utveckling, och deras support var fantastisk och hjälpte oss. Vi rekommenderar starkt att du skaffar PRO-versionen eftersom den inkluderar coola funktioner som: Vertikala bildrutor, pekskärmsstöd, Support, RSS-flöde Smart SlideDecks, bakgrundsbildsstöd och mycket mer.

När du har laddat ner pluginet, fortsätt sedan och installera/aktivera pluginet. (Följ vår steg-för-steg-guide för att installera en WordPress-plugin för nybörjare)

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.

Om du vill se några riktigt coola demonstrationer av SlideDeck, besök då SlideDecks webbplats och kolla in det.

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