Как сделать автоматический скрытый sidebar в теме WordPress

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

Почему стоит использовать скрытый sidebar в теме WordPress

Скрытый sidebar — это панель с дополнительным контентом, которая по умолчанию спрятана и открывается только при необходимости. Такой подход имеет несколько преимуществ:

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

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

Создание скрытого sidebar вручную: подключение и регистрация

Первым шагом нужно зарегистрировать sidebar в вашей теме. В functions.php добавим функцию wp_theme_register_sidebar, которая зарегистрирует область виджетов:

<?php
function wp_theme_register_sidebar() {
    register_sidebar(array(
        'name'          => 'Скрытый сайдбар',
        'id'            => 'hidden-sidebar',
        'description'   => 'Автоматически скрываемая панель',
        'before_widget' => '<div class="widget %2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>'
    ));
}
add_action('widgets_init', 'wp_theme_register_sidebar');
?>

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

Добавление разметки и кнопки вызова sidebar

В вашем файле шаблона (например, header.php или sidebar.php) добавьте HTML-разметку для скрытого sidebar и кнопки для его открытия и закрытия:

<button id="toggle-sidebar" aria-expanded="false" aria-controls="hidden-sidebar">Меню</button>

<aside id="hidden-sidebar" class="hidden-sidebar" aria-hidden="true">
    <button id="close-sidebar">Закрыть</button>
    <?php if (is_active_sidebar('hidden-sidebar')) : ?>
        <?php dynamic_sidebar('hidden-sidebar'); ?>
    <?php endif; ?>
</aside>

Здесь мы добавили кнопку с ID toggle-sidebar, которая открывает скрытый sidebar, и кнопку закрытия внутри самого сайдбара.

Стилизация и анимация скрытого sidebar

Для корректного скрытия и отображения сайдбара используем CSS. Добавьте в style.css вашей темы следующий код:

.hidden-sidebar {
    position: fixed;
    top: 0;
    right: -300px; /* Скрываем за правым краем */
    width: 300px;
    height: 100%;
    background: #fff;
    box-shadow: -2px 0 5px rgba(0,0,0,0.3);
    transition: right 0.3s ease;
    z-index: 9999;
    overflow-y: auto;
}

.hidden-sidebar.active {
    right: 0; /* Показываем */
}

#toggle-sidebar {
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 10000;
    background: #0073aa;
    color: #fff;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
}

#close-sidebar {
    display: block;
    margin: 10px auto;
    background: #d54e21;
    color: #fff;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
}

Так мы получим плавное появление и скрытие панели с правой стороны экрана.

JavaScript для управления открытием и закрытием sidebar

Добавьте следующий скрипт в footer.php перед закрывающим тегом </body> или подключите отдельный JS-файл:

<script>
document.addEventListener('DOMContentLoaded', function() {
    var toggleBtn = document.getElementById('toggle-sidebar');
    var closeBtn = document.getElementById('close-sidebar');
    var sidebar = document.getElementById('hidden-sidebar');

    toggleBtn.addEventListener('click', function() {
        var isActive = sidebar.classList.toggle('active');
        sidebar.setAttribute('aria-hidden', !isActive);
        toggleBtn.setAttribute('aria-expanded', isActive);
    });

    closeBtn.addEventListener('click', function() {
        sidebar.classList.remove('active');
        sidebar.setAttribute('aria-hidden', 'true');
        toggleBtn.setAttribute('aria-expanded', 'false');
    });

    // Закрыть sidebar при клике вне его
    document.addEventListener('click', function(e) {
        if (!sidebar.contains(e.target) && !toggleBtn.contains(e.target)) {
            sidebar.classList.remove('active');
            sidebar.setAttribute('aria-hidden', 'true');
            toggleBtn.setAttribute('aria-expanded', 'false');
        }
    });
});
</script>

Этот JS код отвечает за переключение класса active у sidebar, управление атрибутами доступности и закрытие панели при клике вне её.

Использование плагинов для расширенной функциональности скрытого sidebar

Если вы не хотите писать код вручную или хотите добавить дополнительные возможности, обратите внимание на плагины:

• Slide Anything — позволяет создавать слайдеры и выдвижные панели, можно использовать для сайдбара.
• Widget Options — расширяет возможности управления виджетами, включая показ по условиям.
• Clearfy Pro — комплексный плагин оптимизации, включает улучшения для управления сайдбарами и виджетами.

В большинстве случаев, комбинирование собственного кода с легкими плагинами даёт гибкую и производительную реализацию.

Как интегрировать скрытый sidebar в тему WPTheme

Если вы используете тему из каталога WPSHOP, например Reboot или Root, то структура шаблонов уже предусматривает подключение sidebar. Достаточно добавить регистрацию sidebar и шаблон в нужный файл, а стили и скрипты подключить в functions.php через wp_enqueue_scripts. Например:

function wp_theme_enqueue_sidebar_scripts() {
    wp_enqueue_style('wp-theme-sidebar-style', get_template_directory_uri() . '/css/sidebar.css');
    wp_enqueue_script('wp-theme-sidebar-script', get_template_directory_uri() . '/js/sidebar.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'wp_theme_enqueue_sidebar_scripts');

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

Советы по улучшению производительности и UX скрытого sidebar

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

• Загружайте виджеты сайдбара асинхронно, если они содержат динамический контент.
• Минимизируйте стили и скрипты, используемые для сайдбара.
• Добавьте поддержку клавиатурной навигации для доступности.
• Проверяйте корректность отображения на мобильных устройствах и разных браузерах.
• Используйте локализацию для кнопок и сообщений, чтобы адаптировать под разные языки.

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