Po wczorajszym uruchomieniu WPBeginner Coupons, jesteśmy całkowicie skupieni na zbudowaniu najlepszego projektu dla głównej witryny WPBeginner, która integruje wszystko, a jednocześnie wygląda dobrze. Chcieliśmy dodać pokaz slajdów na naszej witrynie, ale każdy skrypt miał swoje ograniczenia. Wtedy podziękowaliśmy niesamowitemu Mattowi Mickiewiczowi z 99designs, SitePoint i Flippa(zobacz jego wywiad na WPBeginner) za skierowanie nas do ludzi z Digital Telepathy, którzy są twórcami SlideDeck (zdecydowanie najlepszego skryptu do pokazu slajdów w sieci). Pobawiliśmy się nim i byliśmy pod wrażeniem. Jest świetny dla początkujących, ponieważ zapewnia kompletną wtyczkę WordPress, która pozwala korzystać z łatwego interfejsu przeciągnij-i-upuść do tworzenia pokazów slajdów. Jest jednak również świetna dla programistów, ponieważ ma wersję jQuery, która oferuje programistom dodatkową swobodę w dostosowaniu jej do własnych potrzeb. W tym artykule pokażemy ci, jak możesz stworzyć pokaz slajdów w WordPressie bez edytowania ani jednej linii kodu za pomocą wtyczki SlideDeck WordPress.
Jeśli chcesz zobaczyć, co możesz stworzyć za pomocą tej wtyczki, oto LIVE Demo.
Krok 1. Pobieranie i instalacja wtyczki
Przejdź do witryny internetowej SlideDeck i pobierz wtyczkę. Wtyczka dostępna jest w wersji DARMOWEJ i PRO, która oferuje pomoc techniczną i wiele innych funkcji. Za każdym razem, gdy pracujemy nad nowym produktem, zawsze pobieramy wersję z pomocą techniczną. Kilka razy utknęliśmy na etapie rozwoju, a ich pomoc techniczna była niesamowita i pomogła nam. Zdecydowanie zalecamy zakup wersji PRO, ponieważ zawiera ona fajne funkcje, takie jak: Pionowe slajdy, Obsługa ekranów dotykowych, Obsługa, RSS Feed Smart SlideDecks, Obsługa obrazków w tle i wiele więcej.
Po pobraniu wtyczki należy ją zainstalować i włączyć. (Postępuj zgodnie z naszym przewodnikiem krok po kroku dotyczącym instalacji wtyczki WordPress).
Stwórzmy pokaz slajdów
Po włączeniu wtyczki zobaczysz utwórz nową kartę o nazwie SlideDeck. Przejdźmy do niej i kliknijmy przycisk Utwórz nowy SlideDeck. Pojawi się ekran przypominający panel do wpisów.
Dodaliśmy treść do naszego slajdu i nadaliśmy mu tytuł. Mogliśmy dodać własny obrazek tła (funkcja PRO), ale dla uproszczenia tego nie zrobiliśmy. Chcemy pokazać, co ta wtyczka może zrobić po wyjęciu z pudełka. To był nasz pierwszy standardowy slajd. Następnym slajdem, który dodaliśmy w naszym demo, był slajd pionowy (funkcja PRO). Slajdy pionowe to w zasadzie wiele slajdów w jednym slajdzie. Na powyższym obrazku znajduje się przycisk o nazwie Konwertuj na slajd pionowy. To właśnie ten przycisk kliknęliśmy dla naszego następnego slajdu i oto, co zostało dodane:
Teraz powtórz ten proces dla dowolnej liczby slajdów. Po zakończeniu tworzenia slajdów spójrzmy na opcje SlideDeck dotyczące publikowania slajdów na twojej witrynie. Zobaczysz je po prawej stronie twojego ekranu edycji slajdów.
Możesz wybrać automatyczne odtwarzanie, zezwolić na nawigację za pomocą klawiatury, zezwolić na nawigację za pomocą kółka przewijania myszy, ustawić szybkość animacji, wybrać jedną z ich niesamowitych skórek i wybrać slajd, od którego chcesz zacząć. Możesz także zmienić kolejność slajdów za pomocą przeciągania. Fragment kodu motywu zawiera kod, który możesz umieścić w swoim motywie. Możesz go dodać w dowolnym miejscu twojego motywu. Och, czekaj, czy nie powiedzieliśmy, że nie będziesz musiał edytować ani jednej linii kodu, aby zintegrować SlideDeck z WordPress. Tak, będziemy trzymać się naszych słów w tym poradniku. Pokażemy ci, jak możesz zintegrować go z twoim WordPressem bez edytowania ani jednej linii kodu.
Integracja SlideDeck z wpisami/stronami WordPressa
Utwórz nowy wpis lub stronę. Zobaczysz nowe pole SlideDeck utwórz w prawym panelu bocznym.
Kliknij przycisk Wstaw SlideDeck. Wybierz slider, który chcesz dodać i opublikuj wpis. Po opublikowaniu wpisu Twój pokaz slajdów będzie wyglądał tak, jak poniżej, ze skórką Classic:
Możesz go użyć na przypiętym wpisie, szablonie strony o pełnej szerokości lub czymkolwiek innym. Ale czekaj, to nie koniec. Pójdźmy o krok dalej.
Dodaj pokaz slajdów z funkcjami wpisów
Pokaz slajdów z wyróżnionymi wpisami to ulubiona funkcja blogerów. Widzimy tę funkcję na wielu blogach, ale większość z tych sliderów jest na stałe zakodowana w motywach z ograniczoną kontrolą dla użytkowników. Przyjrzyjmy się, jak łatwo jest to zrobić za pomocą SlideDeck. Możesz dodać dynamiczny suwak o nazwie „Smart SlideDeck”, który pozwala wyświetlać najnowsze wpisy, najpopularniejsze wpisy, wyróżnione wpisy (te, które wybierzesz), możesz sortować je według kategorii, możesz nawet importować kanały RSS z innej witryny, aby dodać je do twojego suwaka. Możesz wybierać spośród różnych skórek, wybierać różne rodzaje nawigacji i mieć gotowy pokaz slajdów w mniej niż 5 minut. Pokażemy ci jak to zrobić. W naszym poradniku będziemy wyświetlać wpisy z funkcji Featured.
Przejdź do twoich obecnych, aktualnych wpisów, wybierz 5 wpisów i dodaj je do Smart SlideDecks, zaznaczając odpowiednie pole.
Teraz przejdźmy do twojego panelu SlideDeck i kliknij Dodaj Smart SlideDeck. Wybierz twoją skórkę:
Wybierz liczbę slajdów, które chcesz wyświetlić, opcje odtwarzania, rodzaj treści (zobacz, jak mamy to jako Wpisy z funkcji). Możesz wybrać ustawienia treści, takie jak opcje obrazków, długość tytułu, długość zajawki itp. Wybierz twój styl nawigacji i kliknij Publikuj.
Musisz edytować kod w tym miejscu. Pobierz kod z panelu bocznego, Theme Snippet Code i wklej go do twojego motywu. Najprawdopodobniej na górze twojego index.php. Przykładowy kod wygląda następująco:
<?php if (is_home()) { slidedeck( 73, array( 'width' => '100%', 'height' => '370px' ) ); } ?>
.
Spowoduje to wyświetlenie twojego pokazu slajdów tylko na stronie głównej.
Jeśli chcesz zobaczyć naprawdę fajne dema SlideDeck, przejdź na witrynę internetową SlideDeck i sprawdź je.
Daj nam znać, co myślisz o tej wtyczce, gdy ją wdrożysz.
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.
Administrator
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.
Administrator
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!