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

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

Что такое адаптивный виджет и зачем он нужен

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

Главная задача адаптивности — улучшить пользовательский опыт и повысить удобство взаимодействия с сайтом на всех устройствах.

Для реализации адаптивного виджета нам понадобится:

• Создать базовый виджет на PHP с использованием стандартного API WordPress.
• Добавить CSS стили с медиазапросами для корректного отображения на разных экранах.
• При необходимости — добавить JavaScript для динамического управления поведением виджета на мобильных устройствах.

Создаем базовый адаптивный виджет на PHP

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

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

class Wpcat_Adaptive_Widget extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'wpcat_adaptive_widget',
            'WPCat Адаптивный Виджет',
            ['description' => 'Пример адаптивного виджета для WPCat']
        );
    }

    public function widget($args, $instance) {
        echo $args['before_widget'];
        echo '<div class="wpcat-adaptive-widget">';
        echo '<p>Добро пожаловать на WPCat!</p>';
        echo '<button class="wpcat-toggle-btn">Показать детали</button>';
        echo '<div class="wpcat-widget-details" style="display:none;">';
        echo '<p>Здесь дополнительная информация, видимая на больших экранах или по клику на кнопку.</p>';
        echo '</div>';
        echo '</div>';
        echo $args['after_widget'];
    }

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

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

function wpcat_register_adaptive_widget() {
    register_widget('Wpcat_Adaptive_Widget');
}
add_action('widgets_init', 'wpcat_register_adaptive_widget');

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

Добавляем CSS для адаптивности

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

.wpcat-adaptive-widget {
    background-color: #f9f9f9;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.wpcat-adaptive-widget p {
    margin: 0 0 10px;
    font-size: 16px;
    color: #333;
}

.wpcat-toggle-btn {
    display: none;
    padding: 8px 12px;
    background-color: #0073aa;
    border: none;
    color: white;
    border-radius: 3px;
    cursor: pointer;
}

/* На устройствах с шириной экрана меньше 768px показываем кнопку, скрываем детали по умолчанию */
@media (max-width: 767px) {
    .wpcat-toggle-btn {
        display: inline-block;
    }
    .wpcat-widget-details {
        display: none !important;
    }
}

/* На больших экранах детали всегда видимы, кнопка скрыта */
@media (min-width: 768px) {
    .wpcat-widget-details {
        display: block !important;
    }
    .wpcat-toggle-btn {
        display: none !important;
    }
}

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

Добавляем JavaScript для управления поведением на мобильных

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

Вставьте следующий код в footer.php темы или зарегистрируйте через wp_enqueue_script с локализацией, но для простоты пример ниже:

<script>
document.addEventListener('DOMContentLoaded', function() {
    var buttons = document.querySelectorAll('.wpcat-toggle-btn');
    buttons.forEach(function(button) {
        button.addEventListener('click', function() {
            var details = this.nextElementSibling;
            if (details.style.display === 'block') {
                details.style.display = 'none';
                this.textContent = 'Показать детали';
            } else {
                details.style.display = 'block';
                this.textContent = 'Скрыть детали';
            }
        });
    });
});
</script>

Этот скрипт найдет все кнопки с классом wpcat-toggle-btn и привяжет к ним обработчик клика, который будет переключать видимость блока с деталями.

Применение на практике и расширение функционала

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

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

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

Заключение

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