Кастомные виджеты — отличный способ расширить функционал сайта на WordPress и вывести уникальный контент в сайдбаре или других областях. В этой статье подробно разберём, как создать собственный виджет с настройками, которые сможет менять администратор через панель управления, а также как добавить кастомные стили для него.
Что такое кастомный виджет и зачем он нужен
Виджет — это блок, который можно добавить в одну из областей виджетов темы (sidebar, footer и т.д.). WordPress уже содержит стандартные виджеты, например, «Последние записи», «Категории» и др. Но зачастую нужно вывести что-то своё: форму подписки, акционные баннеры, уникальные списки и т.п. Тогда на помощь приходит создание кастомного виджета.
Преимущества кастомных виджетов:
- Управляемость через админку без редактирования кода;
- Гибкость — можно создавать любые блоки с настройками;
- Повторяемость — используйте виджет на любом количестве страниц;
- Лёгкость интеграции с темой и плагинами.
Создание кастомного виджета: базовый пример
Для начала создадим простой виджет, который выводит произвольный текст, задаваемый в настройках.
Добавим код в файл functions.php темы или создадим отдельный плагин. Пример функции с префиксом wptest_:
class Wptest_Custom_Widget extends WP_Widget { public function __construct() { parent::__construct( 'wptest_custom_widget', // ID виджета 'Wptest: Кастомный виджет', // Название ['description' => 'Пример кастомного виджета с настройками'] ); } public function widget($args, $instance) { echo $args['before_widget']; if (!empty($instance['title'])) { echo $args['before_title'] . apply_filters('widget_title', $instance['title']) . $args['after_title']; } echo '<p>' . esc_html($instance['text']) . '</p>'; echo $args['after_widget']; } public function form($instance) { $title = !empty($instance['title']) ? $instance['title'] : ''; $text = !empty($instance['text']) ? $instance['text'] : ''; ?> <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" 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> <?php } public function update($new_instance, $old_instance) { $instance = []; $instance['title'] = (!empty($new_instance['title'])) ? sanitize_text_field($new_instance['title']) : ''; $instance['text'] = (!empty($new_instance['text'])) ? sanitize_textarea_field($new_instance['text']) : ''; return $instance; }}function wptest_register_custom_widget() { register_widget('Wptest_Custom_Widget');}add_action('widgets_init', 'wptest_register_custom_widget');Этот код создаёт простой виджет с двумя полями в настройках: заголовок и текст. Администратор может менять их в панели Вордпресс.
Добавление кастомных стилей для виджета
Чтобы виджет выглядел красиво и соответствовал дизайну сайта, подключим к нему CSS. Для этого зарегистрируем и подключим стили через wp_enqueue_scripts.
function wptest_custom_widget_styles() { wp_enqueue_style('wptest-custom-widget-style', get_template_directory_uri() . '/css/wptest-widget.css');}add_action('wp_enqueue_scripts', 'wptest_custom_widget_styles');Создайте файл css/wptest-widget.css в папке темы и добавьте стили, например:
.widget_wptest_custom_widget { background-color: #f9f9f9; border: 1px solid #ddd; padding: 15px; border-radius: 5px; font-family: Arial, sans-serif;} .widget_wptest_custom_widget p { color: #333; font-size: 14px;}Обратите внимание, что WordPress автоматически добавляет класс widget_ + ID виджета к обёртке, что удобно для стилизации.
Расширение виджета: добавляем выбор цвета текста
Добавим в настройки виджета поле для выбора цвета текста, чтобы администратор мог менять цвет вывода.
Обновим методы form, update и widget:
public function form($instance) { $title = !empty($instance['title']) ? $instance['title'] : ''; $text = !empty($instance['text']) ? $instance['text'] : ''; $color = !empty($instance['color']) ? $instance['color'] : '#000000'; ?> <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" 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('color')); ?>">Цвет текста:</label> <input class="widefat" id="<?php echo esc_attr($this->get_field_id('color')); ?>" name="<?php echo esc_attr($this->get_field_name('color')); ?>" type="color" value="<?php echo esc_attr($color); ?>"> </p> <?php}public function update($new_instance, $old_instance) { $instance = []; $instance['title'] = (!empty($new_instance['title'])) ? sanitize_text_field($new_instance['title']) : ''; $instance['text'] = (!empty($new_instance['text'])) ? sanitize_textarea_field($new_instance['text']) : ''; $instance['color'] = (!empty($new_instance['color'])) ? sanitize_hex_color($new_instance['color']) : '#000000'; return $instance;}public function widget($args, $instance) { echo $args['before_widget']; if (!empty($instance['title'])) { echo $args['before_title'] . apply_filters('widget_title', $instance['title']) . $args['after_title']; } $color = !empty($instance['color']) ? $instance['color'] : '#000000'; echo '<p style="color:' . esc_attr($color) . '">' . esc_html($instance['text']) . '</p>'; echo $args['after_widget'];}Теперь в админке можно выбрать цвет текста, и он отобразится на сайте.
Советы по улучшению и плагины для кастомных виджетов
Если хочется не писать виджеты с нуля, можно использовать плагины, которые упрощают создание кастомных виджетов:
- Clearfy Pro — содержит инструменты для оптимизации и управления виджетами;
- WPStories — для создания интерактивных историй, которые можно вывести через виджет;
- My Popup — позволяет добавить всплывающие окна как виджеты.
Для более сложных решений стоит изучить WP_Widget и API WordPress, чтобы создавать динамические и интерактивные виджеты с поддержкой AJAX, REST API и кастомных стилей.
Использование хука widgets_init для регистрации виджета
Ключевой момент — зарегистрировать виджет через widgets_init, чтобы WordPress узнал о нём и добавил в список доступных для добавления в сайдбары.
Пример регистрации уже был показан выше, но ещё раз:
add_action('widgets_init', function() { register_widget('Wptest_Custom_Widget');});Это гарантирует, что виджет загрузится в нужный момент.
Обработка ошибок и безопасность
Обязательно используйте функции очистки и экранирования данных sanitize_text_field, sanitize_textarea_field, esc_html, esc_attr, чтобы избежать XSS и ошибок при выводе.
Также проверяйте, что данные в настройках корректны, особенно если добавляете поля для цветов, URL и других специальных значений.