PORADNIK

WPBakery – jak stworzyć własny widget dodający modal view?

W tym artykule pokażę jak stworzyć własny widget do wyświetlania modal pop-up dla pluginu WPBakery. Sama wtyczka WPBakery posiada wbudowany widget do dodawania modali, natomiast pewne właściwości tego rozwiązania uniemożliwiają poprawne działanie widget’u.

Co musisz wiedzieć o WPBakery i co to jest modal?

Do stworzenia naszego widgetu potrzebny będzie motyw WordPress zawierający Bootstrap’a, ponieważ skorzystamy z gotowego rozwiązania wyświetlającego nasz modal – czyli gotowych klas Bootstrap’a. Ponadto musisz przeczytać inne nasze artykuły, z których dowiesz się jak tworzyć widgety w WPBakery.

Przed przystąpieniem do tworzenia widget’u musisz wiedzieć kilka rzeczy:

Jeśli zapoznałeś się z powyższymi artykułami oraz znasz już zasady działania Bootstrap Modal, możemy przejść do tworzenia widgetu.

Tworzymy widget dodający modal – wyskakujące okienko w WPBakery.

W folderze render naszego pluginu dodajemy nowy widget – modal.php. Dopisujemy w głównym pliku pluginu – main.php – nasz widget do listy vc_redo_addons():

  • include ‘render/modal.php’;

Jeśli mamy już motyw zawierający framework Bootstrap – przechodzimy do modyfikacji naszego widgetu. Standardowo zaczynamy od nazewnictwa naszego widgetu oraz ustaleniu jego podstawowych właściwości. Pod spodem znajduje się pusty szkielet naszego widgetu.

Standardowo w szkielecie zrealizowaliśmy kilka podstawowych kroków przy tworzeniu widgetu dla naszego pluginu:

  • Określenie ścieżki ABSPATH,
  • Nazwanie klasy głównej WPBakeryShortCode,
  • Inicjacja funkcji vc_map() określającej nazwę naszego widgetu, kategorię, jego opis, obraz identyfikujący widget oraz tablicę parametrów widgetu.

Do wyświetlenia naszego modal’a potrzebować będziemy kilka parametrów w tablicy params. Chcielibyśmy aby nasz modal zamiast button’u – jak jest to zaimplementowane w przykłach bootstrap – identyfikował się div’em o stałych rozmiarach, zawierającym obraz oraz tytuł naszego modal’a. Dodatkowo po najechaniu kursorem myszy na owy div następuje zmiana obrazu na obraz nr 2. Aby to osiągnąć musimy dodać do naszej tablicy params odpowiednie pola:

Dodatkowo musimy zadbać w tablicy params o content naszego modal’a. W tym celu musimy dodać do tablicy parametr typu textare_html, który umożliwia nam dodanie content’u modala za pomocą wbudowanego edytora WordPress – WYSIWYG. Całość naszej funkcji vc_map() łącznie ze wszystkimi parametrami:

Mamy już wszystkie parametry potrzebne do zrealizowania widoku dla naszego modala. Teraz przechodzimy do implementacji naszego widoku.

Za pomocą funkcji extract() musimy pobrać parametry do przekazania w widoku.

Teraz za pomocą zmiennych $btn_image, $btn_image_hover, $modal_title oraz $content możemy stworzyć widok. Zmienna $content jest domyślna dla parametru o typie textarea_html i może występować tylko raz.

Najpierw tworzymy widok dla naszego div’a, który będzie “wyzwalaczem” modal’a. Przekazujemy w nim parametry data-toggle oraz data-target. W data-target musimy podać ID div’a zawierającego nasz modal. Każdy div musi mieć unikalne id, aby każdy modal-button odnosił się do unikalnego modal’a. W tym celu przekazujemy do nazwy ID modal’a zmienną $btn_image, która zawiera ID obrazu dla modal-button. W naszym przypadku owe nazewnictwo zadziała, ponieważ każdy z naszych modal-button’s będzie zawierał inny obraz, natomiast jeśli chcielibyśmy używać tych samych obrazów, należałoby poszukać innego rozwiązania.

Aby wyświetlić obraz naszego modal-button potrzebujemy unikalnej klasy dla każdego “wyzwalacza”, ponieważ chcemy aby obraz zmieniał się po najechaniu na div kursorem. W tym celu dodajemy do klasy zmienną $btn-image zawierającą ID danego obrazu. Za pomocą stylu css będziemy zmieniać background danego modal-button.

Styl css dla zmiany obrazu modal-button:

Przechodzimy do treści naszego modal’a

Korzystamy z gotowego rozwiązania modal Bootstrap. Zmieniamy jedynie atrybut ID dla naszego modal’a, tak aby każdy modal w widoku posiadał unikalne ID – czyli analogicznie jak w przypadku modal-button dodajemy do ID $btn-image. W div’ie o klasie modal-body wyświetlamy zmienną $content zawierającą treść naszego modal’a.

Gotowe! 

W ten sposób stworzyliśmy widget generujący modal’e oraz ich wyzwalacze. Całość kodu naszego widgetu:

Okno dodające widget wygląda następująco:

 

Dodawanie modal w WPBakery

Po dodaniu odpowiednich stylów css osiągneliśmy widoki, które chcieliśmy uzyskać dla wyświetlania modal.

modal buttons WPBakerymodal view WPBakery

Podsumowanie

Dodanie w ten sposób widget’u do WPBakery, tworzącego modal view wymaga znajomości frameworka Bootstrap oraz dodania go do motywu WordPress. Nie jest to jedyny sposób na stworzenie takiego widgetu. Możemy sami stworzyć widok modal bez framework’a, wyłącznie za pomocą Javascript oraz CSS, natomiast w naszym przypadku skorzystaliśmy z gotowego rozwiązania Bootstrap, ponieważ posiadaliśmy w motywie owy framework i jak widać zaoszczędziło nam to dodatkowej pracy przy tworzeniu widoku.