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

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

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

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

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

Основы создания виджета в WordPress: класс и методы

Все виджеты в WordPress создаются как классы, наследующиеся от WP_Widget. Основные методы, которые нужно реализовать:

• __construct() — инициализация виджета, его название и описание;
• widget($args, $instance) — вывод содержимого виджета на сайте;
• form($instance) — форма настроек виджета в админке;
• update($new_instance, $old_instance) — обработка и сохранение настроек.

Рассмотрим пример простого виджета, который выводит приветственное сообщение.

Пример простого виджета

class Yarpp_Welcome_Widget extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'yarpp_welcome_widget',
            'YARPP: Приветственный виджет',
            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'];
        echo '<p>Спасибо, что посетили наш сайт на WordPress!</p>';
        echo $args['after_widget'];
    }

    public function form($instance) {
        $title = !empty($instance['title']) ? $instance['title'] : '';
        ?>
        <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>
        <?php
    }

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

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

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

Добавление настроек виджета: расширяем функциональность

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

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

Пример расширенного виджета с настройками

class Yarpp_Recent_Posts_Widget extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'yarpp_recent_posts_widget',
            'YARPP: Свежие записи с настройками',
            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'];

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

        $query_args = array(
            'post_type' => 'post',
            'posts_per_page' => $number,
            'post_status' => 'publish'
        );

        $recent_posts = new WP_Query($query_args);

        if($recent_posts->have_posts()) {
            echo '<ul>';
            while($recent_posts->have_posts()) {
                $recent_posts->the_post();
                echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a>';
                if($show_date) {
                    echo ' <small>(' . get_the_date() . ')</small>';
                }
                echo '</li>';
            }
            echo '</ul>';
            wp_reset_postdata();
        } 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;
        $show_date = !empty($instance['show_date']) ? (bool)$instance['show_date'] : false;
        ?>
        <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 id="<?php echo $this->get_field_id('number'); ?>" name="<?php echo $this->get_field_name('number'); ?>" type="number" value="<?php echo esc_attr($number); ?>" min="1" max="20">
        </p>
        <p>
            <input class="checkbox" type="checkbox" <?php checked($show_date); ?> id="<?php echo $this->get_field_id('show_date'); ?>" name="<?php echo $this->get_field_name('show_date'); ?>" />
            <label for="<?php echo $this->get_field_id('show_date'); ?>">Показывать дату публикации</label>
        </p>
        <?php
    }

    public function update($new_instance, $old_instance) {
        $instance = array();
        $instance['title'] = (!empty($new_instance['title'])) ? sanitize_text_field($new_instance['title']) : '';
        $instance['number'] = (!empty($new_instance['number'])) ? absint($new_instance['number']) : 5;
        $instance['show_date'] = !empty($new_instance['show_date']) ? 1 : 0;
        return $instance;
    }
}

function yarpp_register_recent_posts_widget() {
    register_widget('Yarpp_Recent_Posts_Widget');
}
add_action('widgets_init', 'yarpp_register_recent_posts_widget');

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

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

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

• Widget Options — позволяет управлять видимостью виджетов на разных страницах, устройствах и ролях пользователей;
• Custom Sidebars — дает возможность создавать и управлять кастомными боковыми панелями;
• Black Studio TinyMCE Widget — добавляет визуальный редактор в виджеты, что облегчает создание сложного контента без кода.

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

Пример интеграции собственного виджета с фильтрами плагина Widget Options

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

function yarpp_hide_widget_on_home($visible, $id) {
    if ($id === 'yarpp_recent_posts_widget-2' && is_front_page()) {
        return false; // Скрыть виджет с ID yarpp_recent_posts_widget-2 на главной
    }
    return $visible;
}
add_filter('widget_options_visibility', 'yarpp_hide_widget_on_home', 10, 2);

Это пример расширения возможностей управления отображением без изменения самого виджета.

Оптимизация производительности виджетов: советы и методы

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

• Используйте кэширование результатов запросов, например, с помощью Transients API WordPress;
• Избегайте тяжелых сложных запросов внутри виджета, особенно если они вызываются на каждой загрузке страницы;
• Учитывайте количество выводимых элементов, не делайте слишком большой объем данных в виджете;
• Проверяйте, нужен ли виджет на каждой странице, и при необходимости ограничивайте область его отображения.

Пример кэширования результатов виджета с использованием Transients API

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

    $cache_key = 'yarpp_recent_posts_' . md5(serialize($instance));
    $posts_list = get_transient($cache_key);

    if (false === $posts_list) {
        $query_args = array(
            'post_type' => 'post',
            'posts_per_page' => !empty($instance['number']) ? absint($instance['number']) : 5,
            'post_status' => 'publish'
        );
        $recent_posts = new WP_Query($query_args);

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

        set_transient($cache_key, $posts_list, 12 * HOUR_IN_SECONDS);
    }

    echo $posts_list;
    echo $args['after_widget'];
}

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