Виджеты в WordPress — это удобный способ добавлять динамический контент в боковые панели, футер или другие области темы. Хотя встроенные виджеты, такие как “Последние записи” или “Облако тегов”, полезны, иногда вам нужно что-то уникальное. В этой статье мы разберем, как создать собственный виджет с нуля, используя PHP и WordPress API. Никаких плагинов — только код и немного терпения!

Зачем создавать свои виджеты?

Пользовательские виджеты позволяют:

• Вывести специфический контент (например, баннер, форму подписки или случайную цитату).
• Настроить функционал под конкретный проект.
• Повысить гибкость темы без необходимости править шаблоны.

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

Шаг 1: Подготовка

Для начала убедитесь, что у вас есть:

• Установленный WordPress (локально или на хостинге).
• Доступ к файлам темы (например, через functions.php).
• Базовые знания PHP.

Мы будем работать в файле functions.php активной темы. Если вы создаете много кастомного кода, лучше вынести виджет в отдельный файл и подключить его через include или создать собственный плагин.

Шаг 2: Регистрация виджета

WordPress использует класс WP_Widget для создания виджетов. Добавим следующий код в functions.php:

<?php
// Регистрация виджета
function my_custom_widget_register() {
    register_widget('My_Custom_Widget');
}
add_action('widgets_init', 'my_custom_widget_register');

// Класс виджета
class My_Custom_Widget extends WP_Widget {
    // Конструктор
    public function __construct() {
        parent::__construct(
            'my_custom_widget', // Уникальный ID
            'Мой кастомный виджет', // Название в админке
            array('description' => 'Простой виджет с приветственным сообщением.') // Описание
        );
    }
}

Этот код регистрирует виджет и задает его базовые параметры. После сохранения файла он появится в разделе “Внешний вид → Виджеты” в админке.

Шаг 3: Добавляем форму настроек

Теперь создадим форму, чтобы пользователь мог настроить виджет. Добавим метод form в класс:

public function form($instance) {
    $title = !empty($instance['title']) ? $instance['title'] : 'Привет!';
    $button_text = !empty($instance['button_text']) ? $instance['button_text'] : 'Нажми меня';
    ?>
    <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('button_text'); ?>">Текст кнопки:</label>
        <input class="widefat" id="<?php echo $this->get_field_id('button_text'); ?>" 
               name="<?php echo $this->get_field_name('button_text'); ?>" type="text" 
               value="<?php echo esc_attr($button_text); ?>">
    </p>
    <?php
}

Этот код добавляет два поля в админке: для текста приветствия и текста кнопки. Значения сохраняются в $instance и подставляются по умолчанию, если пользователь ничего не ввел.

Шаг 4: Сохранение данных

Метод update отвечает за сохранение введенных данных:

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

Здесь мы очищаем данные через sanitize_text_field для безопасности и обновляем массив $instance.

Шаг 5: Вывод виджета на сайте

Метод widget определяет, что увидят посетители. Добавим его в класс:

public function widget($args, $instance) {
    $title = !empty($instance['title']) ? $instance['title'] : 'Привет!';
    $button_text = !empty($instance['button_text']) ? $instance['button_text'] : 'Нажми меня';

    // Выводим HTML
    echo $args['before_widget'];
    echo '<div class="custom-widget">';
    echo '<h3>' . esc_html($title) . '</h3>';
    echo '<button>' . esc_html($button_text) . '</button>';
    echo '</div>';
    echo $args['after_widget'];
}

$args содержит параметры темы (например, обертки <div> или <aside>), а $instance — данные из формы. Мы выводим заголовок и кнопку с использованием esc_html для защиты от XSS.

Шаг 6: Полный код

Вот как выглядит весь класс целиком:

<?php
function my_custom_widget_register() {
    register_widget('My_Custom_Widget');
}
add_action('widgets_init', 'my_custom_widget_register');

class My_Custom_Widget extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'my_custom_widget',
            'Мой кастомный виджет',
            array('description' => 'Простой виджет с приветственным сообщением.')
        );
    }

    public function form($instance) {
        $title = !empty($instance['title']) ? $instance['title'] : 'Привет!';
        $button_text = !empty($instance['button_text']) ? $instance['button_text'] : 'Нажми меня';
        ?>
        <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('button_text'); ?>">Текст кнопки:</label>
            <input class="widefat" id="<?php echo $this->get_field_id('button_text'); ?>" 
                   name="<?php echo $this->get_field_name('button_text'); ?>" type="text" 
                   value="<?php echo esc_attr($button_text); ?>">
        </p>
        <?php
    }

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

    public function widget($args, $instance) {
        $title = !empty($instance['title']) ? $instance['title'] : 'Привет!';
        $button_text = !empty($instance['button_text']) ? $instance['button_text'] : 'Нажми меня';

        echo $args['before_widget'];
        echo '<div class="custom-widget">';
        echo '<h3>' . esc_html($title) . '</h3>';
        echo '<button>' . esc_html($button_text) . '</button>';
        echo '</div>';
        echo $args['after_widget'];
    }
}

Шаг 7: Стилизация (опционально)

Чтобы виджет выглядел красиво, добавьте CSS в файл style.css вашей темы:

.custom-widget {
    padding: 20px;
    background: #f5f5f5;
    border-radius: 5px;
}
.custom-widget h3 {
    margin: 0 0 10px;
}
.custom-widget button {
    padding: 10px 20px;
    background: #0073aa;
    color: #fff;
    border: none;
    cursor: pointer;
}
.custom-widget button:hover {
    background: #005d87;
}

Шаг 8: Тестирование

Сохраните изменения, перейдите в “Внешний вид → Виджеты”, найдите “Мой кастомный виджет”, перетащите его в нужную область (например, боковую панель) и настройте текст. Обновите сайт и проверьте результат!

Заключение

Создание пользовательских виджетов в WordPress — это отличный способ расширить функционал сайта и сделать его уникальным. Начните с простого примера, как этот, а затем добавляйте сложные элементы: динамические данные, AJAX или интеграцию с API. Главное — экспериментируйте и адаптируйте код под свои задачи. Удачи в разработке!