Сайдбары WordPress
24.06.2018
Слово «сайдбар» произошло от английского термина «sidebar», что переводится как боковая область.
Изначально темы WordPress содержали одну или две колонки (правая и левая область рядом с контентом) и это было тем местом, где располагались виджеты.
В настоящий момент темы могут поддерживать широкий спектр разных сайдбаров WordPress (в футере, в заголоке, после содержимого), но по прежнему все области для виджетов называются сайдбарами. Желательно, чтобы вся дополнительная информация в теме располагалась в сайдбарах, максимально виджетизированная тема проще в настройке и управлении.
Рекомендуется, чтобы весь дополнительный код, размещаемый в сайдбарах, отображался только если они пустые. При добавлении виджета в сайдбар содержимое по умолчанию должно исчезать, это дает пользователю возможность настраивать тему без редактирования шаблона.
Виджеты
Виджеты — это такие программки, с помощью которых можно заполнять сайдбары информацией, добавляя в определенное место шаблона новости, баннеры, меню для навигации, видео и другую информацию. Ядро WordPress поддерживает 12 стандартных виджетов.
Кроме того, тема может дополнять этот набор своими уникальными виджетами. Виджеты позволяют расширять дизайн темы и добавлять всю необходимую функциональность на сайт.
Дополнительные виджеты можно установить с помощью плагинов. Например, популярный плагин Jetpack включает несколько дополнительных виджетов (галерея WordPress, слайдер, форма подписки на блог, контактная информация, виджет твиттера и facebook и еще несколько других), эти виджеты становятся доступны среди прочих после установки этого плагина и активации модуля «дополнительные виджеты».
Виджеты можно добавить в сайдбар при помощи drag-and-drop метода, перетаскивая мышкой из общего списка в нужное место.
Управление виджетами
Доступ ко всем сайдбарам и виджетам можно получить в двух местах в админке wp. Старую панель для настройки сайдбаров можно открыть через меню «Внешний вид » Виджеты» из консоли. Здесь слева расположены все доступные виджеты, а справа — все сайдбары, которые поддерживает тема. Чтобы добавить виджет на сайт, необходимо нажать на него мышкой и перетащить в нужное место в правой области.
Чтобы удалить виджет достаточно перетащить его на пустое место и он отправится на вкладку «неактивные виджеты». Неактивные виджеты не отображаются на сайте, но в последствии их можно вернуть обратно. Стоит отметить, что после добавления виджета в сайдбар через эту панель, он сразу же прописывает свои параметры в буза дынных и становится виден на сайте, никаких дополнительных нажатий на кнопку «Сохранить» он не ждет.
Панель виджетов
Новая панель для управления сайдбарами находится в Настройщике тем. Открыть ее можно из верхнего меню, через пункт «Виджеты» (или открыть Customizer через меню Настроить и перейти в панель Виджеты). В настоящий момент с этими панелями есть некоторая путаница, т.к. два меню с одним названием ведут в разные места.
Эта панель отличается по своему поведение от предыдущей. Во-первых, все изменения видно в реальном времени в правом фрэйме без сохранения на сайте, во-вторых, в панели «виджеты» видно не все сайдабары, а лишь активные на текущей странице, изменения выводятся динамически при навигации по сайту во фрэйме.
Таким образом, чтобы настраивать виджеты на страницах с разными сайдбарами нужно открывать нужную страницу во фрейме. Некоторые темы могут создавать различные сайдбары на разных типах страниц (к примеру, будет вполне логично иметь уникальные сайдбары на главной, для магазин, блога и портфолио).
Панель выглядит следующим образом (слева меню с виджетами, справа превью сайта):
Сайдбары в настройщике
При нажатии на кнопку «Добавить видежет» появляется список всех доступных виджетов:
Панель с виджетами
Неактивные виджеты
После установки новой темы все виджеты перемещаются на вкладку «Неактивные виджеты», благодаря этому при смене тем содержимое, которое хранится в текстовом виджете или виджетизированных плагинах, не теряется.
Все сброшенные виджеты можно добавить снова в сайдбары в новой теме из этой вкладки. Все виджеты, которая создает тема, теряются, поэтому не рекомендуется хранить много информации в таких местах.
Как добавить сайдбар
Для начала его нужно объявить в файле functions.php, это выглядит следующим образом:
function theme_widgets_init() {
register_sidebar( array(
‘name’ => __( ‘Наименование’),
‘id’ => ‘my-sidebar’,
‘before_widget’ => ‘<aside id=»%1$s» class=»widget %2$s»>’,
‘after_widget’ => «</aside>»,
‘before_title’ => ‘<h2 class=»widget-title»>’,
‘after_title’ => ‘</h2>’,
) );
}
add_action( ‘widgets_init’, ‘theme_widgets_init’ );
При объявлении необходимо указать уникальный id для сайдбара, по которому он будет в дальнейшем идентифицироваться, название (отображается в панелях настроек). Кроме того, можно задавать html теги, в которые «оборачивается» каждый виджет и его заголовок.
Теперь, чтобы вывести сайдбар WordPress в том или ином месте темы, необходимо в шаблон прописать следующий код:
<?php dynamic_sidebar( ‘my-sidebar’ ); ?>
Чтобы вывод сайдбара происходил только при наличии в нем виджетов, добавим проверку:
<?php if ( is_active_sidebar( ‘my-sidebar’ ) ) :
dynamic_sidebar( ‘my-sidebar’ );
php endif; ?>
Как удалить сайдбар
Чтобы удалить сайдбар из темы полностью, необходимо найти тот шаблон, где он объявляется и удалить строки, отвечающие за его отображение, т.е. нам нужно удалить вот эту строку для сайдбара с id my-sidebar:
<?php dynamic_sidebar( ‘my-sidebar’ ); ?>
Другой способ отключить сайдбар на сайте может сработать для некоторый тем: для начала попробуйте попросту удалить все виджеты из этого сайдбара, вполне вероятно, что он полностью исчезнет с сайта после этого.
Примечание: редактировать файлы темы рекомендуется с помощью дочерних тем, а не напрямую.
Как настроить css для виджета
У любого виджета задан css класс, с помощью которого настраивается внешний вид виджета. Для меню навигации можно прописать произвольный css через класс .widget_nav_menu (через этот виджет можно отображать любое меню в сайдбаре на нужных страницах), для поиска через класс .widget_search, для облака тегов с помощью класса widget_tag_cloud (и так далее):
.widget_search {
}
.widget_nav_menu {
}
.widget_tag_cloud {
}
Видимость виджетов
Видимостью виджетов можно управлять при помощи соответствующего модуля из популярного плагина Jetpack. После активации этого модуля внизу формы каждого виджета появиться дополнительный параметр — Видимость.
Из этого меню можно выбрать те страницы, записи, категории, таксономии, метки, на которых будет отображаться или скрываться виджет. Это один из способов, при помощи которого можно настраивать разные страницы сайта.
