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

Efter lanseringen av v r WPBeginner Coupons ig r , fokuserar vi helt p att bygga den b sta designen f rt WPBeginner-huvudsidan som integrerar allt samtidigt som den ser bra ut. Vi ville l gga till en skjutreglage p v sidan, men varje skript hade sin begr nsning. Tack vare den fantastiska Matt Mickiewicz fr 99designs, SitePoint och Flippa (se hans intervju p WPBeginner) f rt att rekommendera oss till folket p Digital Telepathy som r skaparna av SlideDeck (l ngt det b sta skjutreglageskriptet p webben). Vi lekte med det, och vi var imponerade. Det bra f begynnare eftersom det ger en komplett WordPress-plugin som l ter dig anv da det enkla dra-och-sl pp-gr snitttet f rt att skapa skjutreglage. Det dock ocks bra f r utvecklare eftersom det har en jQuery-version som erbjuder ytterligare frihet f rt utvecklare att anpassa den efter sina behov. I den h r artikeln visar vi hur du kan skapa ett skjutreglage i WordPress utan att redigera en enda kodrad med SlideDeck WordPress Plugin.

Om du vill se vad du kan skapa med den h r plugin, h r LIVE DEMO.

Steg 1. Ladda ner och installera pluginet

G vidare till SlideDecks webbplats och ladda ner plugin. De har en GRATIS version och en PRO-version som erbjuder support och m ingen fler funktioner. N r vi arbetar med en ny produkt, skaffar vi alltid supportversionen. Vi fastnade ett par g nger i v rs 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 bilder, St d f peksk rm, Support, RSS-fl de Smart SlideDecks, Bakgrundsbildsst d och mycket mer.

N du har laddat ner plugin, forts och installera/aktivera plugin. (F lj v rs Steg-f -steg-guide f rt att installera en 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.

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

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