PORADNIK

Jak stworzyć slider z custom post type w WordPress

Tworząc strony internetowe, bardzo często potrzebujemy rozwiązań, które wykraczają poza podstawowe funkcje WordPress. Takim rozwiązaniem jest slider, który często musi przyjmować określone własności czy stylizacje. W tym poradniku pokażę jak stworzyć własny slider, który będzie wyświetlał Custom Post.

Slider będzie stworzony na dwa sposoby:

  1. Pierwszym sposobem będzie stworzenie slider’a, który wyświetli nam posty własnego typu przy pomocy pluginu owlCarousel. Zadaniem slider’a będzie wyświetlenie post’ów w responsywnym sliderze wspierającym system drag&drop.
  2. Drugim slider’em będzie full-width slider, który będzie posiadał prosty skrypt JS z własną nawigacją. Slider będzie przechowywał swoje slide’y w custom post type i będzie zawierał obraz oraz tytuł obrazu.

Ponadto dla każdego typu slidera, pokażemy implementację dla dwóch page builder’ów – WPBakery oraz Elementor. Implementacja sliderów będzie odbywać się na zasadzie dołączania nowych widget’ów do wcześniej stworoznych przez nas pluginów: REDO JSComposer Additional oraz REDO Elementor Additional.

Własny slider WordPress – jak stworzyć?

Co musisz wiedzieć

  1. Przede wszystkim musisz znać page builder’a WPBakery na której opieramy budowę stron internetowych. We wcześniejszych naszych poradnikach znajdziesz całą wiedzę potrzebną do zrozumienia procesu tworzenia widget’ów do WPBakery.
    Link do artykułu: REDO JSComposer Additional – plugin dodający widget do WPBakery
    Link do pluginu WPBakery: https://wpbakery.com/
  2. Jeśli nie znasz WPBakery potrzebna będzie znajomość innego page builder’a – Elementor. Jest to jedna z najbardziej znanych wtyczek do tworzenia stron internetowych w systemie WordPress. Aby dobrze zrozumieć sposób działania naszej wtyczki do tworzenia widgetów dla Elementora – zapoznaj się z artykułem: Elementor – jak stworzyć własny plugin dodający custom post
    Link do pluginu Elementor: https://elementor.com/
  3. Potrzebne będzie podstawowe zapoznanie się z dokumentacją pluginu OwlCarousel, który pozwoli na poprawne działanie slider’a.
    Link do pluginu: https://owlcarousel2.github.io/OwlCarousel2/
  4. Bazujemy na podstawowych umiejętnościach programowania języka PHP, oraz na umiejętności tworzenia kodu HTML i CSS. Jeśli przeczytałeś nasze poprzednie poradniki to stworzenie slider’a nie powinno być trudne.
    Link do listy poprzednich artykułów: Artykuły.

Tworzymy responsywny slider drag&drop przy pomocy owlCarousel

Pierwszym sposobem będzie stworzenie slider’a, który umożliwi wyświetlenie naszych custom post’ów przy pomocy pluginu owlCarousel. Zaimplementujemy dwa widgety – jeden dla page builder’a WPBakery, drugi dla Elementor’a.

Zaczniemy od stworzenia własnego typu posta.

Tworzymy custom post type Opinia

W naszym przypadku będzie to custom post type “opinia”, który będzie zawierał:

  • Tytuł – Nazwę referenta,
  • Obrazek wyróżniający – Miniaturkę referenta,
  • Zajawka – Tytuł w firmie referenta,
  • Content – Treść opinii.

Jeśli nie wiesz jak stworzyć własny custom post type – odsyłam do artykułu:
Tworzymy widok (template) dla custom post w WordPress

Tworzymy widget do pluginu WPBakery

Gdy stworzyliśmy już custom post type, który chcemy wyświetlić, przechodzimy do stworzenia widgetu. Tworzymy plik slider.php w folderze render oraz załączamy go w pliku main.php. Wewnątrz pliku slider.php dodajemy podstawową konfigurację widgetu. Jeśli nie wiesz jak to zrobić przeczytaj artykuł: Własna wtyczka dodająca widget do pluginu WPBakery

W ten sposób otrzymujemy działający widget wyświetlający wszystkie posty typu ‘opinia’. Dodaliśmy dwie testowe opinie i wyświetliliśmy je za pomocą naszego widgetu.

jak-stworzyc-slider-w-wordpress-1

jak-stworzyc-slider-w-wordpress-2

Wtyczki REDO Additional dla WPBakery oraz Elementor pobierzesz tutaj – REDO Additional (6 pobrań)

Tworzymy widget do pluginu Elementor

Jeśli używamy Elementor’a to musimy stworzyć widget przy pomocy naszego pluginu REDO Elementor Additional – jeśli nie wiesz jak działa nasza wtyczka ponownie odsyłam do artykułu: Elementor – jak stworzyć własny plugin dodający custom post.
Tworzymy plik slider.php w folderze render oraz załączamy go w pliku main.php. Wewnątrz pliku slider.php dodajemy podstawową konfigurację widgetu.

Otrzymujemy poprawnie działający widget Elementor – Slider.

elementor-slider-1

Wtyczki REDO Additional dla WPBakery oraz Elementor pobierzesz tutaj – REDO Additional (6 pobrań)

Tworzymy slider przy pomocy owlCarousel

Załączamy plugin do projektu

Część z tworzeniem widgetu jest już nam dobrze znana z poprzednich artykułów i nie sprawiła nam żadnego problemu. Teraz przejdziemy do aplikacji pluginu owlCarousel. Aby, korzystać z pluginu należy odpowiednio załączyć plugin – można to zrobić na dwa sposoby. Pierwszym sposobem jest załączenie plików wtyczki z zewnętrznego źródła CDN lub fizyczne umieszczenie plików na serwerze. W tym przypadku skorzystamy z opcji załączenia plików poprzez linki CDN.

Linki należy odpowiednio załączyć do głównego pliku CSS oraz głównego pliku JS.

CSS:

  • <link href=”https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css” rel=”stylesheet”>
  • <link href=”https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css” rel=”stylesheet”>

JS:

  • <script src=”https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js”></script>

Podstawowa konfiguracja slider’a

Teraz musimy się cofnąć do kodu naszego widget’u slider.php i nasze opinie musimy zamknąć w jednym kontenerze, który będzie działał jako owlCarousel. Aby to zrobić należy przed pętlą foreach dodać div, który nazwiemy .owl-carousel i dodamy klasę .owl-theme, aby korzystał z podstawowych własności pluginu owlCarousel.

Nasz kod będzie wyglądał następująco:

Teraz przechodzimy do inicjacji owlCarousel(). W głównym pliku js, dodajemy podstawową konfigurację pluginu:

Gotowe! Stworzyliśmy slider przy pomocy owlCarousel.

Nasz kod javascript prawidłowo zainicjował skrypt owlCarousel() dla wcześniej stworzonego div’a .owl-carousel. Posiada podstawowe właściwości slidera. Jeśli chcielibyśmy bardziej szczegółowo ustawić nasz slider – nic nie stoi na przeszkodzie. Zapoznaj się z dokumentacją pluginu i ustaw odpowiednie wartości.

jak-stworzyc-slider-w-wordpress-3

Prosty slider WordPress z własną nawigacją

Przechodzimy do stworzenia slider’a, który będzie posiadał podstawową animację przy zmienianiu slide’ów i nawigację. Taki typ slider’a jest zazwyczaj wykorzystywany jako pierwsza sekcja na stronie głównej – możemy znaleźć jego wykorzystanie w naszym projekcie Pierson-Export.

Tworzymy custom post type “slider”

Nasze slide’y będziemy przechowywać w custom post type : “slider”. Chcemy aby slide zawierał obraz od wyświetlenia oraz tytuł slide’a. Czyli potrzebne będą nam dwa pola:

  • Obrazek wyróżniający,
  • Tytuł.

Jeśli nie wiesz jak tworzyć custom post type – ponownie odsyłam do artykułu: Tworzymy widok (template) dla custom post w WordPress.

Widget zawierający slider – WPBakery, Elementor

Jeśli stworzyliśmy już custom post type, należy stworzyć podobnie jak w przypadku pierwszego typu slider’a pliki do naszych pluginów – w zależności od wykorzystywanego page builder’a korzystamy z odpowiedniej wtyczki:

  • WPBakery – REDO JSComposer Additional
  • Elementor – REDO Elementor Additional

Proces tworzenia widgetu znajdziecie w tych artykułach:

Przechodzimy do tworzenia widgetu. W tym przypadku zrobię to dla page builder’a WPBakery. Konfiguracja slider’a dla Elementora będzie bardzo podobna jak w przypadku slider’a wykorzystującego owlCarousel, więc możesz sprawdzić jak to zrobić klikając tutaj.

Tworzymy plik customslider.php w folderze render i przypisujemy go w main.php. Następnie dodajemy podstawową konfigurację widgetu w pliku customslider.php.

Struktura własnego slider’a WordPress

Teraz możemy przejść do stworzenia struktury slider’a. W wcześniej stworzonym div’ie – .slider-container – tworzymy nawigację naszego slider’a, która będzie wyświetlana w div’ie – .slider-change. Przed wyświetleniem nawigacji należy sprawdzić czy nasz slider zawiera na tyle dużo slide’ów do wyświetlenia, aby stworzyć nawigację. Slider musi mieć więcej slide’ów niż 1, więc dodajemy warunek:

Następnie wewnątrz diva .slider-change – tworzymy iteracje za pomocą pętli foreach, wyświetlającą nawigację, która będzie zawierać linki do naszych slide’ów. Każdy link musi zawierać odpowiednie ID odwołujące do odpowiadającego slide’a. Musimy więc stworzyć licznik $i=0 – będzie on odpowiadał za nadanie odpowiedniego ID elementom nawigacji. Będziemy go powiększać po każdym dodaniu ID elementu nawigacji. Dodatkowo ID będziemy wyświetlać jako element nawigacji – powiększone o 1. Kod nawigacji:

Teraz przechodzimy do wyświetlenia slide’ów. Tworzymy pętlę foreach, wyświetlającą zawartość zmiennej $slider. Wcześniej należy stworzyć licznik $x = 0 ,który sprawdzi by pierwszy element w tablicy dostał klasę aktywacyjną slide – .slide-active. Klasa ta będzie sprawiać by slide był widoczny, natomiast slide’y nie posiadające tej klasy, nie będą widoczne na ekranie. Obrazy wyświetlimy jako background slide’u. Tytuł slide’u będzie zawarty w nagłówku h2 z klasą .slider-header. Kod slider’a:

Całość kodu PHP wraz z licznikami:

Skrypt Javascript obsługujący nawigację slider’a

Przechodzimy do stworzenia skryptu slider’a, który obsłuży nam nawigację między slide’ami. Wcześniej należy stworzyć kilka przykładowych slide’ów z tytułami i obrazami – w naszym przypadku będą to trzy slide’y.

Do stworzenia skryptu wykorzystamy czysty javascript, ponieważ są to bardzo proste instrukcje nie wymagające angażowania jQuery.

Tworzymy dwie tablice:

  • Tablica zawierająca linki nawgiacji slider’a – myBtns[]
  • Tablica zawierająca slide’y – sliders[]

Za pomocą querySelectorAll pobieramy nasze elementy:

Teraz w pętli for dla każdego elementu myBtns[] dodajemy EventListener “click”, sprawdzający czy klikneliśmy dany link do slide’u. Jeśli klikneliśmy sprawdzamy za pomocą getElementsByClassName aktywny link nawigacji oraz aktywny slide.

Teraz należy usunąć aktywne klasy i przypisać je do odpowiedniego linku w nawigacji oraz odpowiedniego slide’u. W ten sposób otrzymujemy całość skryptu JS:

Kod CSS naszego slider’a

Gotowe. Mamy nasz slider z działającą obsługą nawigacji. Teraz należy przejść do stylizacji i dodania odpowiednich wartości naszym klasom.

Pierwszą czynnością jest stylizacja naszego kontenera – musi posiadać position: relative, aby poprawnie przechowywał nasze slide’y, które będą miały position: absolute oraz będą wyświetlane na full-width. Odpowiednio dla slide’u trzeba ustawić background:cover aby obraz pokrył całą powierzchnię diva. Domyślnie .slider będzie posiadał visibility: hidden, dopiero po otrzymaniu klasy .slide-active wraz z animacją fadeIn visibility zmieni się na visible.

Nawigację możemy stylizować w dowolny sposób, tak samo jak możemy zmienić sposób jej wyświetlania w kodzie PHP. Poniżej dodaje naszą stylizację CSS slider’a, zawierającą również animację slide’ów.