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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
delpihero says
I put <?php if (is_home()) { slidedeck( 72, array( ’width’ => ’849px’, ’height’ => ’300px’ ) ); } ?>
at the top of index.php and it worked but its at the top, i need it in the middle, so I place the code where I need it and it shows up but the slider does not work so what have I done wrong.
I also tried putting this in another directory library/includes/featured-page-php but that has the same corrupted effect
CaroletteGoodlowWright says
So I am needing help. I have slide deck pro and I would like to customize it at place it in the header next to my logo. but i do not know how to code it properly.
my site is http://www.chrisrogersconstruction.com can you help? I cannot find any help on this issue.
Thanks,
wpbeginner says
@CaroletteGoodlowWright Sure we can help for a fee. We don’t offer free customization as part of our tutorial. Please use the contact form if you are interested in hiring us.
web design thailand says
The pro version of the plugin is a bit expensive but really worth it. We start to use here and we are very happy about it !
EnkShahbazMehdi says
Jason, you can search for ”Sticky Trending Bar using JQuery” and u may find it.
Jason says
Great post! Funny how things just appear… I was looking for a good slider.
What is the BAR Plugin you use below?
Editorial Staff says
It’s not a plugin. It’s custom code that we added on our site.
Administratör
Adriana says
My template came with an integrated slider too. I didn’t know you can take it down and replace it with another slider.
I have to try in my posts so see exactly how it works before replacing my main slider – I guess.
Thank for the tutorial.
S says
Would it be possible to integrate this into the header only and use it to display an array of header images with link to different sections of the website?
I am trying to figure out how to do this but no luck!
Editorial Staff says
Yes it is possible. You would have to create a slider, then edit your header.php file to paste the code. You can use the smart slider option which only shows images… and display your most recent posts … most featured posts etc.
Administratör
Michele Welch says
Awesome tutorial! I have a slider integrated into my template, but always had issues with it so had to take it down. This definitely seems like a good alternative! Will definitely give it a try.
I think the best part is that you can add it to your posts. This way you have integrated related posts and decrease bounce rates.
Thanks for sharing this application!