Як створити власний віджет WordPress для виводу динамічних даних

Віджети — це зручний спосіб додати блоки контенту в сайдбар або футер без редагування шаблонів. Хоча більшість тем уже мають стандартні віджети, ви можете створити власний — наприклад, для виводу останніх відгуків, курсів валют чи індивідуальної статистики. У цій статті покажемо, як створити кастомний віджет у WordPress.

1. Де зберігати код?

Рекомендовано створити плагін або додати код до functions.php теми. Ми покажемо приклад у функціях теми.

2. Реєстрація кастомного віджета

Додайте наступний код у functions.php:

class My_Custom_Widget extends WP_Widget {
  function __construct() {
    parent::__construct(
      'my_custom_widget',
      'Мій Віджет',
      array('description' => 'Виводить кастомні дані')
    );
  }

  function widget($args, $instance) {
    echo $args['before_widget'];
    echo $args['before_title'] . 'Динамічні дані' . $args['after_title'];

    // Ваш код — приклад виводу останніх постів
    $query = new WP_Query(array('posts_per_page' => 3));
    echo '<ul>';
    while ($query->have_posts()) : $query->the_post();
      echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
    endwhile;
    echo '</ul>';
    wp_reset_postdata();

    echo $args['after_widget'];
  }

  function form($instance) {
    echo '<p>Налаштувань поки немає.</p>';
  }

  function update($new_instance, $old_instance) {
    return $old_instance;
  }
}

function register_my_custom_widget() {
  register_widget('My_Custom_Widget');
}
add_action('widgets_init', 'register_my_custom_widget');

3. Де з’явиться віджет?

Після додавання коду перейдіть до Зовнішній вигляд → Віджети або Customizer, і ви побачите «Мій Віджет» серед доступних блоків.

4. Додавання налаштувань у віджет

Ось приклад поля для введення заголовка віджета:

function form($instance) {
  $title = $instance['title'] ?? '';
  echo '<p>
    <label>Заголовок:</label>
    <input type="text" name="' . $this->get_field_name('title') . '" value="' . esc_attr($title) . '" />
  </p>';
}

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

function widget($args, $instance) {
  $title = $instance['title'] ?? 'Мій віджет';
  echo $args['before_widget'];
  echo $args['before_title'] . esc_html($title) . $args['after_title'];
  // ...
}

5. Що ще можна виводити?

Динамічну інформацію з API (наприклад, погоду або курси валют)
Дані з бази WordPress: відгуки, користувачі, товари
Форми, CTA-кнопки, шорткоди

6. Сумісність із Gutenberg

Віджети працюють у класичному режимі. Для повної підтримки блок-редактора створюйте Gutenberg блоки, але класичні віджети досі актуальні для багатьох тем.

Висновок

Кастомні віджети — це потужний інструмент для гнучкого управління контентом у WordPress. Створити їх не складно, а можливості — практично безмежні: від простого списку постів до інтеграції зі сторонніми сервісами.