PORADNIK

Własna wtyczka dodająca widget do pluginu WPBakery

Własna wtyczka dodająca widget do pluginu WPBakery – brzmi trudno. W tym artykule dowiesz się jakie proste jest tworzenie własnych modułów do pluginu WPBakery. Jest to bardzo przydatna funkcjonalność, której nie posiada ten kreator stron. Pozwala ona na wstawienie dowolnego kodu poprzez Page Builder, umożliwiającego rozbudowanie naszej strony w dowolny sposób jaki potrzebujemy. Przykładem użycia może być dodanie widget’u wyświetlającego wpisy typu Custom Post Type np. Projekty w określony sposób, np. grid.

Własna wtyczka dodająca widget do pluginu WPBakery –  w tym poradniku dowiesz się jak ją zrobić

Własny widok Custom Post Type stworzony za pomocą WP Bakery

Czego będziemy potrzebować do stworzenia wtyczki?

  1. Aktywnej wersji pluginu WPBakery Page Builder – WordPress Page Builder Plugin – jest to płatny plugin, pozwalający na tworzenie widoków stron metodą drag & drop. Jest to narzędzie ułatwiajace tworzenie stron internetowych w WordPress, które mocno przyspiesza pracę nad projektami.
  2. Znajomość języka PHP oraz tworzenia kodu w podejściu obiektowym – nasz plugin będziemy tworzyć w podejściu obiektowym za pomocą języka PHP i bez wiedzy w tych tematach ciężko będzie zrozumieć kod stworzony w tym poradniku. Polecam zapoznanie się z poradnikami: PHP zorientowane obiektowo dla początkujących oraz Pierwsze kroki w tworzeniu wtyczek WordPress.
  3. Cierpliwości i skupienia podczas tworzenia wtyczki 🙂

Zaczynajmy tworzenie wtyczki dodającej widget do WPBakery!

Pierwszym krokiem będzie stworzenie folderu naszego pluginu, który nazwiemy: REDO JSComposer Additional. Plugin należy umieścić w folderze, w którym znajdują się wszystkie nasze pluginy, czyli należy znaleźć folder: Plugins, a w nim stworzyć nasz folder, w którym będzie znajdował się plugin. Nazwa folderu nie może zawierać dużych oraz małych liter oraz spacji i znaków specjalnych, więc folder nazywamy odpowiednio redo-jscomposer-additional.

Teraz musimy stworzyć strukturę naszego pluginu, która wyglądać będzie w następujący sposób:

Struktura pluginu REDO

W naszym folderze głównym pluginu, tworzymy foldery:

  • images – folder w, którym będziemy przechowywać nasze ikony używane w pluginie,
  • widgets – folder, zawierający widget’y do wyświetlenia za pomocą pluginu,

oraz pliki:

  • index.php – plik definiujący plugin (nazwa pluginu, autor itd) oraz inicjujący nasz plik główny main.php,
  • main.php – plik główny naszego pluginu.

Najpierw przejdźmy do edycji index.php.

Pierwszym krokiem jest zabezpieczenie kodu przed bezpośrednim dostępem do plików za pomocą ABSPATH, która jest stałą definiowaną w WordPress, zabezpieczającą dostęp do plików .php.

Następnie w bloku komentarza umieszczamy opis naszego pluginu:

  • Plugin Name – tutaj należy nadać nazwę naszego pluginu, która później będzie widoczna we wtyczkach w panelu WordPress,
  • Description – opis naszego pluginu,
  • Author– nazwa autora,
  • Author URI– URL przekierowujący do strony autora,
  • Version– wersja pluginu,
  • License– określ licencję, aby plugin był dostępny dla wszystkich użytkowników we wtyczkach WordPress’a.

Wszystkie pola są opcjonalne, za wyjątkiem Plugin Name, który jest polem obowiązkowym.

Następnie za pomocą funkcji require_once()dodajemy ścieżkę do pliku głównego pluginu.