Przewodnik krok po kroku dotyczący tworzenia pokazu slajdów w WordPressie za pomocą SlideDeck

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.