Часть 1. Пользовательский сайдбар для WordPress темы
Сайдбар – это панель, где располагаются визуально отделенные от остальных элементы сайта. Сайдбар позволяет удержать пользователя на сайте, предоставив ему дополнительный перечень рубрик и материалов на которые тот может перейти.
Что можно разместить в сайдбаре:
- меню
- подписку на рассылку
- перечень категорий
- список популярных статей
- последние статьи и комментарии к ним
- ссылки на профили социальных сетей владельцев сайта
- корзину или форму заказа услуг.
Большой перечень возможных вариантов использования делает сайдбар важным инструментом. Поэтому он часто встречается практически на всех типах сайтов.
В системе WordPress сайдбары называют «Колонками», а информационные блоки в них – «Виджетами». По умолчанию в WordPress выводит один сайдбар для всех страниц либо один сайдбар для одного шаблона страницы, но при условии, что программист предусмотрел это в теме.
Часто на сайте может быть больше одного типа контента. Для того, чтобы предложить пользователям дополнительные материалы схожей тематики появляется необходимость в отдельном пользовательском сайдбаре.
Сайт университета – это одним из примеров использования настраиваемых пользовательских сайдбаров. Основная аудитория такого сайта состоит из абитуриентов и студентов. Для каждой из групп пользователей есть свой раздел в котором размещается специфическая информация. Так в разделе «Абитуриетн» можно разметить популярные специальности или факультеты. А в разделе «Студенту» информацию о стипендии, расписание занятий, новости связанные со студенческими проектами и прочее.
Пользовательский сайдбар в WordPress теме
Добавить пользовательский сайдбар в WordPress можно несколькими способами, это:
- установить плагин из каталога WordPress (Easy Custom Sidebars, Content Aware Sidebars, Widget Options);
- использовать тему, которая поддерживает пользовательские сайдбары;
- создать новую тему или расширить функционал существующей создав дочернюю, которая поддерживает добавление пользовательских сайдбаров.
Каждый из способов имеет свои плюсы и минусы. Что целесообразней использовать сказать сложно, т. к. это определяется для каждого проекта индивидуально. В статье описан третий способ, т. е. добавление в новую или дочернюю тему. Этот способ пригодится разработчиком сайтов и продвинутым администраторам, которые хотят использовать такую функцию на своих сайтах и темах.
Описание принципа реализация пользовательских колонок в WordPress теме
Сайдбары регистрируется в WordPress теме во время событию widgets_init с помощью функции register_sidebar.
Функция register_sidebar() регистрирует сайдбар для виждетов и формат вывода для каждого виджета: html тег заголовка, html тег до и после виджета. Зарегистрировав сайдбар, в админ-панели появится место, куда можно помещать виджеты. Разместив виджеты на сайдбаре, их можно в дальнейшем вывести в шаблоне с помощью функции dynamic_sidebar.
add_action( 'widgets_init', 'resume_register_sidebars' );
function resume_register_sidebars(){
register_sidebar( array(
'name' => __( 'Сайдбар подвала', TEXTDOMAIN ),
'id' => 'column',
'description' => '',
'class' => '',
'before_widget' => '<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"><div id="%1$s" class="widget %2$s">',
'after_widget' => '</div></div>',
'before_title' => '<h3 class="widget__title title">',
'after_title' => '</h3>',
) );
}По образцу и с этими же настройками зарегистрируем в цикле новые сайдбары. Информация о дополнительных колонках храниться в настройках темы. Это ассоциативный массив состоящий из:
- имени сайдбара
- внутреннего идентификатора
- описания
- дополнительного класса
Изменим функцию регистрации соответствующим образом.
function resume_register_sidebars() {
// получаем массив с пользовательскими сайдбарами из настроек темы и добавляем из к уже имеющимся
$columns = array_merge( [ [
'name' => __( 'Колонка', TEXTDOMAIN ),
'id' => 'column',
'description' => '',
'class' => '',
] ], get_theme_mod( 'register_columns', [] ) );
// проходим по полученному массив циклом
foreach ( $columns as $column ) {
// регистрируем новые сайдбары
register_sidebar( array(
'name' => $column[ 'name' ],
'id' => $column[ 'id' ],
'description' => $column[ 'description' ],
'class' => $column[ 'class' ],
'before_widget' => '<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"><div id="%1$s" class="widget %2$s">',
'after_widget' => '</div></div>',
'before_title' => '<h3 class="widget__title title">',
'after_title' => '</h3>',
) );
}
}
add_action( 'widgets_init', 'resume_register_sidebars' );Выбор сайдбара в публичной части сайта
Просто зарегистрировать дополнительные пользовательские сайдбары недостаточно. Следующим шагом будет “подмена” стандартной колонки на пользовательскую в публичной части сайта. Для этого воспользуемся хуками wp и sidebars_widgets. Последний позволяет изменять список сайдбаров и виджетов в них.
function resume_replace_default_column() {
$custom_columns = '';
// определяем какой шаблон темы сейчас будет генерироваться
if ( is_singular( 'page' ) ) {
// если это постоянная страница, то информация об отдельной пользовательской колонке хранится в метаданных для страницы
$custom_columns = get_post_meta( get_the_ID(), '_custom_columns', true );
} elseif ( is_singular( 'post' ) ) {
// если просматривается пост, то информация о пользовательской колонке хранится в метаднных категории
// получим список категорий текущего поста
$categories = get_terms( [
'taxonomy' => 'category',
'object_ids' => get_the_ID(),
'fields' => 'ids',
'meta_key' => '_custom_columns',
] );
if ( is_array( $categories ) && ! empty( $categories ) ) {
// если пост в категории, то получим информацию о колонке
$custom_columns = get_term_meta( $categories[ 0 ], '_custom_columns', true );
}
} elseif ( is_category() ) {
// если просматривается страница категории, то информация хранится в метаданных категорий
$custom_columns = get_term_meta( get_queried_object()->term_id, '_custom_columns', true );
}
if ( ! empty( $custom_columns ) ) {
// если необходима замена колонки, то регистрируем хук
add_filter( 'sidebars_widgets', function( $sidebars ) use ( $custom_columns ) {
// если сайдбар с таким идентификатом существует, то произведём замену
if ( array_key_exists( $custom_columns, $sidebars ) ) {
$sidebars[ 'column' ] = $sidebars[ $custom_columns ];
}
return $sidebars;
}, 5, 1 );
}
}
add_action( 'wp', 'resume_replace_default_column' );Продолжение
- Часть 2. Создание страницы настроек для добавление списка пользовательских сайдбаров
- Часть 3. Добавление дополнительных полей при редактировании постоянных страниц и категорий.