Дитяча тема child theme, яку ви можете завантажити з вашого облікового запису, містить простий налаштований елемент для демонстраційних цілей. У статті нижче пояснюється більш детально, як створити власні елементи програмно (Esl 1.4+).
Створення власних елементів за допомогою Esl слідує шаблону, подібному до того, як ви створюєте віджети WordPress. Ви починаєте з розширення класу EslElement і заповнюєте необхідні властивості та методи для вашого елемента.
Спочатку створіть новий файл element-test.php у кореневій папці вашої дитячої теми Esl.
Порожній клас елемента
<?php// element-test.phpif ( ! defined( 'ABSPATH' ) ) exit; // Вихід, якщо доступ здійснено безпосередньоclass Prefix_Element_Test extends EslElement {// Властивості елементаpublic $category = '';public $name = '';public $icon = '';public $css_selector = '';public $scripts = [];public $nestable = false; // true || @since 1.5// Методи: Специфічні для двигунаpublic function get_label() {}public function get_keywords() {}public function set_control_groups() {}public function set_controls() {}// Методи: Специфічні для фронтендуpublic function enqueue_scripts() {}public function render() {}}
Давайте розберемо властивості та методи елемента двигуна:
| $category | Назва категорії (усі літери нижнього регістру, без пробілів). Використовуйте будь-які з попередньо визначених категорій елементів: general, media, social, header, wordpress і post. Або призначте свою власну категорію елемента. При налаштуванні власної категорії переконайтеся, що ви надаєте рядок категорії, що підлягає перекладу, для механізму за допомогою фільтра: esl/engine/i18n |
| $name | Унікальний ідентифікатор елемента (усі літери нижнього регістру, без пробілів). Щоб уникнути конфліктів з іншими елементами, будь ласка, додайте префікс до імені вашого елемента, наприклад: prefix-element-test. |
| $icon | CSS клас шрифтової іконки. Esl включає такі шрифти іконок. Використовуйте будь-який CSS клас шрифтової іконки, щоб представити ваш елемент у панелі механізму:
|
| $css_selector | За замовчуванням усі налаштування контролю CSS застосовуються до обгортки елемента: .esl-element-wrapper. Якщо ви хочете, щоб CSS селектор за замовчуванням націлювався на дочірній HTML елемент, встановіть цей селектор тут. |
| $nestable | Не використовуйте для простих елементів. Встановіть true, щоб створити вкладений елемент. |
| $scripts | Масив скриптів JavaScript, які виконуються, коли елемент відображається на фронтенді або оновлюється в механізмі. Наприклад, елемент Counter використовує скрипт з назвою “eslCounter” (визначений у frontend.min.js). Щоб завантажити цей скрипт, ми використовуємо: public $scripts = ['eslCounter'];Будь ласка, додайте префікс до всіх ваших скриптів. Наприклад: prefixElementTest |
| get_label() | Повертає локалізовану мітку елемента. |
| get_keywords() | Масив рядків, які при зіставленні під час пошуку елемента відображають елемент у результатах пошуку. |
| set_control_groups() | За замовчуванням усі елементи керування показуються без групування в панелі механізму під вкладкою “Контент”. Визначте власні групи керування для ваших елементів, встановивши наступні властивості для кожної групи керування:
|
| set_controls() | Визначте елементи керування елемента. Для огляду всіх наявних елементів керування та їхніх налаштувань відвідайте: Елементи керування |
| enqueue_scripts() | Завантажте специфічні для елемента скрипти та стилі. Вони завантажуються тільки на сторінках, де використовується цей елемент. Результат — краща продуктивність. Приклад: wp_enqueue_script( 'prefix-element-test', get_template_directory_uri() . '/js/custom.js', ['jquery'], '1.0', true ); |
| render() | Відображає HTML елемента. Визначте HTML атрибути через $this->set_attribute() та виведіть їх через $this->render_attribute() |
| set_attribute( $key, $attribute, $value ) | Допоміжна функція для встановлення HTML атрибутів для будь-якого HTML тегу. $key слугує унікальним ідентифікатором для цього HTML тегу. $attribute — це назва HTML атрибута. $value — це рядок або масив, що містить значення атрибута(ів). |
| render_attributes( $key ) | Допоміжна функція для відображення HTML атрибутів, визначених за допомогою $this->set_attribute(). $key слугує унікальним ідентифікатором для цього HTML тегу. |
| render_dynamic_data_tag( $tag, $context, $args ) | Допоміжна функція для відображення динамічних тегів даних усередині функції рендерингу, використовуючи $this->render_dynamic_data_tag(...). Приклад $tag це {post_title}. Використання цієї допоміжної функції встановлює правильний ідентифікатор публікації в залежності від середовища, в якому рендериться елемент. |
| render_dynamic_data( $content ) | Допоміжна функція для відображення вмісту (рядка), який може містити динамічні теги даних. Використовуйте цю допоміжну функцію всередині функції рендерингу, викликаючи $this->render_dynamic_data(...). Використання цієї допоміжної функції встановлює правильний ідентифікатор публікації в залежності від середовища, в якому рендериться елемент. |
З версії Esl 1.4 вам потрібно налаштувати та відобразити атрибут _root на зовнішньому тегу вашого елемента, оскільки обгортка за замовчуванням була видалена з причин продуктивності.
Давайте заповнимо властивості та методи нашого елемента деякими даними:
<?php// element-test.phpif ( ! defined( 'ABSPATH' ) ) exit; // Вихід, якщо доступ безпосередньоclass Prefix_Element_Test extends EslElement {// Властивості елементаpublic $category = 'general'; // Використовуйте попередньо визначену категорію елемента 'general'public $name = 'prefix-test'; // Переконайтесь, що ви префіксировали ваші елементиpublic $icon = 'ti-bolt-alt'; // Клас шрифта іконки Themifypublic $css_selector = '.prefix-test-wrapper'; // За замовчуванням CSS-селекторpublic $scripts = ['prefixElementTest']; // Скрипт(и), які виконуються, коли елемент відображається на фронтенді або оновлюється в системі// Повернути локалізовану мітку елементаpublic function get_label() {return esc_html__( 'Тестовий елемент', 'esl' );}// Встановити контрольні групи системиpublic function set_control_groups() {$this->control_groups['text'] = [ // Унікальний ідентифікатор групи (малими літерами, без пробілів)'title' => esc_html__( 'Текст', 'esl' ), // Локалізована назва контрольної групи'tab' => 'content', // Встановіть або "content", або "style"];$this->control_groups['settings'] = ['title' => esc_html__( 'Налаштування', 'esl' ),'tab' => 'content',];}// Встановити елементи управління системиpublic function set_controls() {$this->controls['content'] = [ // Унікальний ідентифікатор управління (малими літерами, без пробілів)'tab' => 'content', // Вкладка управління: зміст/стиль'group' => 'text', // Показати під групою керування'label' => esc_html__( 'Зміст', 'esl' ), // Мітка керування'type' => 'text', // Тип керування'default' => esc_html__( 'Зміст тут ..', 'esl' ), // Налаштування за замовчуванням];$this->controls['type'] = ['tab' => 'content','group' => 'settings','label' => esc_html__( 'Тип', 'esl' ),'type' => 'select','options' => ['info' => esc_html__( 'Інформація', 'esl' ),'success' => esc_html__( 'Успіх', 'esl' ),'warning' => esc_html__( 'Попередження', 'esl' ),'danger' => esc_html__( 'Небезпека', 'esl' ),'muted' => esc_html__( 'Приглушений', 'esl' ),],'inline' => true,'clearable' => false,'pasteStyles' => false,'default' => 'info',];}// Завантажити стилі та скрипти елементаpublic function enqueue_scripts() {wp_enqueue_script( 'prefix-test-script' );}// Відобразити HTML елементаpublic function render() {// Встановити атрибути елемента$root_classes[] = 'prefix-test-wrapper';if ( ! empty( $this->settings['type'] ) ) {$root_classes[] = "color-{$this->settings['type']}";}// Додати атрибут 'class' до кореневого тегу елемента$this->set_attribute( '_root', 'class', $root_classes );// Відобразити HTML елемента// Атрибут '_root' є обов'язковим з моменту Esl 1.4 (містить ID елемента, клас, тощо)echo "<div {$this->render_attributes( '_root' )}>"; // Атрибути кореневого елементаif ( ! empty( $this->settings['content'] ) ) {echo "<div>{$this->settings['content']}</div>";}echo '</div>';}}
Ви можете переглянути всі елементи управління на: https://academy.eslengine.io/topic/controls/
Всі налаштування елементів зберігаються в $this->settings. Щоб переглянути налаштування елементів, ви можете вивести їх на екран так: var_dump( $this->settings ); у функції render().
Завантажте та зареєструйте свій елемент
Після створення вашого користувацького елемента вам потрібно завантажити та зареєструвати його. Відкрийте functions.php вашої дочірньої теми Esl і скопіюйте та вставте наступний код:
/*** Зареєструйте користувацькі елементи*/add_action( 'init', function() {$element_files = [__DIR__ . '/element-test.php',];foreach ( $element_files as $file ) {EslElements::register_element( $file );}}, 11 );
Метод register_element приймає 3 аргументи:
$file(обов’язковий): Повний шлях до PHP файлу користувацького елемента на сервері$name(необов’язковий): Рядок, що містить назву користувацького елемента (наприклад:prefix-element-test)$element_class(необов’язковий): Рядок, що містить назву класу елемента (наприклад:Prefix_Element_Test), який повинен походити від класу елемента Esl (EslElement)
Примітка: Використання аргументів $name та $element_class покращить продуктивність завантаження.