Przewodnik krok po kroku do tworzenia slidera w WordPressie za pomocą SlideDeck

Po wczorajszym uruchomieniu WPBeginner Coupons, skupiamy się całkowicie na budowaniu najlepszego projektu dla głównej strony WPBeginner, który zintegruje wszystko, zachowując jednocześnie dobry wygląd. Chcieliśmy dodać slider na naszą stronę, ale każdy skrypt miał swoje ograniczenia. Następnie, dzięki wspaniałemu Mattowi Mickiewiczowi z 99designs, SitePoint i Flippa (zobacz jego wywiad na WPBeginner), który polecił nam ludzi z Digital Telepathy, twórców SlideDeck (zdecydowanie najlepszego skryptu sliderów w sieci). Bawiliśmy się nim i byliśmy pod wrażeniem. Jest świetny dla początkujących, ponieważ zapewnia kompletny plugin WordPress, który pozwala na użycie łatwego interfejsu przeciągnij i upuść do tworzenia sliderów. Jest jednak również świetny dla programistów, ponieważ posiada wersję jQuery, która oferuje dodatkową swobodę programistom w dostosowaniu go do ich potrzeb. W tym artykule pokażemy Ci, jak stworzyć slider w WordPress bez edycji ani jednej linii kodu za pomocą wtyczki SlideDeck WordPress.

Jeśli chcesz zobaczyć, co możesz stworzyć za pomocą tego wtyczki, oto DEMO NA ŻYWO.

Krok 1. Pobieranie i instalacja wtyczki

Przejdź na stronę SlideDeck’s Website i pobierz wtyczkę. Mają wersję DARMOWĄ i wersję PRO, która oferuje wsparcie i wiele innych funkcji. Zawsze, gdy pracujemy z nowym produktem, kupujemy wersję z obsługą. Kilka razy utknęliśmy w naszym rozwoju, a ich wsparcie było niesamowite i pomogło nam. Gorąco polecamy zakup wersji PRO, ponieważ zawiera ona fajne funkcje, takie jak: Slajdy pionowe, Obsługa ekranu dotykowego, Wsparcie, Smart SlideDecks z kanałem RSS, Obsługa obrazów tła i wiele więcej.

Po pobraniu wtyczki, zainstaluj/aktywuj ją. (Postępuj zgodnie z naszym przewodnikiem krok po kroku po instalacji wtyczki WordPress dla początkujących)

Stwórzmy slider

Po aktywowaniu wtyczki zobaczysz nową zakładkę o nazwie SlideDeck. Przejdźmy dalej i kliknij Dodaj nowy SlideDeck. Zostaniesz przeniesiony na ekran przypominający Panel Pisania Postów.

Zatem dodaliśmy treść do naszego slajdu i nadaliśmy mu tytuł. Mogliśmy mieć niestandardowy obraz tła (funkcja PRO), ale dla uproszczenia tego nie zrobiliśmy. Chcemy pokazać, co ten wtyczka potrafi od razu po wyjęciu z pudełka. To był nasz pierwszy standardowy slajd. Następny slajd, który dodaliśmy w naszym demo, był slajdem pionowym (funkcja PRO). Slajdy pionowe to zasadniczo wiele slajdów w jednym slajdzie. Jeśli spojrzysz na powyższy obrazek, znajduje się tam przycisk o nazwie Konwertuj na slajd pionowy. Cóż, to jest przycisk, który kliknęliśmy dla naszego następnego slajdu, i oto co dodaliśmy:

Teraz powtórz proces dla tylu slajdów, ile chcesz. Po zakończeniu tworzenia slajdów, przyjrzyjmy się opcjom SlideDeck do publikowania slajdów na Twojej stronie. Zobaczysz to po prawej stronie ekranu edycji slajdów.

Możesz wybrać automatyczne odtwarzanie, nawigację za pomocą klawiatury, nawigację za pomocą kółka myszy, ustawić prędkość animacji, wybrać jedną z ich niesamowitych skórek i wybrać slajd, od którego chcesz zacząć. Możesz również zmieniać kolejność slajdów metodą przeciągnij i upuść. Widzisz, że jest fragment kodu motywu, który zawiera kod do umieszczenia w swoim motywie. Możesz dodać go w dowolnym miejscu w swoim motywie. Och, poczekaj, czy nie mówiliś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 samouczku. Pokażemy Ci, jak możesz go zintegrować z Twoim WordPressem bez edycji ani jednej linii kodu.

Integracja SlideDeck w postach/stronach WordPress

Utwórz nowy wpis lub stronę. Zobaczysz nowe pole SlideDeck dodane w prawym bocznym pasku.

Kliknij przycisk Wstaw SlideDeck. Wybierz suwak, który chcesz dodać, i opublikuj post. Po opublikowaniu posta Twój suwak będzie wyglądał tak z klasyczną skórką:

Możesz go użyć na przypiętym poście, szablonie strony pełnej szerokości lub czymkolwiek innym, co Ci się podoba. Ale poczekaj, to nie koniec. Rozwińmy to trochę dalej.

Dodaj suwak z wyróżnionymi postami

Suwaki z wyróżnionymi postami są ulubieńcami blogerów. Widzimy tę funkcję na licznych blogach, ale większość tych suwaków jest zakodowana na stałe w motywach z ograniczoną kontrolą dla użytkowników. Cóż, przyjrzyjmy się, jak łatwo to zrobić za pomocą SlideDeck. Możesz dodać dynamiczny suwak o nazwie „Smart SlideDeck”, który pozwala wyświetlać Twoje najnowsze posty, najpopularniejsze posty, wyróżnione posty (te, które wybierzesz), możesz sortować według kategorii, możesz nawet importować kanały RSS z innej strony, aby dodać do swojego suwaka. Możesz wybierać spośród różnych skórek, wybierać różne typy nawigacji i praktycznie mieć gotowy suwak w mniej niż 5 minut. Pokażemy Ci, jak. W naszym samouczku będziemy wyświetlać wyróżnione wpisy z naszych Postów.

Przejdź do swoich aktualnych postów, wybierz 5 postów i dodaj je do Smart SlideDecks, zaznaczając pole wyboru.

Teraz przejdźmy do Twojego Panelu SlideDeck i kliknij Dodaj Smart SlideDeck. Wybierz swój wygląd:

Wybierz, ile slajdów chcesz wyświetlić, opcje odtwarzania, typ treści (Zobacz, jak mamy to jako Wyróżnione wpisy z Posta). Możesz wybrać Ustawienia treści, takie jak opcje obrazu, długość tytułu, długość fragmentu itp. Wybierz swoje Style nawigacji i kliknij Publikuj.

Musisz edytować kod w tym przypadku. Pobierz kod z paska bocznego, fragmentu kodu motywu i wklej go do swojego motywu. Najprawdopodobniej na górze pliku index.php. Przykładowy kod wyglądałby tak:

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

Spowoduje to wyświetlenie Twojego slidera tylko na stronie głównej.

Jeśli chcesz zobaczyć kilka naprawdę fajnych demonstracji SlideDeck, odwiedź stronę SlideDeck i sprawdź ją.

Daj nam znać, co myślisz o wtyczce podczas jej wdrażania.