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

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

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

Создание собственного виджета позволяет:

• Добавить уникальный контент или функционал, адаптированный под задачи сайта;
• Контролировать код и его производительность без лишних зависимостей;
• Обеспечить гибкость в настройках и отображении для администраторов сайта.

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

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

Для создания собственного виджета нужно написать класс, который наследуется от WP_Widget. В нем определяются методы для вывода виджета, его настроек и сохранения параметров.

Начнём с базового шаблона виджета, который мы зарегистрируем в WordPress через хук widgets_init. Например, для домена wpcource.ru префикс функций и классов добавим wpcource_ для уникальности.

add_action('widgets_init', 'wpcource_register_custom_widget');
function wpcource_register_custom_widget() {
    register_widget('WPCource_Custom_Widget');
}

class WPCource_Custom_Widget extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'wpcource_custom_widget',
            'WPCource: Персонализированный виджет',
            ['description' => 'Пример кастомного виджета с настройками для wpcource.ru']
        );
    }

    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 = $instance['title'] ?? '';
        ?>
        <p>
            <label for="<?php echo esc_attr($this->get_field_id('title')); ?>">Заголовок:</label>
            <input class="widefat" id="<?php echo esc_attr($this->get_field_id('title')); ?>" 
            name="<?php echo esc_attr($this->get_field_name('title')); ?>" type="text" 
            value="<?php echo esc_attr($title); ?>" />
        </p>
        <?php
    }

    public function update($new_instance, $old_instance) {
        $instance = [];
        $instance['title'] = sanitize_text_field($new_instance['title']);
        return $instance;
    }
}

Этот код создаёт виджет с одним настраиваемым полем — заголовком. Он отображается в списке виджетов и может быть добавлен в любой сайдбар вашей темы.

Добавление пользовательских полей и расширение функционала

Обычно одного заголовка недостаточно. Давайте добавим параметры для вывода произвольного текста и выбора цвета фона виджета. Это сделает его более гибким и позволит администратору сайта легко менять внешний вид.

Добавим в класс виджета новые поля text и bg_color и реализуем их отображение и сохранение.

public function widget($args, $instance) {
    echo $args['before_widget'];
    $title = apply_filters('widget_title', $instance['title'] ?? '');
    $text = $instance['text'] ?? '';
    $bg_color = $instance['bg_color'] ?? '#ffffff';

    echo '<div style="background-color:' . esc_attr($bg_color) . '; padding: 10px;">';
    if (!empty($title)) {
        echo $args['before_title'] . $title . $args['after_title'];
    }
    if (!empty($text)) {
        echo '<p>' . wp_kses_post($text) . '</p>';
    }
    echo '</div>';
    echo $args['after_widget'];
}

public function form($instance) {
    $title = $instance['title'] ?? '';
    $text = $instance['text'] ?? '';
    $bg_color = $instance['bg_color'] ?? '#ffffff';
    ?>
    <p>
        <label for="<?php echo esc_attr($this->get_field_id('title')); ?>">Заголовок:</label>
        <input class="widefat" id="<?php echo esc_attr($this->get_field_id('title')); ?>" 
        name="<?php echo esc_attr($this->get_field_name('title')); ?>" type="text" 
        value="<?php echo esc_attr($title); ?>" />
    </p>
    <p>
        <label for="<?php echo esc_attr($this->get_field_id('text')); ?>">Текст виджета:</label>
        <textarea class="widefat" rows="4" id="<?php echo esc_attr($this->get_field_id('text')); ?>" 
        name="<?php echo esc_attr($this->get_field_name('text')); ?>"><?php echo esc_textarea($text); ?></textarea>
    </p>
    <p>
        <label for="<?php echo esc_attr($this->get_field_id('bg_color')); ?>">Цвет фона:</label>
        <input class="widefat" type="color" id="<?php echo esc_attr($this->get_field_id('bg_color')); ?>" 
        name="<?php echo esc_attr($this->get_field_name('bg_color')); ?>" value="<?php echo esc_attr($bg_color); ?>" />
    </p>
    <?php
}

public function update($new_instance, $old_instance) {
    $instance = [];
    $instance['title'] = sanitize_text_field($new_instance['title']);
    $instance['text'] = sanitize_textarea_field($new_instance['text']);
    $instance['bg_color'] = sanitize_hex_color($new_instance['bg_color']);
    return $instance;
}

Теперь в админке виджета появятся новые поля. Цвет фона задаётся с помощью цветового инпута, что удобно и наглядно.

Использование популярных плагинов для расширения виджетов

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

Вот несколько полезных плагинов, которые помогут в этом:

• Widget Options — расширяет стандартные виджеты, добавляя условия отображения, стили, анимации.
• Custom Sidebars — позволяет создавать собственные области для виджетов и назначать их на разные страницы.
• Elementor Pro — мощный визуальный конструктор с продвинутыми виджетами и возможностью создавать собственные.

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

Советы и рекомендации по оптимизации виджетов

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

• Всегда используйте функции санитизации и экранирования (например, sanitize_text_field, wp_kses_post) для данных, вводимых пользователем.
• Минимизируйте количество запросов к базе данных внутри виджета, кешируйте результаты, если возможно.
• Используйте хуки и фильтры WordPress для расширения функционала, чтобы ваш код был совместим с другими плагинами и темами.
• Тестируйте виджет на разных устройствах и браузерах, чтобы обеспечить корректное отображение.

Следуя этим рекомендациям, вы создадите стабильный и удобный в использовании виджет, который можно будет легко масштабировать и поддерживать.