WordPress · 03.10.2026 · 4 мин чтения

Сайдбар в WordPress: как добавить и вывести виджеты

Сайдбар в WordPress — область, в которую администратор добавляет виджеты. Она может находиться сбоку от статьи, в подвале или над контентом. Её положение задаёт шаблон темы.

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

1. Зарегистрируй область виджетов

Добавь в functions.php:

function mytheme_register_sidebars() {
    register_sidebar( array(
        'name'          => 'Боковая колонка',
        'id'            => 'sidebar-main',
        'description'   => 'Выводится справа от записей и в архивах.',
        'before_widget' => '<section id="%1$s" class="widget %2$s">',
        'after_widget'  => '</section>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ) );

    register_sidebar( array(
        'name'          => 'Подвал',
        'id'            => 'sidebar-footer',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ) );
}
add_action( 'widgets_init', 'mytheme_register_sidebars' );

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

Параметры register_sidebar()

id — постоянный идентификатор в нижнем регистре без пробелов. Задавай его всегда: без него WordPress выдаст уведомление и сгенерирует ID по порядку регистрации. Если потом изменить порядок или ID, виджеты «потеряются» и окажутся в неактивных.
name и description видит администратор на экране виджетов.
before_widget и after_widget оборачивают каждый виджет. В %1$s подставится ID виджета, в %2$s — его классы.
before_title и after_title оборачивают заголовок виджета. В этом примере используется h2; выбирай уровень по структуре страницы. По умолчанию WordPress задаёт h2 с классом widgettitle.

С WordPress 5.6 есть before_sidebar и after_sidebar — обёртка всей области. Но её удобнее писать прямо в шаблоне, как в следующем разделе.

2. Выведи область в шаблоне

Создай в теме файл sidebar.php:

<?php
if ( ! is_active_sidebar( 'sidebar-main' ) ) {
    return;
}
?>
<aside class="sidebar" aria-label="Боковая колонка">
    <?php dynamic_sidebar( 'sidebar-main' ); ?>
</aside>

И подключи его в single.php, archive.php или index.php рядом с основным контентом:

<div class="layout">
    <main class="layout__content">
        <?php // Цикл записей ?>
    </main>

    <?php get_sidebar(); ?>
</div>

is_active_sidebar() возвращает false, если в области нет виджетов. Тогда пустой <aside> не попадёт в разметку. Для второй области создай sidebar-footer.php и подключи его через get_sidebar( 'footer' ).

3. CSS: боковая колонка и мобильная версия

Когда виджетов нет, контенту лучше занять всю ширину. Добавь класс к <body> только при активной колонке:

function mytheme_sidebar_body_class( $classes ) {
    if ( ! is_singular( 'page' ) && is_active_sidebar( 'sidebar-main' ) ) {
        $classes[] = 'has-sidebar';
    }
    return $classes;
}
add_filter( 'body_class', 'mytheme_sidebar_body_class' );

.has-sidebar .layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 48px;
}

@media (max-width: 900px) {
  .has-sidebar .layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

Условие в фильтре должно соответствовать шаблонам, где вызывается get_sidebar(). В примере обычные страницы исключены через ! is_singular( 'page' ).

Значение minmax(0, 1fr) позволяет основной колонке сжиматься. Длинные строки кода и таблицы не будут расширять сетку за пределы окна.

Блочный редактор виджетов

С WordPress 5.8 экран виджетов работает на блоках. На вывод это влияет так:

Каждый блок в области тоже оборачивается в before_widget и after_widget.
Заголовок, добавленный отдельным блоком «Заголовок», не получает before_title и after_title. Чтобы заголовок и содержимое были одним виджетом с разметкой темы, используй блок «Группа виджетов».
Классические виджеты, например «Свежие записи», выводятся по-прежнему.

Если тема рассчитана только на классические виджеты, верни старый экран:

function mytheme_classic_widgets() {
    remove_theme_support( 'widgets-block-editor' );
}
add_action( 'after_setup_theme', 'mytheme_classic_widgets' );

В блочных темах экрана виджетов нет: колонку собирают из блоков в шаблонах и частях шаблонов через редактор сайта.

Почему сайдбар или виджеты не отображаются

Нет раздела «Виджеты» в админке — register_sidebar() не вызван на widgets_init или код находится не в активной теме.
Виджеты добавлены, но на сайте пусто — шаблон не вызывает get_sidebar(), или в is_active_sidebar() и dynamic_sidebar() указан другой ID.
После смены темы виджеты пропали — у новой темы другие ID областей. Виджеты лежат в «Неактивных», их можно перенести.
Разметка заголовков не та — проверь, классический это виджет или блок «Заголовок».