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:
- Co to jest Bootstrap – czym jest Bootstrap oraz jego podstawowe właściwości dowiesz się z tego artykułu – https://mansfeld.pl/webdesign/bootstrap-co-to-jest-czy-warto-uzywac/
- Bootstrap Modal – kod z którego będziemy korzystać do stworzenia okna modal znajduje się na stronie dokumentacji Bootstrap i jest dokładnie opisany – https://getbootstrap.com/docs/4.0/components/modal/
- Jak dodać Bootstrap do motywu WordPress – istnieją dwie opcje, możesz samodzielnie dołączyć Bootstrap’a do swojego motywu lub skorzystać z gotowego rozwiązania, które udostępnia nam Bootstrap. Jeśli nie wiesz jak dodać framework do motywu WordPressa – polecam skorzystać ze startowego motywu zawierającego Bootstrap’a: https://pl.wordpress.org/themes/wp-bootstrap-starter/
- Jak tworzyć własne widgety w WPBakery – aby tworzyć własne widgety w WPBakery należy stworzyć własną wtyczkę, której proces powstawania opisany jest w naszych artykułach:
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <?php if ( ! defined( 'ABSPATH' ) ) { die( '-1' ); } class WPBakeryShortCode_modal extends WPBakeryShortCode { protected function content( $atts, $content = null ) { extract( shortcode_atts( array( '' => '', ), $atts ) ); ob_start(); ?> <!-- HTML DESIGN HERE --> <!-- HTML END DESIGN HERE --> <?php return ob_get_clean(); } } vc_map( array( "name" => __( 'Modal', 'redo_modal' ), "base" => "modal", "category" => __('REDO Addons'), "description" => __('Display modal', ''), "icon" => plugin_dir_url( __FILE__ ).'../icons/int-banner.png', 'params' => array( array(), ), ) ); |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | 'params' => array( array( "type" => "attach_image", "class" => "", "heading" => __( "Modal button image", "redo" ), "param_name" => "btn_image", "value" => __( "", "redo" ), ), array( "type" => "attach_image", "class" => "", "heading" => __( "Modal button image on hover", "redo" ), "param_name" => "btn_image_hover", "value" => __( "", "redo" ), ), array( "type" => "textfield", "holder" => "div", "class" => "", "heading" => __( "Modal title", "redo" ), "param_name" => "modal_title", "value" => __( "", "redo" ), ), ) |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | vc_map( array( "name" => __( 'Modal', 'redo_modal' ), "base" => "modal", "category" => __('REDO Addons'), "description" => __('Display modal', ''), "icon" => plugin_dir_url( __FILE__ ).'../icons/int-banner.png', 'params' => array( array( "type" => "attach_image", "class" => "", "heading" => __( "Modal button image", "redo" ), "param_name" => "btn_image", "value" => __( "", "redo" ), ), array( "type" => "attach_image", "class" => "", "heading" => __( "Modal button image on hover", "redo" ), "param_name" => "btn_image_hover", "value" => __( "", "redo" ), ), array( "type" => "textfield", "holder" => "div", "class" => "", "heading" => __( "Modal title", "redo" ), "param_name" => "modal_title", "value" => __( "", "redo" ), ), array( "type" => "textarea_html", "class" => "", "heading" => __( "Modal description", "redo" ), "param_name" => "content", "value" => __( "" , "redo"), ) ), ) ); |
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.
1 2 3 4 5 | extract( shortcode_atts( array( 'btn_image' => '', 'btn_image_hover' => '', 'modal_title' => '', ), $atts ) ); |
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.
1 2 3 4 5 6 | <div class="modal-button" data-toggle="modal" data-target="#modal-<?php echo $btn_image ?>"> <div class="btn-image <?php echo 'btn-image-' . $btn_image ?>"></div> <div class="btn-title"> <?php echo $modal_title ?> </div> </div> |
Styl css dla zmiany obrazu modal-button:
1 2 3 4 5 6 7 8 | <style> .btn-image<?php echo '.btn-image-' . $btn_image ?> { background: url(<?php echo wp_get_attachment_url($btn_image) ?>); } .dla-pacjenta:hover .btn-image<?php echo '.btn-image-' . $btn_image ?> { background: url(<?php echo wp_get_attachment_url($btn_image_hover) ?>); } </style> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <div class="modal fade" id="modal-<?php echo $btn_image ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h2 class="modal-title" id="exampleModalLongTitle"><?php echo $modal_title ?></h2> <button type="button" class="b-close close" data-dismiss="modal" aria-label="Close"> <img src="/assets/plugins/mega-addons-for-visual-composer/render/../images/cross.png"/> </button> </div> <div class="modal-body"> <div class="modal-description"> <?php echo $content ?> </div> </div> </div> </div> </div> |
Gotowe!
W ten sposób stworzyliśmy widget generujący modal’e oraz ich wyzwalacze. Całość kodu naszego widgetu:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | <?php if ( ! defined( 'ABSPATH' ) ) { die( '-1' ); } class WPBakeryShortCode_modal extends WPBakeryShortCode { protected function content( $atts, $content = null ) { extract( shortcode_atts( array( 'btn_image' => '', 'btn_image_hover' => '', 'modal_title' => '', 'modal_shortcode' => '', ), $atts ) ); ob_start(); ?> <style> .btn-image<?php echo '.btn-image-' . $btn_image ?> { background: url(<?php echo wp_get_attachment_url($btn_image) ?>); } .dla-pacjenta:hover .btn-image<?php echo '.btn-image-' . $btn_image ?> { background: url(<?php echo wp_get_attachment_url($btn_image_hover) ?>); } </style> <!-- HTML DESIGN HERE --> <div class="modal-button" data-toggle="modal" data-target="#modal-<?php echo $btn_image ?>"> <div class="btn-image <?php echo 'btn-image-' . $btn_image ?>"></div> <div class="btn-title"> <?php echo $modal_title ?> </div> </div> <div class="modal fade" id="modal-<?php echo $btn_image ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h2 class="modal-title" id="exampleModalLongTitle"><?php echo $modal_title ?></h2> <button type="button" class="b-close close" data-dismiss="modal" aria-label="Close"> <img src="/assets/plugins/mega-addons-for-visual-composer/render/../images/cross.png"/> </button> </div> <div class="modal-body"> <div class="modal-description"> <?php echo $content ?> </div> </div> </div> </div> </div> <!-- HTML END DESIGN HERE --> <?php return ob_get_clean(); } } vc_map( array( "name" => __( 'Modal', 'redo_modal' ), "base" => "modal", "category" => __('REDO Addons'), "description" => __('Display modal', ''), "icon" => plugin_dir_url( __FILE__ ).'../icons/int-banner.png', 'params' => array( array( "type" => "attach_image", "class" => "", "heading" => __( "Modal button image", "redo" ), "param_name" => "btn_image", "value" => __( "", "redo" ), ), array( "type" => "attach_image", "class" => "", "heading" => __( "Modal button image on hover", "redo" ), "param_name" => "btn_image_hover", "value" => __( "", "redo" ), ), array( "type" => "textfield", "holder" => "div", "class" => "", "heading" => __( "Modal title", "redo" ), "param_name" => "modal_title", "value" => __( "", "redo" ), ), array( "type" => "textarea_html", "class" => "", "heading" => __( "Modal description", "redo" ), "param_name" => "content", "value" => __( "" , "redo"), ), ), ) ); |
Okno dodające widget wygląda następująco:
Po dodaniu odpowiednich stylów css osiągneliśmy widoki, które chcieliśmy uzyskać dla wyświetlania modal.
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.