SiteOrigin добавляем свои виджеты

Ниже приведены основные правила для создания собственного виджета с использованием пакета виджетов SiteOrigin в качестве основы.

Регистрация пользовательской папки виджетов

Чтобы позволить вам организовать ваши виджеты и отделить их от виджетов SiteOrigin, есть hook, который вы можете использовать для регистрации папки, содержащей ваши виджеты:

<?php

function add_my_awesome_widgets_collection($folders){
    $folders[] = 'path/to/my/widgets/';
    return $folders;
}
add_filter('siteorigin_widgets_widget_folders', 'add_my_awesome_widgets_collection');

Код плагина Widgets Bundle проверит подпапки этой папки на наличие файлов PHP. Если он находит какие-либо PHP-файлы с заголовком метаданных, содержащих поле «Имя виджета», он перечисляет их как виджеты, которые можно активировать и использовать везде, где обычно используются виджеты.

В нашем примере плагина extension-widgets-bundle мы используем стандартный метод WordPress для создания плагина, который затем использует описанный выше hook, чтобы добавить свою папку extra-widgets в путь поиска виджетов.

Название виджета

Начните с создания папки виджета, используя имя по вашему выбору, а затем файл PHP с тем же именем. Мы рекомендуем использовать руководящие принципы WordPress для именования файлов и папок.

Метаданные виджета

Первое, что вам понадобится в вашем PHP-файле, — это заголовок метаданных, который используется плагином SiteOrigin Widgets Bundle для идентификации PHP-файлов, которые содержат класс виджета. Минимальным требованием для этого заголовка является поле Имя виджета, так как без этого поля файл будет пропущен. Остальные поля являются необязательными, но мы рекомендуем их использовать, так как они предоставляют возможность отображать более подробную информацию о виджете и/или авторе виджета в будущем.

<?php

/*
Widget Name: Hello world widget
Description: An example widget which displays 'Hello world!'.
Author: Me
Author URI: http://example.com
Widget URI: http://example.com/hello-world-widget-docs,
Video URI: http://example.com/hello-world-widget-video
*/

Виджет class

Теперь вам нужно создать класс, который расширяет абстрактный базовый класс SiteOrigin_Widget и, как минимум, переопределяем абстрактные методы get_template_name и get_style_name. Вам также необходимо зарегистрировать свой класс виджетов в пакете виджетов SiteOrigin, используя функцию siteorigin_widget_register, передав в качестве аргументов идентификатор виджета, путь к файлу виджета и имя класса виджета.

<?php
class Hello_World_Widget extends SiteOrigin_Widget {

    function get_template_name($instance) {
        return '';
    }

    function get_style_name($instance) {
        return '';
    }
}

siteorigin_widget_register('hello-world-widget', __FILE__, 'Hello_World_Widget');

Как только вы это сделаете, вы увидите свой виджет в списке плагинов > Widgets SiteOrigin, его можно активировать и деактивировать, и вы увидите «Виджет без названия» в виджетах Page Builder и пустой виджет в других списках виджетов. , Так что вы пока не можете использовать свой виджет, но он есть!

Изображение баннера виджета

Чтобы использовать пользовательское изображение для баннера в списке плагинов> SiteOrigin Widgets, вы можете либо поместить его в папку с именем assets и назвать файл banner.svg, либо использовать hook siteorigin_widgets_widget_banner. Следующий код можно найти в примере файла основного виджета my-awesome-widget.php вне объявления класса. Если вы поместите код в другое место, убедитесь, что вы соответствующим образом изменили путь к файлу.

<?php
function my_awesome_widget_banner_img_src( $banner_url, $widget_meta ) {
    if( $widget_meta['ID'] == 'my-awesome-widget') {
        $banner_url = plugin_dir_url(__FILE__) . 'images/awesome_widget_banner.svg';
    }
    return $banner_url;
}
add_filter( 'siteorigin_widgets_widget_banner', 'my_awesome_widget_banner_img_src', 10, 2);

Widget class конструктор

Здесь вы увидите, как реализовать конструктор для вашего виджета. Класс SiteOrigin_Widget расширяет класс WP_Widget, поэтому вызов родительского конструктора может показаться знакомым с некоторыми дополнениями.

<?php
function __construct() {
    //Here you can do any preparation required before calling the parent constructor, such as including additional files or initializing variables.

    //Call the parent constructor with the required arguments.
    parent::__construct(
        // The unique id for your widget.
        'hello-world-widget',

        // The name of the widget for display purposes.
        __('Hello World Widget', 'hello-world-widget-text-domain'),

        // The $widget_options array, which is passed through to WP_Widget.
        // It has a couple of extras like the optional help URL, which should link to your sites help or support page.
        array(
            'description' => __('A hello world widget.', 'hello-world-widget-text-domain'),
            'help'        => 'http://example.com/hello-world-widget-docs',
        ),

        //The $control_options array, which is passed through to WP_Widget
        array(
        ),

        //The $form_options array, which describes the form fields used to configure SiteOrigin widgets. We'll explain these in more detail later.
        array(
            'text' => array(
                'type' => 'text',
                'label' => __('Hello world! goes here.', 'siteorigin-widgets'),
                'default' => 'Hello world!'
            ),
        ),

        //The $base_folder path string.
        plugin_dir_path(__FILE__)
    );
}

Как только ваш конструктор будет реализован, как в примере выше, вы должны увидеть имя и описание вашего виджета, отображаемые в различных списках конфигурации виджетов. Виджет Hello World теперь также отображает текстовое поле в форме Edit Widget, содержащее текст «Hello world!», Который можно редактировать и сохранять.

Шаблон виджета

Вам нужно предоставить шаблон, чтобы сообщить виджету, как он должен отображаться. Вы предоставляете имя шаблона, переопределяя функцию get_template_name и возвращая имя файла шаблона, без расширения файла .php. По умолчанию базовый класс SiteOrigin_Widget ищет файл PHP с именем, возвращаемым get_template_name, в каталоге tpl, в каталоге виджетов. Вы можете изменить это поведение, переопределив функцию get_template_dir и возвращая путь к каталогу (без начального или конечного слеша) относительно файла класса виджета.

<?php
function get_template_name($instance) {
    return 'hello-world-template';
}

function get_template_dir($instance) {
    return 'hw-templates';
}

Ниже приведена структура каталогов Hello World Widget.

Теперь, когда виджет знает, где найти его шаблон, вы можете добавить HTML. Шаблон виджета Hello World просто содержит следующее:

<div>
    <?php echo wp_kses_post($instance['text']) ?>
</div>

И теперь вы можете видеть, как отображается ваш виджет!

Стили виджетов

Вы можете предоставить таблицу стилей LESS для своего виджета, переопределив функцию get_style_name и вернув имя таблицы стилей LESS без расширения .less. Базовый класс SiteOrigin_Widget ищет файл LESS в каталоге стилей, в каталоге виджетов.

<?php
function get_style_name($instance) {
    return 'my-widget-styles';
}

p.s. Если статья была полезной и вас переполняет чувство благодарности, можете поддержать меня долларом на патреоне