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

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

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

Виджет — это мини-приложение, которое можно добавить в одну из областей виджетов темы (sidebar, footer и т.д.). Чаще всего виджеты показывают дополнительную информацию: последние записи, категории, метки, календарь, поиск, и так далее.

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

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

Давайте перейдем к практике и создадим виджет, который выводит список последних комментариев с дополнительными настройками.

Создание класса собственного виджета в WordPress

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

• __construct() — инициализация виджета;
• widget() — вывод содержимого на фронтенде;
• form() — форма настроек в админке;
• update() — обработчик сохранения настроек.

Вот минимальный шаблон класса виджета для wpfront.ru:

class Wpfront_Last_Comments_Widget extends WP_Widget { 
  public function __construct() {
    parent::__construct(
      'wpfront_last_comments',
      'Wpfront: Последние комментарии',
      ['description' => 'Выводит последние комментарии с настройками']
    );
  }

  public function widget($args, $instance) {
    // Вывод виджета на сайт
  }

  public function form($instance) {
    // Форма настроек в админке
  }

  public function update($new_instance, $old_instance) {
    // Сохраняем настройки
  }
}

// Регистрируем виджет
function wpfront_register_widgets() {
  register_widget('Wpfront_Last_Comments_Widget');
}
add_action('widgets_init', 'wpfront_register_widgets');

Этот код нужно добавить в файл functions.php вашей темы или в файл собственного плагина.

Объяснение конструктора

В конструкторе мы вызываем родительский конструктор и передаем ID виджета, его название и описание. Это данные, которые будут видны в админке.

Вывод содержимого виджета на сайте

Метод widget() отвечает за вывод виджета на фронтенде. Здесь мы используем параметры и настройки, чтобы сформировать HTML. Например, выведем последние комментарии:

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'];
  }

  $number = !empty($instance['number']) ? absint($instance['number']) : 5;

  $comments = get_comments([
    'number' => $number,
    'status' => 'approve',
    'post_status' => 'publish'
  ]);

  if ($comments) {
    echo '<ul class="wpfront-comments-list">';
    foreach ($comments as $comment) {
      $post_title = get_the_title($comment->comment_post_ID);
      $comment_link = get_comment_link($comment);
      echo '<li><a href="' . esc_url($comment_link) . '">' . esc_html($comment->comment_author) . '</a> на <em>' . esc_html($post_title) . '</em></li>';
    }
    echo '</ul>';
  } else {
    echo '<p>Комментариев нет.</p>';
  }

  echo $args['after_widget'];
}

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

Настройки виджета: форма и сохранение

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

Форма настроек в админке

public function form($instance) {
  $title = !empty($instance['title']) ? $instance['title'] : 'Последние комментарии';
  $number = !empty($instance['number']) ? absint($instance['number']) : 5;
  ?>
  <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('number'); ?>">Число комментариев:</label>
    <input class="tiny-text" id="<?php echo $this->get_field_id('number'); ?>" name="<?php echo $this->get_field_name('number'); ?>" type="number" step="1" min="1" value="<?php echo esc_attr($number); ?>" size="3" />
  </p>
  <?php
}

Обработка и сохранение настроек

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

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

Расширение функционала виджета

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

Пример расширения: добавим выбор категории, комментарии к постам которой отображать.

// В форме добавляем селект категорий
$categories = get_categories();
echo '<p><label for="' . $this->get_field_id('category') . '">Категория:</label><select id="' . $this->get_field_id('category') . '" name="' . $this->get_field_name('category') . '">';
echo '<option value="0">Все</option>';
foreach ($categories as $cat) {
  $selected = ($cat->term_id == ($instance['category'] ?? 0)) ? ' selected' : '';
  echo '<option value="' . $cat->term_id . '"' . $selected . '>' . esc_html($cat->name) . '</option>';
}
echo '</select></p>';

// В update
$instance['category'] = absint($new_instance['category']);

// В widget для получения комментариев
$args = [
  'number' => $number,
  'status' => 'approve',
  'post_status' => 'publish',
];
if (!empty($instance['category']) && $instance['category'] != 0) {
  $args['category'] = $instance['category'];
}
$comments = get_comments($args);

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

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

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

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

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

Итоги по созданию собственного виджета в WordPress

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

Используйте описанные методы и примеры кода, чтобы создавать мощные, производительные и простые в управлении виджеты для вашего WordPress-сайта на wpfront.ru.