В предыдущей статье мы рассмотрели, как создать пользовательский заголовок (header), сегодня мы будем создавать пользовательскую боковую панель wordpress (sidebar). Боковая панель использует область виджетов для отображения содержимого внутри них.
Чтобы настроить боковую панель WordPress вы должны хорошо знать CSS.
Как работает сайдбар в WordPress
Откройте следующие файлы вашей темы:
- sidebar.php,
- style.css,
- functions.php.
В файле sidebar.php функция dynamic_sidebar( ‘sidebar-1’ ); отвечает за отображение сайдбара.
Теперь откройте functions.php и найдите функцию your_theme_name_widgets_init(), где your_theme – это название вашей темы.
В этой функции WordPress определяет всю область виджетов.
Функция register_sidebar()
Функция register_sidebar(), включает массив параметров, как вы можете видеть в приведенном выше скришоте.
name => задает имя боковой панели.
id => задает идентификатор боковой панели.
description => описание виджета.
before_widget и after_widget=> используется для обертывания каждого виджета в тег «section».
«before_title и after_title => используется для обертывания заголовка виджета внутри тега «h2».
Зайдем на наш сайт, в админ-панель Внешний вид-виджеты.
На скриншоте видно, что выделенная область это и есть наш зарегистрированный сайдбар, в который можно помещать сколько угодно виджетов.
Создание пользовательской боковой панели wordpress
Так же, как мы можем зарегистрировать сколько угодно виджетов в сайдбаре, мы можем регистрировать сколько угодно областей виджетов в functions.php, для этого нужно просто скопировать функцию register_sidebar(), задать в массиве уникальное имя, id, если нужно поменяем тэги и зададим им классы согласно нашей верстке.
Давайте создадим сайдбар под названием «Подвал» с Id “footer-first”. Сохраним изменения и зайдем в Виджеты на нашем сайте. Должен появиться новый сайдбар под названием «подвал». Можно переместить в него любой виджет из набора слева.
Как вывести сайдбар
Чтобы вывести сайдбар на странице используют функцию get_sidebar().
Если открыть, например index.php, мы увидим эту функцию в конце файла перед вызовом footer (об этом немного позже).
Чтобы вызвать наш сайдбар под названием «Подвал» на этой или любой другой странице или в подвале(footer) или в шапке (header) нужно открыть нужный файл и вставить в него следующий код:
<?php if ( is_active_sidebar( 'footer-first' ) ) : dynamic_sidebar( 'footer-first'); endif; ?>
Где ‘footer-first‘ – id вашего сайдбара.
Зайдем в админ-панель и добавим в наш сайдбар виджеты, например календарь и произвольный текст.
В index.php вызовем сайдбар с id “footer-first” и проверим нашу главную страницу.
Как видим все получилось и виджеты появились на странице там, где мы их вставили. При желании их можно стилизовать с помощью css.