В предыдущей статье мы рассмотрели, как создать пользовательский заголовок (header), сегодня мы будем создавать пользовательскую боковую панель wordpress (sidebar). Боковая панель использует область виджетов для отображения содержимого внутри них. Чтобы настроить боковую панель WordPress вы должны хорошо знать CSS.

Как работает сайдбар в WordPress

Откройте следующие файлы вашей темы:
  1. sidebar.php,
  2. style.css,
  3. functions.php.
В файле sidebar.php функция dynamic_sidebar( ‘sidebar-1’ ); отвечает за отображение сайдбара. Создание своей темы WordPress – Sidebar.php Теперь откройте functions.php и найдите функцию your_theme_name_widgets_init(), где your_theme – это название вашей темы. Создание своей темы WordPress – Sidebar.php В этой функции WordPress определяет всю область виджетов.

Функция register_sidebar()

Функция register_sidebar(), включает массив параметров, как вы можете видеть в приведенном выше скришоте. name => задает имя боковой панели. id => задает идентификатор боковой панели. description => описание виджета. before_widget и after_widget=> используется для обертывания каждого виджета в тег “section”. “before_title и after_title => используется для обертывания заголовка виджета внутри тега “h2”. Зайдем на наш сайт, в админ-панель Внешний вид-виджеты. Создание своей темы WordPress – Sidebar.php На скриншоте видно, что выделенная область это и есть наш зарегистрированный сайдбар, в который можно помещать сколько угодно виджетов.

Создание пользовательской боковой панели wordpress

Так же, как мы можем зарегистрировать сколько угодно виджетов в сайдбаре, мы можем регистрировать сколько угодно областей виджетов в functions.php, для этого нужно просто скопировать функцию register_sidebar(), задать в массиве уникальное имя, id, если нужно поменяем тэги и зададим им классы согласно нашей верстке. Создание своей темы WordPress – Sidebar.php Давайте создадим сайдбар под названием “Подвал” с Id “footer-first”. Сохраним изменения и зайдем в Виджеты на нашем сайте. Должен появиться новый сайдбар под названием «подвал». Можно переместить в него любой виджет из набора слева. Создание своей темы WordPress – Sidebar.php

Как вывести сайдбар

Чтобы вывести сайдбар на странице используют функцию get_sidebar(). Если открыть, например index.php, мы увидим эту функцию в конце файла перед вызовом footer (об этом немного позже). Чтобы вызвать наш сайдбар под названием «Подвал» на этой или любой другой странице или в подвале(footer) или в шапке (header) нужно открыть нужный файл и вставить в него следующий код:
   <?php if ( is_active_sidebar( ‘footer-first’ ) ) : dynamic_sidebar( ‘footer-first’); endif; ?>
Где ‘footer-first‘ – id вашего сайдбара. Зайдем в админ-панель и добавим в наш сайдбар виджеты, например календарь и произвольный текст. Создание своей темы WordPress – Sidebar.php В index.php вызовем сайдбар с id “footer-first” и проверим нашу главную страницу. Создание своей темы WordPress – Sidebar.php Создание своей темы WordPress – Sidebar.php Как видим все получилось и виджеты появились на странице там, где мы их вставили. При желании их можно стилизовать с помощью css.