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

Автор: Татьяна Фролова | Опубликовано: 09.01.2026

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

Что такое виджеты в WordPress и почему создавать собственные важно

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

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

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

Регистрация и базовая структура собственного виджета

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

class WP8_Custom_Widget extends WP_Widget {
  public function __construct() {
    parent::__construct(
      'wp8_custom_widget', // ID виджета
      'WP8: Приветственный виджет', // Название
      array('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 = array();
    $instance['title'] = sanitize_text_field($new_instance['title']);
    $instance['text'] = sanitize_textarea_field($new_instance['text']);
    return $instance;
  }
}

// Регистрация виджета
function wp8_register_custom_widget() {
  register_widget('WP8_Custom_Widget');
}
add_action('widgets_init', 'wp8_register_custom_widget');

Этот код создаст простой виджет с настройками заголовка и текста в панели администрирования WordPress. Вы можете добавить этот код в файл functions.php вашей темы или в отдельный плагин.

Расширение функционала: добавление настроек и динамических данных

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

Для этого нужно добавить параметры выбора категории и количества записей, а в методе widget сделать WP_Query для получения нужных постов.

class WP8_Recent_Posts_Widget extends WP_Widget {
  public function __construct() {
    parent::__construct(
      'wp8_recent_posts',
      'WP8: Последние записи из категории',
      array('description' => 'Вывод последних постов выбранной категории')
    );
  }

  public function widget($args, $instance) {
    echo $args['before_widget'];
    $title = !empty($instance['title']) ? $instance['title'] : 'Последние записи';
    echo $args['before_title'] . apply_filters('widget_title', $title) . $args['after_title'];

    $cat_id = !empty($instance['category']) ? intval($instance['category']) : 0;
    $posts_num = !empty($instance['posts_num']) ? intval($instance['posts_num']) : 5;

    $query_args = array(
      'posts_per_page' => $posts_num,
      'cat' => $cat_id,
      'post_status' => 'publish'
    );
    $query = new WP_Query($query_args);

    if ($query->have_posts()) {
      echo '<ul>';
      while ($query->have_posts()) {
        $query->the_post();
        echo '<li><a href="' . esc_url(get_permalink()) . '">' . get_the_title() . '</a></li>';
      }
      echo '</ul>';
      wp_reset_postdata();
    } else {
      echo '<p>Записей не найдено.</p>';
    }
    echo $args['after_widget'];
  }

  public function form($instance) {
    $title = !empty($instance['title']) ? $instance['title'] : 'Последние записи';
    $category = !empty($instance['category']) ? intval($instance['category']) : 0;
    $posts_num = !empty($instance['posts_num']) ? intval($instance['posts_num']) : 5;
    $categories = get_categories();
    ?>
    <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('category')); ?>">Категория:</label>
      <select class="widefat" id="<?php echo esc_attr($this->get_field_id('category')); ?>" 
              name="<?php echo esc_attr($this->get_field_name('category')); ?>">
        <option value="0" <?php selected($category, 0); ?>>Все категории</option>
        <?php foreach ($categories as $cat): ?>
          <option value="<?php echo esc_attr($cat->term_id); ?>" <?php selected($category, $cat->term_id); ?>><?php echo esc_html($cat->name); ?></option>
        <?php endforeach; ?>
      </select>
    </p>
    <p>
      <label for="<?php echo esc_attr($this->get_field_id('posts_num')); ?>">Количество записей:</label>
      <input class="tiny-text" id="<?php echo esc_attr($this->get_field_id('posts_num')); ?>" 
             name="<?php echo esc_attr($this->get_field_name('posts_num')); ?>" type="number" step="1" min="1" 
             value="<?php echo esc_attr($posts_num); ?>" size="3">
    </p>
    <?php
  }

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

function wp8_register_recent_posts_widget() {
  register_widget('WP8_Recent_Posts_Widget');
}
add_action('widgets_init', 'wp8_register_recent_posts_widget');

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

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

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

My Popup — плагин для создания всплывающих окон с кастомным контентом, который можно выводить через виджеты.
WPStories — плагин для создания историй, которые можно выводить в виде виджета.

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

Практические советы и рекомендации по созданию виджетов

При разработке собственных виджетов учитывайте следующие моменты:

Безопасность: всегда используйте функции санитации и экранирования данных, чтобы предотвратить XSS и другие уязвимости.
Производительность: избегайте тяжелых запросов и сложных вычислений в методе widget, используйте кэширование, если это возможно.
Юзабилити: делайте удобную форму настроек с понятными полями и подсказками.
Совместимость: проверяйте работу виджета с разными темами и плагинами, чтобы избежать конфликтов.

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