Частина 1. Спеціальний сайдбар для тем WordPress
Сайдбар – це панель, де розташовуються візуально відокремлені від інших елементи сайту. Сайдбар дозволяє утримати користувача на сайті, надавши йому додатковий перелік рубрик та матеріалів на які той може перейти.
Що можна розмістити в сайдбарі:
- меню;
- підписку на розсилку;
- перелік категорій;
- список популярних статей;
- останні статті та коментарі до них;
- посилання на профілі соціальних мереж власників сайту;
- кошик або форму замовлення послуг.
Великий перелік можливих варіантів використання робить сайдбар важливим інструментом. Тому він часто зустрічається практично на всіх типах сайтів.
В системі WordPress сайдбари називаються «колонки», а інформаційні блоки в них – «віджети». За замовчуванням в WordPress виводить один сайдбар для всіх сторінок або один сайдбар для одного шаблону сторінки, за умови, що програміст передбачив це в темі.
Часто на сайті може бути більше одного типу контенту. Для того, щоб запропонувати користувачам додаткові матеріали схожої тематики з’являється необхідність в окремому призначеному для користувача сайдбарі.
Сайт університету – це одним із прикладів використання спеціально призначених для користувача сайдбарів. Основна аудиторія такого сайту складається з абітурієнтів і студентів. Для кожної з груп користувачів є свій розділ в якому розміщується специфічна інформація. Так в розділі «Абітуріетн» можна розмітити популярні спеціальності або факультети. А в розділі «Студенту» інформацію про стипендії, розклад занять, новини пов’язані зі студентськими проектами та інше.
Спеціальний сайдбар в WordPress тем
Додати користувальницький сайдбар в WordPress можна кількома способами, це:
- встановити плагін з каталогу WordPress (Easy Custom Sidebars, Content Aware Sidebars, Widget Options);
- використовувати тему, яка підтримує призначені для користувача сайдбарі;
- створити нову тему або розширити функціонал існуючої створивши дочірню.
Кожен із способів має свої плюси і мінуси. Що доцільніше використовувати сказати складно. Це визначається для кожного проекту індивідуально. У статті йдеться про третій спосіб, а саме додавання в нову або дочірню тему. Цей спосіб стане в нагоді розробникам сайтів і просунутим адміністраторам, які хочуть використовувати таку функцію в своїх сайтах та темах.
Опис принципу реалізація спеціальних сайдбарів
Сайдбарі реєструється в 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. Додавання додаткових полів при редагуванні постійних сторінок і категорій.