PORADNIK

Elementor – jak stworzyć wÅ‚asny plugin dodajÄ…cy custom post

W tym poradniku stworzymy widget do naszego plugin, który dodawaÅ‚by custom post, okreÅ›lany w widget’cie oraz pola, które również wybieralibyÅ›my z poziomu Elementor. W poprzednim poradniku: WÅ‚asny plugin dodajÄ…cy widget do wtyczki Elementor stworzyliÅ›my plugin, dodajÄ…cy wÅ‚asne widget’y do wtyczki Elementor. BÄ™dzie to takie samo rozwiÄ…zanie jak w artykule REDO JSComposer Additional – plugin dodajÄ…cy widget do WPBakery tylko zamiast wtyczki WPBakery docelowÄ… wtyczkÄ… bÄ™dzie Elementor.

Zacznijmy pracÄ™ nad naszym pluginem dla Elementora dodajÄ…cego custom post

Tworzymy kolejny widget w folderze widgets i nazywamy go customPostRedo.php, który będzie przechowywał klasę CustomPostRedo.

Tworzenie własnego pluginu dodającego custom post w Elementor

Musimy wrócić do folderu głównego naszego pluginu i edytować plik main.php. Musimy wskazać Å›cieżkÄ™ do naszego widgetu i jego klasy w klasie głównej E_REDO. Å»eby to zrobić dopisujemy analogicznie jak przy widgetcie projekty.php – Å›cieżkÄ™ w require_once() oraz dodajemy Å›cieżkÄ™ do klasy CustomPostRedo w funkcji register_widgets().

Edycja pliku customPostRedo.php naszego pluginu

Gotowe. Przechodzimy do edycji naszego pliku customPostRedo.php. Nadajemy odpowiedniÄ… nazwÄ™ dla namespace oraz dodajemy Å›cieżki do odpowiednich klas, których bÄ™dziemy używać w naszym kodzie. Dodajemy sprawdzenie czy jest zdefiniowana staÅ‚a ABSPATH i nastÄ™pnie definiujemy nazwÄ™, naszej klasy CustomPostRedo dziedziczÄ…cej po klasie Widget_Base – klasa wtyczki Elementor.

Rejestracja widget’u w pluginie Elementor

Przechodzimy do tworzenia klasy obsÅ‚ugujÄ…cej nasz widget – CustomPostRedo. Definiujemy kilka funkcji wbudowanych Elementora, nazywajÄ…cego nasz widget.

Przechodzimy do głównej funkcji _register_controls(), która pobierać bÄ™dzie jaki typ custom post’a chcemy wyÅ›wietlić oraz jakie pola posta chcemy otrzymać w widoku. Å»eby to otrzymać potrzebujemy pobrać do widgetu Elementora listÄ™ custom postów oraz ich pól a także pól wÅ‚asnych. BÄ™dziemy tutaj bazować na wbudowanej opcji get_option(’cptui_post_types’) oraz stworzonej w pliku main.php funkcji prepareCustomFields(). Pobranie listy typów postów jest analogiczne do tego jak tworzyliÅ›my to w artykule: REDO JSComposer Additional – dodawanie wÅ‚asnych widget’ów do WPBakery – część druga – tam wytÅ‚umaczone sÄ… funkcje oraz listy na których bÄ™dziemy pracować.

Mamy już przygotowaną listę z typami postów i ich pól. Tworzymy sekcję w naszym widgetcie i nadajemy odpowiedni label informujący o tym że będzie to sekcja do wyboru typu posta.

Wyświetlanie typów custom post w Elementor

Teraz możemy wyÅ›wietlić możliwe typy postów do wyboru. Trzeba pamiÄ™tać aby każda nazwa parametru byÅ‚a indywidualna i niepowtarzalna. JeÅ›li nazwy jakichkolwiek parametrów bÄ™dÄ… siÄ™ powtarzać – nasz widget nie zadziaÅ‚a. Ważne jest aby odpowiednio nazwać nasz parametr, aby później można byÅ‚o operować na nich (zgodna musi być identyfikacja każdego parametru, żebyÅ›my wiedzieli za co on odpowiada). Å»eby wyÅ›wietlić typy postów posÅ‚ugujemy siÄ™ listÄ… $_custom_posts_params dla, której w pÄ™tli foreach dodajemy osobny radio-button, za pomocÄ… funkcji elementor add_control(). Definiujemy nazwÄ™ parametru – ’post-type’.$key – do tablicy przekaże nam – ’post-type-typ custom posta’ – co bÄ™dzie zawsze indywidualnÄ… nazwÄ… dla każdego typu posta. W typie posta korzystamy z typu CHOOSE dziedziczonego z klasy Controls_Manager – typ ten jest jednoznaczny z radio-button. W tablicy options dodajemy wartość $key z naszej listy.

Teraz należy zamknąć sekcję dla typu custom postów.

Kolejne sekcje naszego widgetu bÄ™dÄ… tworzone w pÄ™tli foreach dla wartoÅ›ci tablicy $_custom_posts przechowujÄ…cej typ posta oraz dla każdego typu posta typy pól możliwych do wyÅ›wietlenia. WewnÄ…trz pÄ™tli definiujemy sekcjÄ™ dla każdego typu posta, przechowujÄ…cÄ… typy pól. Typy pól bÄ™dziemy przechowyweać w liÅ›cie $custom_params dla której za pomocÄ… pÄ™tli foreach przypisujemy odpowiednie radio-button’y w stworzonej sekcji.

W tej samej pÄ™tli dla list $_custom_posts tworzymy kolejne sekcje dla pól wÅ‚asnych – indywidualnie dla każdego typu posta.

Całość kodu funkcji _register_controls() :

Otrzymaliśmy widok w elementorze zawierający wszystkie sekcje przechowujące odpowiednie wartości:

Widok własnego widgetu Elementora

Teraz chcielibyÅ›my aby wybrane w widgecie wartoÅ›ci wyÅ›wietlić w widoku. WyÅ›wietlanie bÄ™dzie bardzo podobne jak w przypadku widgetu dla WPBakery. RóżnicÄ… bÄ™dzie operowanie nie na tablicy $atts jak w przypadku WPBakery a na tablicy $settings, którÄ… uzupeÅ‚niamy za pomocÄ… funkcji get_settings_for_display() – funkcji Elementora, zwracajÄ…cej parametry widgetu oraz ich wartoÅ›ci. Widok przekazywany bÄ™dzie w funkcji render().

Pobieramy listÄ™ typów postów wybranych w widgetcie. Tworzymy pustÄ… tablicÄ™ $postTypes do której przekażemy typy postów. Za pomocÄ… pÄ™tli foreach przeszukujemy tablicÄ™ $settings. JeÅ›li klucz tablicy bÄ™dzie zawieraÅ‚ w części nazwy parametru ’post_type-’ i wartość dla danego klucza nie bÄ™dzie pusta – przekazujemy wartość do tablicy $postTypes.

Tworzenie widoku końcowego listy custom post w Elementor

Pobraliśmy już listę typów postów pobranych z widgetu. Teraz przechodzimy do wyświetlenia dla nich widoku. Pierwszym krokiem jest sprawdzenie czy tablica $postTypes zawiera typy postów. Jeśli nie jest pusta dla każdego typu postu w tablicy wyświetlamy container oraz nazwę typu posta.

Dla każdego typu posta pobieramy listÄ™ postów. W tablicy $args podajemy dla jakiego typu posta chcemy pobrać listÄ™ oraz ilość postów. W tablicy $query wykonujemy zapytanie WP_Query na tablicy $args. ListÄ™ postów zawartÄ… w $query przekazujemy do tablicy $postList, która bÄ™dzie przechowywać pobrane post’y.

Teraz sprawdzamy czy $postList nie jest pusta. Jeśli nie to wyswietlamy dla każdego posta container oraz jego tytuł.

Teraz należy przeszukać tablicÄ™ $settings i wyÅ›wietlić wybrane pola. Podobnie jak w przypadku typów postów za pomocÄ… funkcji strpos() sprawdzamy czy klucz zawiera w nazwie ’post-field’ lub ’customfield’ i odpowiednio wyÅ›wietlamy te pola. WyÅ›wietlanie przebiega analogicznie jak w przypadku WPBakery – odsyÅ‚am do tego artykuÅ‚u – link, jeÅ›li nie rozumiesz poniższego kodu.

Gotowe! Nasz plugin posiada widget dodajÄ…cy custom post w pluginie Elementor

Całość kodu pliku customPostRedo.php: