Tworzenie własnych widgetów Elementor – wprowadzenie do API i jak zacząć tworzyć własne narzędzia

Elementor to potężny edytor stron dla WordPress, który umożliwia tworzenie zaawansowanych projektów stron internetowych za pomocą interfejsu przeciągnij i upuść. Jego ogromna baza użytkowników i rosnąca popularność sprawiają, że jest on jednym z najbardziej preferowanych narzędzi wśród twórców stron internetowych. Wraz z rosnącymi potrzebami klientów, twórcy stron mogą chcieć dostosować i rozszerzyć funkcjonalność Elementora, tworząc własne widgety. W tym artykule przedstawimy wprowadzenie do API Elementora oraz pokażemy, jak zacząć tworzyć własne narzędzia.

Co to jest widget Elementora?

Widget Elementor to element, który można dodać do swojej strony za pomocą edytora Elementor. Widgety mają różne funkcje, takie jak dodawanie tekstu, obrazów, przycisków, formularzy kontaktowych itp. Istnieje wiele dostępnych widgetów Elementora, ale tworzenie własnych widgetów pozwala na lepsze dostosowanie strony do indywidualnych potrzeb klientów.

Wprowadzenie do API Elementora

API Elementora (Application Programming Interface) to zbiór funkcji i metod, które pozwalają na interakcję z edytorem Elementor. Dzięki API można tworzyć własne widgety, które będą działać w ekosystemie Elementora. API Elementora oparte jest na językach PHP i JavaScript, więc potrzebujesz podstawowej wiedzy na temat tych języków, aby móc z niego korzystać.

Przygotowanie do tworzenia własnych widgetów

Przed przystąpieniem do tworzenia własnych widgetów Elementora, upewnij się, że masz zainstalowane następujące narzędzia:

• WordPress
• Elementor (wersja darmowa lub Pro)
• Lokalne środowisko deweloperskie (np. XAMPP, WAMP, MAMP)

Następnie zainstaluj wtyczkę „Elementor Custom Widget Starter Kit” lub „Elementor Developer Resource”. Te wtyczki dostarczają niezbędnych narzędzi i przykładów kodu, które pomogą Ci zacząć tworzyć własne widgety.

Tworzenie pierwszego widgetu

Po przygotowaniu środowiska deweloperskiego, możemy przejść do tworzenia naszego pierwszego widgetu Elementora. Oto krok po kroku, jak to zrobić:

1. Utwórz nowy folder w katalogu /wp-content/plugins/ w swojej instalacji WordPress. Nadaj mu nazwę, która odzwierciedla nazwę Twojego widgetu, np. my-custom-elementor-widget.
2. W tym folderze utwórz plik my-custom-elementor-widget.php. W pliku tym zainicjujemy naszą wtyczkę i zarejestrujemy nasz widget w Elementorze. Wklej poniższy kod do pliku:

<?php
/*
Plugin Name: My Custom Elementor Widget
Description: A custom Elementor widget created for demonstration purposes.
Version: 1.0.0
Author: Your Name
*/

if (!defined('ABSPATH')) exit; // Exit if accessed directly

class My_Custom_Elementor_Widget {

  private static $_instance = null;

  public static function instance()
  {
    if (is_null(self::$_instance)) {
      self::$_instance = new self();
    }
    return self::$_instance;
  }

  public function init()
  {
    add_action('elementor/widgets/widgets_registered', array($this, 'register_widget'));
  }

  public function register_widget()
  {
    if (defined('ELEMENTOR_PATH') && class_exists('Elementor\Widget_Base')) {
      require_once('my-elementor-widget-class.php');
    }
  }
}

My_Custom_Elementor_Widget::instance()->init();

Następnie, utwórz plik my-elementor-widget-class.php w tym samym folderze. W tym pliku zdefiniujemy klasę naszego widgetu, która będzie dziedziczyć po klasie Elementor\Widget_Base. Wklej poniższy kod:

<?php
if (!defined('ABSPATH')) exit; // Exit if accessed directly

class My_Elementor_Widget_Class extends \Elementor\Widget_Base
{

  public function get_name()
  {
    return 'my-custom-elementor-widget';
  }

  public function get_title()
  {
    return __('My Custom Widget', 'my-custom-elementor-widget');
  }

  public function get_icon()
  {
    return 'fa fa-code';
  }

  public function get_categories()
  {
    return ['general'];
  }

  protected function _register_controls()
  {
    // Tutaj dodamy kontrole dla naszego widgetu
  }

  protected function render()
  {
    // Tutaj dodamy kod HTML i JavaScript naszego widgetu
  }
}

\Elementor\Plugin::instance()->widgets_manager->register_widget_type(new My_Elementor_Widget_Class());

W funkcji _register_controls() będziemy dodawać kontrolki, które pozwolą użytkownikowi konfigurować nasz widget w interfejsie Elementora. Na przykład, dodajmy kontrolkę tekstową, która pozwoli ustawić tytuł dla naszego widgetu:

protected function _register_controls()
{
  $this->start_controls_section(
    'content_section',
    [
      'label' => __('Content', 'my-custom-elementor-widget'),
      'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
    ]
  );

  $this->add_control(
    'title',
    [
      'label' => __('Title', 'my-custom-elementor-widget'),
      'type' => \Elementor\Controls_Manager::TEXT,
      'default' => __('My Custom Widget', 'my-custom-elementor-widget'),
      'placeholder' => __('Type your title here', 'my-custom-elementor-widget'),
    ]
  );

  $this->end_controls_section();
}

Teraz w funkcji render() dodajmy kod HTML i JavaScript, który zostanie wyświetlony na stronie:

protected function render()
{
  $settings = $this->get_settings_for_display();

  echo '<h2 class="my-custom-widget-title">' . $settings['title'] . '</h2>';
  echo '<p>This is a simple example of a custom Elementor widget.</p>';
}

Po zakończeniu tych kroków, nasz widget powinien być dostępny w panelu Elementora. Upewnij się, że wtyczka jest aktywowana w panelu administracyjnym WordPressa.

Podsumowanie:

Tworzenie własnych widgetów Elementor może wydawać się skomplikowane na początek, ale z czasem stanie się prostsze. Ważne jest zrozumienie, jak działa API Elementora i jak można je wykorzystać do tworzenia niestandardowych rozwiązań. W tym artykule przedstawiliśmy podstawowe informacje na temat tworzenia własnych widgetów Elementor. W praktyce, własne widgety mogą zawierać znacznie więcej funkcji i opcji konfiguracyjnych. Zachęcamy do eksperymentowania z API Elementora i tworzenia własnych, niezwykłych widgetów.