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:

Podsumowanie

Otrzymaliśmy widok wyświetlający posty wybranego typu custom post oraz ich pola, które również wybieramy w widgetcie. Taki widok możemy łatwo przekształcać za pomocą CSS, ponieważ każdy div danego pola jest indywidualnie nazwany nazwą typu posta oraz nazwą typu pola.

Ważne jest aby pamiętać przy tworzeniu podobnych widgetów dla Elementora, że nazwy parametrów muszą mieć unikalne nazwy – jeśli jakaś nazwa parametru będzie się powtarzać – widget nie zadziała prawidłowo. Warto także używać debugowania zmiennych, aby sprawdzać zawartości naszych list na których operujemy.