Виджеты и сайдбары WordPress: как настроить и вывести в любом месте темы

Сайдбар — один из самых недооценённых инструментов WordPress. Новичку кажется, что виджеты — это просто «колонка справа», куда можно бросить пару блоков. На деле сайдбары — это гибкая система зон, которые можно объявить в любом количестве и вывести в любой точке шаблона: в шапке, подвале, под контентом, над комментариями или даже внутри цикла записей.

В этой статье разберём механику работы виджетов с нуля: регистрацию области через register_sidebar(), вывод через dynamic_sidebar(), проверку is_active_sidebar(), настройку сайдбара в кастомайзере и переход на блочные виджеты Gutenberg. Материал рассчитан на новичков, поэтому весь код можно копировать и адаптировать под свою тему.

Что такое виджеты и сайдбары в WordPress

Виджет (widget) — это автономный блок интерфейса с определённой функцией: показывает последние записи, форму поиска, произвольное меню, текст или изображение. Из коробки WordPress предлагает набор стандартных виджетов: «Свежие записи», «Свежие комментарии», «Архивы», «Календарь», «Поиск», «Текст», «Произвольное меню» и другие.

Сайдбар (sidebar) — это не столько «боковая колонка», сколько зарегистрированная область для виджетов. Название историческое: изначально виджеты выводились именно в боковых колонках. Но технически сайдбар — это просто «коробка» с именем и набором параметров, которую вы можете разместить где угодно. Поэтому в документации и в коде тем чаще используют термин «область виджетов» (widget area).

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

Где именно хранятся настройки? Конфигурация всех областей лежит в опции sidebars_widgets таблицы wp_options, а настройки каждого виджета — в отдельных опциях вида widget_<имя>. Это важно понимать при переносе сайта или отладке: если сайдбар «пропал», часто виновата именно опция, а не шаблон. А если вы используете популярные конструкторы страниц — они создают свои области виджетов, и конфликты имён между ними решаются уникальными id.

Тема может объявлять неограниченное число сайдбаров: стандартные темы WordPress, например Twenty Seventeen, регистрируют сразу несколько областей — под шапку, боковую колонку и подвал. Больше о том, какие плагины стоит поставить сразу после установки, читайте в подборке топ-10 плагинов WordPress для новичков.

Регистрируем сайдбар: register_sidebar()

Чтобы тема могла принимать виджеты, сайдбар нужно зарегистрировать. Делается это в functions.php — лучше в файле дочерней темы, иначе правки сотрутся при обновлении родительской. Подробнее об этом — в гайде что такое дочерняя тема WordPress и зачем она нужна. Стандартный пример регистрации:

function mytheme_widgets_init() {
    register_sidebar( array(
        'name'          => 'Основной сайдбар',
        'id'            => 'sidebar-1',
        'description'   => 'Область виджетов в боковой колонке.',
        'before_widget' => '<section id="%1$s" class="widget %2$s">',
        'after_widget'  => '</section>',
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>',
    ) );
}
add_action( 'widgets_init', 'mytheme_widgets_init' );

Разберём параметры:

• name — название области, которое видит пользователь в админке.
• id — уникальный идентификатор сайдбара. Именно его вы передаёте в dynamic_sidebar(). Пишите латиницей, без пробелов.
• description — пояснение для администратора сайта.
• before_widget / after_widget — HTML-обёртка каждого виджета. Плейсхолдеры %1$s и %2$s подставляются автоматически: ID виджета и список его CSS-классов.
• before_title / after_title — обёртка заголовка виджета.

Если областей много и все они однотипные (например, четыре колонки подвала), код можно сократить функцией register_sidebars(), которая создаёт сразу несколько сайдбаров с общими параметрами. Имена и ID при этом получают суффиксы -2, -3 и так далее. Также обратите внимание на параметр class: он добавляет CSS-класс к обёртке всей области — удобно для стилизации колонок подвала.

Хук widgets_init — правильное место для регистрации: функция вызывается в момент инициализации виджетов, поэтому область гарантированно доступна и в админке, и на фронте. Если вы пока не уверены, куда вставлять такой код, посмотрите подборку полезных сниппетов для functions.php — там разобраны базовые приёмы работы с файлом функций темы.

Выводим сайдбар: dynamic_sidebar() и is_active_sidebar()

Регистрация создаёт «коробку», но сама по себе ничего на странице не показывает. За вывод отвечает функция dynamic_sidebar():

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
    <aside class="sidebar">
        <?php dynamic_sidebar( 'sidebar-1' ); ?>
    </aside>
<?php endif; ?>

Этот код обычно кладут в файл sidebar.php, а в шаблон подключают через get_sidebar():

<?php get_sidebar(); ?>

Проверка is_active_sidebar() обязательна. Если в области нет ни одного виджета, dynamic_sidebar() ничего не выведет, и пустой <aside> останется в вёрстке — лишний контейнер, который может ломать сетку и создавать лишние отступы. Безопасный паттерн — проверка и только потом вывод.

Внутри dynamic_sidebar() WordPress проходит по всем виджетам области в порядке, который задал пользователь в админке, и выводит каждый через его callback-функцию, оборачивая в before_widget/after_widget и подставляя заголовок в before_title/after_title.

Иногда нужно вывести конкретный виджет вне области — например, форму поиска в шапке. Для этого есть функция the_widget(), которая выводит виджет по имени класса в любом месте шаблона:

<?php the_widget( 'WP_Widget_Search', array( 'title' => '' ) ); ?>

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

Вывод виджетов в произвольных местах темы

Ограничиваться боковой колонкой не нужно: один файл functions.php позволяет объявить сколько угодно областей и разложить их по всему сайту. Классический приём — три колонки подвала:

function mytheme_widgets_init() {
    for ( $i = 1; $i <= 3; $i++ ) {
        register_sidebar( array(
            'name'          => 'Подвал — колонка ' . $i,
            'id'            => 'footer-' . $i,
            'description'   => 'Колонка подвала ' . $i,
            'before_widget' => '<div id="%1$s" class="footer-widget %2$s">',
            'after_widget'  => '</div>',
            'before_title'  => '<h4 class="footer-widget-title">',
            'after_title'   => '</h4>',
        ) );
    }
}
add_action( 'widgets_init', 'mytheme_widgets_init' );

А в footer.php выводим каждую колонку:

<?php if ( is_active_sidebar( 'footer-1' ) ) : ?>
    <div class="footer-column">
        <?php dynamic_sidebar( 'footer-1' ); ?>
    </div>
<?php endif; ?>

Вывести область в любом месте темы можно и через хуки. Например, добавить полосу с виджетами сразу после открывающего тега <body>:

function mytheme_widgets_after_body() {
    if ( is_active_sidebar( 'header-bar' ) ) {
        echo '<div class="header-bar">';
        dynamic_sidebar( 'header-bar' );
        echo '</div>';
    }
}
add_action( 'wp_body_open', 'mytheme_widgets_after_body' );

Такой приём удобен для промо-полос, кнопок соцсетей или контактной информации над шапкой: владелец сайта меняет содержимое из админки, не трогая код темы.

Ещё один распространённый паттерн — отдельные файлы шаблонов для каждой зоны. Создайте sidebar-footer.php и подключите его через get_sidebar( 'footer' ) в footer.php. Так код вывода каждой области лежит в своём файле, и тема остаётся читаемой даже при десятке зон виджетов. А чтобы сайдбар появлялся только на определённых страницах, комбинируйте вывод с условными тегами — is_front_page(), is_singular( 'product' ) и другими.

Настройка сайдбара в кастомайзере

Долгое время виджеты настраивались в «Внешний вид → Настроить» (кастомайзер): там был раздел «Виджеты», где можно было перетаскивать блоки в любую зарегистрированную область. Этот способ работал в версиях WordPress до 5.7 включительно.

С версии 5.8 виджеты переехали в блочный редактор: в админке появился экран «Внешний вид → Виджеты», где каждая область открывается как отдельное полотно с Gutenberg-блоками. В WordPress 6.3 раздел «Виджеты» из кастомайзера убрали полностью. Поэтому сегодня настройка сайдбара выглядит так:

1. Зарегистрируйте область через register_sidebar() — она сразу появится в списке.
2. Откройте «Внешний вид → Виджеты».
3. Кликните по названию области и добавьте нужные блоки; классические виджеты доступны через блок «Классический виджет» (Legacy Widget).
4. Сохраните изменения.

Если сайт работает на блочной теме (block theme), экран «Виджеты» заменяет «Редактор сайта»: колонки сайдбара редактируются прямо в шаблоне. Подробнее — в следующем разделе.

Разработчику кастомайзер пригодится и для другого: выбора раскладки сайдбара. Зарегистрируйте настройку, которая хранит положение боковой колонки (слева, справа или скрыта), а в шаблоне читайте её через get_theme_mod():

function mytheme_customize_register( $wp_customize ) {
    $wp_customize->add_section( 'layout', array(
        'title' => 'Раскладка сайдбара',
    ) );
    $wp_customize->add_setting( 'sidebar_position', array(
        'default' => 'right',
        'sanitize_callback' => 'sanitize_text_field',
    ) );
    $wp_customize->add_control( 'sidebar_position', array(
        'section'  => 'layout',
        'type'     => 'select',
        'choices'  => array(
            'left'  => 'Слева',
            'right' => 'Справа',
            'none'  => 'Скрыть',
        ),
    ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );

А в шаблоне добавляйте CSS-класс в зависимости от значения настройки. Клиент сможет менять раскладку без правки кода — только ползунками кастомайзера.

Виджеты Gutenberg-блоков в современных темах

Современный WordPress постепенно стирает грань между «виджетами» и «блоками». В блочных темах сайдбар — это обычная группа блоков в шаблоне: вы добавляете в макет колонку, а внутри неё — блоки «Последние записи», «Поиск», «Облако меток» и любые другие. Кастомизировать такой сайдбар может любой пользователь через редактор сайта, без отдельного экрана виджетов.

Хорошая новость для разработчиков классических тем: зарегистрированную область можно вывести и в блочном редакторе. Для этого есть блок «Область виджетов» (Widget Area). Добавьте его в шаблон или в запись — и выберите нужный сайдбар из выпадающего списка:

<!-- wp:widget-area {"id":"sidebar-1"} /-->

Практический совет: при разработке новой темы закладывайте сайдбары как блоки. Это делает тему совместимой с будущими версиями WordPress, упрощает работу контент-менеджера и не требует отдельных экранов в админке. А если нужно быстро собрать набор блоков для повторного использования — используйте синхронизированные шаблоны (patterns): создайте комбинацию один раз и вставляйте её в любую запись или шаблон.

Кстати, блок «Классический виджет» решает и обратную задачу: если у вас есть готовые виджеты от старого плагина, их можно вставить в блочный контент и продолжать использовать. Переход на блоки не означает потерю существующих виджетов — WordPress автоматически конвертирует классические виджеты в блочные при первом открытии редактора виджетов.

Сравним классический и блочный подходы к виджетам:

Критерий	Классические виджеты	Блочные виджеты (Gutenberg)
Где настраиваются	Экран «Виджеты» или кастомайзер (до WP 6.3)	Редактор сайта или редактор записей
Регистрация области	register_sidebar() в functions.php	Разметка блока в шаблоне / theme.json
Вывод на странице	dynamic_sidebar() + is_active_sidebar()	Блок «Область виджетов» или группа блоков
Гибкость оформления	Ограничена before_widget / after_widget	Любые стили и вложенные блоки
Для каких тем подходит	Классических, быстрых правок	Блочных тем, долгосрочных проектов
Порог входа	Низкий	Средний: нужно освоить редактор сайта

Часто задаваемые вопросы

Вывод

Виджеты и сайдбары — фундамент гибкой вёрстки WordPress. Три функции — register_sidebar(), dynamic_sidebar() и is_active_sidebar() — закрывают 90% задач: от классической боковой колонки до промо-полос в шапке и колонок подвала.

Краткая шпаргалка для новичка:

1. Регистрируйте области виджетов в functions.php через хук widgets_init.
2. Выводите через dynamic_sidebar() и всегда проверяйте is_active_sidebar().
3. Для новых тем используйте блочный подход и блок «Область виджетов».
4. Давайте областям понятные name и id — их увидит клиент в админке.

Если нужен сайт на WordPress под ключ — с правильно настроенными сайдбарами, виджетами и блочным редактором — посмотрите, как мы делаем сайты на WordPress и что входит в стоимость. Примеры работ — в нашем портфолио, а больше технических материалов для разработчиков — в разделе «Разработка WordPress» и в блоге delai-sait.ru.