Как добавить кастомные области виджетов в тему WordPress: пошаговое руководство

Автор: Лев Титов | Опубликовано: 26.01.2026

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

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

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

Добавлять уникальный контент в определённые части сайта;
Гибко управлять расположением блоков без правки кода;
Создавать адаптивные и персонализированные интерфейсы;
Улучшать юзабилити и удобство администрирования.

По умолчанию в большинстве тем уже есть несколько областей виджетов, но часто их недостаточно. Поэтому полезно уметь создавать свои.

Регистрация кастомных областей виджетов в functions.php

Для регистрации новой области виджетов используется функция register_sidebar(). Рекомендуется делать это через хук widgets_init. Приведём пример функции для сайта wordpressa.ru, где добавим две новые области: «Боковая панель для статей» и «Футер 3».

function wordpressa_register_custom_sidebars() {
    register_sidebar(array(
        'name' => 'Боковая панель для статей',
        'id' => 'wordpressa-sidebar-articles',
        'description' => 'Область виджетов для боковой панели в записях блога',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>',
    ));

    register_sidebar(array(
        'name' => 'Футер 3',
        'id' => 'wordpressa-footer-3',
        'description' => 'Третья область виджетов в футере сайта',
        'before_widget' => '<section id="%1$s" class="footer-widget %2$s">',
        'after_widget' => '</section>',
        'before_title' => '<h4 class="footer-widget-title">',
        'after_title' => '</h4>',
    ));
}
add_action('widgets_init', 'wordpressa_register_custom_sidebars');

В этом коде мы объявили две области с уникальными идентификаторами, описаниями и HTML-обёртками для виджетов и их заголовков. Такой подход позволит легко стилизовать каждый тип виджетов отдельно.

Вывод кастомных областей в шаблонах темы

Чтобы отобразить зарегистрированную область виджетов, используется функция dynamic_sidebar(). Обычно это делают в файлах шаблонов, например, в sidebar.php, footer.php или других местах темы.

Пример вывода боковой панели для статей в файле sidebar.php:

if ( is_single() && is_active_sidebar( 'wordpressa-sidebar-articles' ) ) {
    echo '<aside class="wordpressa-sidebar-articles">';
    dynamic_sidebar( 'wordpressa-sidebar-articles' );
    echo '</aside>';
}

Здесь мы проверяем, что вывод происходит на странице отдельной записи (is_single()), и что область виджетов активна (is_active_sidebar()). Это предотвращает лишний вывод пустых контейнеров.

Для футера в footer.php можно добавить:

if ( is_active_sidebar( 'wordpressa-footer-3' ) ) {
    echo '<div class="footer-widgets-area">';
    dynamic_sidebar( 'wordpressa-footer-3' );
    echo '</div>';
}

Советы по организации и стилизации кастомных областей

После регистрации и вывода областей виджетов часто требуется добавить стили для корректного отображения. Вот несколько рекомендаций:

Используйте уникальные классы в before_widget и before_title, чтобы легко таргетировать CSS.
Для адаптивности можно применять CSS Grid или Flexbox для футерных виджетов.
Минимизируйте вложенность и используйте чёткие семантические теги (<aside>, <section>).
Проверяйте, что не выводите пустые области — используйте is_active_sidebar().

Пример базового CSS для футерной области:

.footer-widgets-area {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    background-color: #f8f8f8;
}
.footer-widget {
    width: 30%;
}
.footer-widget-title {
    font-weight: bold;
    margin-bottom: 10px;
}

Дополнительные возможности: динамические области и условное отображение

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

Например, зарегистрируем универсальную область и в шаблоне выведем её только если страница — категория «Новости»:

function wordpressa_register_dynamic_sidebar() {
    register_sidebar(array(
        'name' => 'Категория Новости',
        'id' => 'wordpressa-sidebar-news',
        'description' => 'Виджеты для категории Новости',
        'before_widget' => '<div class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    ));
}
add_action('widgets_init', 'wordpressa_register_dynamic_sidebar');

if ( is_category('novosti') && is_active_sidebar('wordpressa-sidebar-news') ) {
    dynamic_sidebar('wordpressa-sidebar-news');
}

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

Пример: добавляем кастомную область виджетов в тему Reboot

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

Добавим область в functions.php:

function wordpressa_reboot_register_sidebar() {
    register_sidebar(array(
        'name' => 'Reboot: Нижний сайдбар',
        'id' => 'reboot-bottom-sidebar',
        'description' => 'Область виджетов в нижней части страницы Reboot',
        'before_widget' => '<div id="%1$s" class="widget %2$s reboot-widget">',
        'after_widget' => '</div>',
        'before_title' => '<h4 class="reboot-widget-title">',
        'after_title' => '</h4>',
    ));
}
add_action('widgets_init', 'wordpressa_reboot_register_sidebar');

Вывод в footer.php:

if ( is_active_sidebar( 'reboot-bottom-sidebar' ) ) {
    echo '<div class="reboot-bottom-sidebar">';
    dynamic_sidebar( 'reboot-bottom-sidebar' );
    echo '</div>';
}

Так вы расширите возможности темы, не нарушая её структуру и стили.

Использование плагина Clearfy Pro для управления виджетами

Если хочется упростить работу с областями виджетов и добавить дополнительные функции — например, отключать виджеты на определённых страницах или ролях пользователей, советуем попробовать Clearfy Pro. Этот плагин предлагает гибкие настройки и повышает производительность сайта за счёт оптимизации.

Выводы и рекомендации

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

Используйте стандартные функции WordPress, такие как register_sidebar() и dynamic_sidebar(), а также расширяйте функционал через готовые плагины, если нужно больше возможностей.

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