Как создать собственный виджет для WordPress: пошаговое руководство

В WordPress виджеты — это удобный способ добавлять различные блоки с контентом или функционалом в сайдбар, футер и другие области вашего шаблона. Если стандартных виджетов вам недостаточно, можно создать собственный виджет, полностью подстроенный под ваши задачи. В этой статье на примере мы подробно разберём, как написать и зарегистрировать собственный виджет, используя возможности WordPress API.

Что такое виджет в WordPress и зачем создавать свой?

Виджеты — это небольшие блоки, которые пользователь может размещать в специальных областях темы (сайдбарах, футерах и т.д.). Они позволяют добавить полезный функционал без необходимости править файлы темы.

Создание собственного виджета актуально, если вам нужно:

Добавить уникальный блок с кастомным функционалом;
Интегрировать внешние API;
Предоставить пользователям сайта удобную настройку и вывод данных;
Избежать установки лишних плагинов ради одного блока.

Например, можно создать виджет с последними заказами, специальной формой подписки, кастомными ссылками или баннерами.

Как зарегистрировать собственный виджет в WordPress

Для начала создадим новый класс, который наследуется от WP_Widget. Это обязательное условие для работы виджета в WordPress.

Основные методы, которые нужно реализовать:

__construct() — инициализация виджета и его параметров;
widget($args, $instance) — вывод контента виджета на фронтенде;
form($instance) — форма настроек виджета в админке;
update($new_instance, $old_instance) — обработка и сохранение настроек.

Пример создания простого виджета с названием "WPStart Приветствие":

class WPStart_Widget_Greeting extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'wpstart_widget_greeting',
            'WPStart Приветствие',
            array('description' => 'Простой виджет с приветственным сообщением')
        );
    }

    public function widget($args, $instance) {
        echo $args['before_widget'];
        $title = apply_filters('widget_title', $instance['title']);
        if (!empty($title)) {
            echo $args['before_title'] . $title . $args['after_title'];
        }
        echo '<p>Привет, посетитель сайта!</p>';
        echo $args['after_widget'];
    }

    public function form($instance) {
        $title = isset($instance['title']) ? $instance['title'] : 'Добро пожаловать';
        ?>
        <p><label for="<?php echo $this->get_field_id('title'); ?>">Заголовок:</label>
        <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>" /></p>
        <?php
    }

    public function update($new_instance, $old_instance) {
        $instance = array();
        $instance['title'] = (!empty($new_instance['title'])) ? strip_tags($new_instance['title']) : '';
        return $instance;
    }
}

function wpstart_register_widget() {
    register_widget('WPStart_Widget_Greeting');
}
add_action('widgets_init', 'wpstart_register_widget');

Этот код создаст виджет с настраиваемым заголовком и простым приветственным текстом.

Настройка виджета: добавляем поля и обработку данных

Чтобы виджет был полезным, обычно нужно добавить больше настроек, например, текст сообщения, ссылку или цвет.

Расширим пример и добавим поле для ввода произвольного сообщения, которое будет выводиться в виджете:

public function widget($args, $instance) {
    echo $args['before_widget'];
    $title = apply_filters('widget_title', $instance['title']);
    if (!empty($title)) {
        echo $args['before_title'] . $title . $args['after_title'];
    }
    $message = !empty($instance['message']) ? $instance['message'] : 'Привет, посетитель сайта!';
    echo '<p>' . esc_html($message) . '</p>';
    echo $args['after_widget'];
}

public function form($instance) {
    $title = isset($instance['title']) ? $instance['title'] : 'Добро пожаловать';
    $message = isset($instance['message']) ? $instance['message'] : '';
    ?>
    <p><label for="<?php echo $this->get_field_id('title'); ?>">Заголовок:</label>
    <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>" /></p>

    <p><label for="<?php echo $this->get_field_id('message'); ?>">Сообщение:</label>
    <textarea class="widefat" id="<?php echo $this->get_field_id('message'); ?>" name="<?php echo $this->get_field_name('message'); ?>" rows="4"><?php echo esc_textarea($message); ?></textarea></p>
    <?php
}

public function update($new_instance, $old_instance) {
    $instance = array();
    $instance['title'] = (!empty($new_instance['title'])) ? strip_tags($new_instance['title']) : '';
    $instance['message'] = (!empty($new_instance['message'])) ? sanitize_textarea_field($new_instance['message']) : '';
    return $instance;
}

Такое расширение сделает виджет более гибким и полезным. Пользователь сможет менять текст без правки кода.

Полезные плагины для работы с виджетами

Помимо создания своих виджетов, полезно знать плагины, которые расширяют возможности стандартных виджетов:

Widget Options — добавляет продвинутые настройки виджетов, включая видимость на разных страницах и устройствах.
Custom Sidebars — позволяет создавать собственные области виджетов и управлять ими.
SiteOrigin Widgets Bundle — набор готовых виджетов с возможностью кастомизации, отлично подходит для новичков.

Использование этих плагинов позволит более удобно управлять виджетами без необходимости программирования.

Итоги и дальнейшие шаги

Создание собственного виджета — отличный способ добавить уникальный функционал на сайт WordPress без лишних плагинов. С помощью API WordPress можно легко создавать настраиваемые, безопасные и удобные виджеты.

Рекомендуется изучить официальную документацию по виджетам в WordPress и экспериментировать с разными типами данных и выводом.