PORADNIK

Własny plugin dodający widget do wtyczki Elementor

W tym artykule dowiesz się jak stworzyć plugin dodający widget do wtyczki Elementor. W poprzednich poradnikach stworzyliśmy plugin REDO JSComposer Additional dodający widget do pluginu WPBakery i teraz analogicznie stworzymy taki sam plugin dla Elementora.

Elementor jest dostosowany na potrzeby tworzenia własnych widgetów i ma dużo bardziej przyjemne środowisko programistyczne do dodawania własnych rozszerzeń. Istnieje również wiele poradników jak stworzyć własny plugin tworzący nowe funkcjonalności do pluginu elementor. W tym artykule będziemy wzorować się na poradniku znajdującym się pod tym linkiem: https://www.youtube.com/watch?v=Ko9i153o_iU&t=454s, tutaj znajdziesz kod źródłowy tego poradnika: https://github.com/alexander-young/custom-elementor-widget/.

Poza tym tworząc plugin będziemy się wzorować na wcześniej stworzonym pluginie REDO JSComposer Additional, jego strukturze i funkcjonalnościach. Opis tego pluginu i proces jego tworzenia znajdziesz w poprzednich artykułach: Własna wtyczka dodająca widget do pluginu WPBakery oraz REDO JSComposer Additional – plugin dodający widget do WPBakery.

 

Zaczynajmy! Tworzymy plugin dodający widget’y do Elementor

Instalujemy darmową wersję wtyczki Elementor, którą znajdziesz tutaj  oraz w zbiorze wtyczek WordPress.

Poza tym będą potrzebne nam wtyczki ACF oraz CPT UI, przedstawione one zostały we wcześniejszych artykułach: Tworzymy widok (template) dla custom post w WordPress oraz Advanced Custom Fields – własne typy pól WordPress. Będziemy wykorzystywać je do wyświetlania widoków poprzez widget’y, które będą zawierały wpisy własnego typu oraz pola własne. Jeśli będziesz wykorzystywać plugin do tworzenia widoków nieopierających się o te pluginy nie musisz ich instalować (uwzględnij w kodzie zmiany, jeśli nie zamierzasz korzystać z tych wtyczek).

Jeśli mamy już zainstalowany Elementor – tworzymy folder z naszym pluginem. Postępujemy analogicznie jak przy tworzeniu pluginu REDO JSComposer Additional. Zaczynamy od stworzenia folderu w folderze plugins naszego WordPress’a. Folder nazwiemy od nazwy nowego pluginu: REDO Elementor Additional – czyli folder będzie nosił nazwę – redo-elementor-additional.

Struktura folderu będzie podobna jak w poprzednim pluginie:

  • index.php – będzie zawierał informacje o naszym pluginie oraz będzie zawierał odwołanie do pliku main.php oraz inicjował klasę E_REDO – odpowiadającą za obsługę naszego pluginu,
  • main.php – plik obsługujący nasz plugin i zawierający odwołanie do folderu z naszymi widgetami,
  • /widgets/ – folder zawierający pliki z naszymi widgetami, w tym poradniku pokażemy jak stworzyć widget wyświetlający post’y typu projekt – plik z widget’em będzie nazywał się projekt.php.

Przechodzimy do pliku index.php. Nazywamy nasz plugin, dodajemy opis, URL, autora, podobnie jak w przypadku pluginu dla WPBakery.

Elementor wymaga do poprawnego działania nadawania przestrzeni nazw namescape, która zapobiega powielaniu nazw klas – więcej o namespaces dowiesz się tutaj: https://www.phpdevs.pl/programowanie-obiektowe/9-przestrzenie-nazw. Nazywamy naszą namescapeREDO. Następnie przechodzimy do stworzenia pętli sprawdzającej czy jest zdefiniowana ABSPATH.

Za pomocą require_once() przypisujemy nasz plik main.php. Następnie tworzymy zmienną $redo_object zawierającego inicjację klasy E_REDO z pliku main.php.

Teraz będziemy edytować plik main.php. Nadajemy taką samą nazwę namespace i znów sprawdzamy ABSPATH.

Tworzymy klasę E_REDO – w niej będzie zawierać się logika naszego pluginu.

W klasie należy stworzyć konstruktor klasy za pomocą funkcji __construct(). W konstruktorze podobnie jak w przypadku REDO JSComposer Additional zawieramy hook’i.

  • add_action(‘init’, [$this, ‘check_for_install’]) – dodajemy przy inicjowaniu naszego pluginu sprawdzanie czy są zainstalowane wtyczki potrzebne do poprawnego działania naszego pluginu czyli: ACF, CPT UI, Elementor,
  • add_action(‘elementor/widgets/widgets_registered’, [$this, ‘register_widgets’])– tutaj rejestrujemy nasz widget za pomocą funkcji register_widgets().

Tworzymy funkcję include_widgets_files() dodającą plik z naszym widgetem projekty.php.

Dodajemy funkcję function register_widgets() rejestrującą nasz widget do Elementor’a. Zawieramy w niej także funkcję include_widgets_files() dołączająca nasze pliki z folderu /widgets/. Nie zapominajmy dodawać ‘\’, który definiuje ścieżki do klas.

Następnie definiujemy naszą funkcję check_for_install(). Jest ona analogiczna do stworzonej funkcji check_for_install() w pluginie REDO JSComposer Additional.

Całość kodu naszego pliku main.php:

Przechodzimy do edycji naszego widgetu – projekty.php.

Pierwszym krokiem jest odpowiednie nazewnictwo namespace oraz dodanie klas elementora, na których będziemy bazować. Sprawdzamy także ABSPATH.

Tworzymy naszą klasę Projekty dziedziczącej za pomocą extends po klasie Widget_Base.

Odpowiednio ustawiamy nasz widget za pomocą wbudowanych funkcji elementora:

  • get_name() – w tej sekcji nadajemy nazwę naszego widgetu (slug),
  • get_title() – nadajemy Label naszego widgetu, widoczny będzie w panelu Elementora,
  • get_icon() – tutaj ustawiamy ikonę naszego widgetu – w naszym przypadku będzie to oko jak w przypadku pluginu dla WPBakery. Możemy tutaj korzystać z ikon dostępnych w FontAwesome, ponieważ Elementor jest domyślnie kompatybilny z FontAwesome.
  • get_categories() – ustawiamy kategorię w, której będzie wyświetlany nasz widget, wybieramy ‘ogólne’,
  • _register_controls() – tutaj nadajemy opcje do personalizacji naszego widgetu, jako, że naszym celem jest jedynie wyświetlenie projektów – dodajemy tylko label informującym za co odpowiada widget.

Wewnątrz _register_controls() używamy funkcji:

  • start_controls_section() – nadaje nazwę sekcji z personalizacją widgetu,
  • add_control() – dodaje nasze ustawienia personalizacji,
  • end_controls_section() – zamyka sekcję.

Następnie używamy już tylko funkcji render() do wyświetlenia naszego widoku z projektami.

Całość kodu naszego widgetu:

Gotowe! Otrzymaliśmy działający plugin do dodawania własnych widgetów w pluginie Elementor.

własny plugin do dodawania widgetów elementor

Podsumowanie

Tworzenie pluginów kompatybilnych z innymi pluginami takimi jak WPBakery czy Elementor wymaga znajomości środowiska danego pluginu. Na szczęście zazwyczaj wtyczki posiadają dobrą dokumentacje, z której możemy zapoznać dane środowisko. W przypadku Elementora ważne jest aby nie zapominać o namespaces i przedrostkami klas ‘\’. Elementor jest dostosowany do dodawania własnych widgetów i posiada wiele ułatwień dla developerów. Sprawdź dokumentację: https://docs.elementor.com/