WordPress Notes Premiumwp
  • Обязательный плагин
  • Как создать сайт с нуля
  • Как создать сайт с нуля

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

|

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

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

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

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

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

Как зарегистрировать виджет в WordPress: базовые шаги

В WordPress для создания виджета нужно создать класс, наследующийся от WP_Widget, и переопределить несколько методов. После этого виджет регистрируется с помощью функции register_widget().

Рассмотрим пошагово:

  1. Создаём класс с префиксом PremiumWP для уникальности, например PremiumWP_Custom_Widget.
  2. Переопределяем методы __construct(), widget(), form() и update().
  3. Регистрируем виджет в хуке widgets_init.

Вот базовый пример:

class PremiumWP_Custom_Widget extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'premiumwp_custom_widget',
            __('PremiumWP Custom Widget', 'premiumwp'),
            ['description' => __('Пример собственного виджета PremiumWP', 'premiumwp')]
        );
    }

    public function widget($args, $instance) {
        echo $args['before_widget'];
        echo '<h3>' . apply_filters('widget_title', $instance['title']) . '</h3>';
        echo '<p>Это пример содержимого виджета PremiumWP.</p>';
        echo $args['after_widget'];
    }

    public function form($instance) {
        $title = !empty($instance['title']) ? $instance['title'] : __('Новый заголовок', 'premiumwp');
        ?>
        <p>
            <label for="<?php echo esc_attr($this->get_field_id('title')); ?>"><?php _e('Заголовок:', 'premiumwp'); ?></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>
        <?php
    }

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

function premiumwp_register_custom_widget() {
    register_widget('PremiumWP_Custom_Widget');
}
add_action('widgets_init', 'premiumwp_register_custom_widget');

Детальный разбор методов виджета PremiumWP

Метод __construct() — инициализация виджета

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

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

Метод widget() — вывод содержимого на сайте

Здесь происходит отображение виджета на фронтенде. Сначала выводятся HTML-обёртки $args['before_widget'] и $args['after_widget'], которые задаёт тема.

Далее мы выводим заголовок и основной контент. Вызов apply_filters('widget_title', $instance['title']) позволяет другим плагинам или темам фильтровать заголовок.

Метод form() — форма настроек в админке

Задаёт поля для редактирования параметров виджета. В нашем примере это всего одно поле — заголовок. Используем методы $this->get_field_id() и $this->get_field_name() для корректной генерации атрибутов.

Метод update() — сохранение настроек

Обрабатывает и сохраняет данные из формы настроек, очищая их от нежелательных тегов с помощью strip_tags().

Расширение виджета PremiumWP: добавляем вывод последних записей с миниатюрами

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

Добавим новые опции в форму — количество записей и выбор категории:

public function form($instance) {
    $title = !empty($instance['title']) ? $instance['title'] : __('Последние записи', 'premiumwp');
    $number = !empty($instance['number']) ? absint($instance['number']) : 5;
    $category = !empty($instance['category']) ? absint($instance['category']) : 0;
    ?>
    <p>
        <label for="<?php echo esc_attr($this->get_field_id('title')); ?>"><?php _e('Заголовок:', 'premiumwp'); ?></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('number')); ?>"><?php _e('Количество записей:', 'premiumwp'); ?></label>
        <input id="<?php echo esc_attr($this->get_field_id('number')); ?>" name="<?php echo esc_attr($this->get_field_name('number')); ?>" type="number" value="<?php echo esc_attr($number); ?>" min="1" max="20">
    </p>
    <p>
        <label for="<?php echo esc_attr($this->get_field_id('category')); ?>"><?php _e('Категория (ID):', 'premiumwp'); ?></label>
        <input id="<?php echo esc_attr($this->get_field_id('category')); ?>" name="<?php echo esc_attr($this->get_field_name('category')); ?>" type="number" value="<?php echo esc_attr($category); ?>" min="0">
        <small><?php _e('Оставьте 0 для всех категорий', 'premiumwp'); ?></small>
    </p>
    <?php
}

Обновим метод update() для сохранения новых параметров:

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

Теперь модифицируем метод widget(), чтобы выводить список постов с миниатюрами:

public function widget($args, $instance) {
    echo $args['before_widget'];

    $title = apply_filters('widget_title', $instance['title']);
    if (!empty($title)) {
        echo $args['before_title'] . $title . $args['after_title'];
    }

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

    $query_args = [
        'posts_per_page' => $number,
        'post_status' => 'publish'
    ];

    if ($category > 0) {
        $query_args['cat'] = $category;
    }

    $recent_posts = new WP_Query($query_args);

    if ($recent_posts->have_posts()) {
        echo '<ul class="premiumwp-widget-posts">';
        while ($recent_posts->have_posts()) {
            $recent_posts->the_post();
            echo '<li>';
            if (has_post_thumbnail()) {
                echo '<a href="' . get_permalink() . '">' . get_the_post_thumbnail(get_the_ID(), 'thumbnail') . '</a> ';
            }
            echo '<a href="' . get_permalink() . '">' . get_the_title() . '</a>';
            echo '</li>';
        }
        echo '</ul>';
        wp_reset_postdata();
    } else {
        echo '<p>' . __('Записей не найдено.', 'premiumwp') . '</p>';
    }

    echo $args['after_widget'];
}

Рекомендации по оптимизации и безопасности виджета PremiumWP

При создании виджетов важно учитывать производительность. Используйте WP_Query аккуратно, избегайте излишних запросов и кешируйте результаты, если виджет вызывается часто.

Для кеширования можно применить Transients API — это позволит хранить результат запроса в кэше на определённое время и значительно снизить нагрузку на базу данных.

Также не забывайте об экранировании вывода и очистке пользовательских данных, чтобы избежать XSS-уязвимостей. Для вывода используйте функции esc_html(), esc_url() и аналогичные.

Полезные плагины для работы с виджетами в WordPress

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

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

Вывод

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

Не забывайте тестировать виджеты на разных устройствах и учитывать требования безопасности и производительности.

×
-15%
на премиум-тему
Reboot

Создай сайт мечты
на WordPress!

↓ ↓ ↓ ↓ ↓
Купить со скидкой »