Додаємо сайдбар у WordPress – урок 18
Для початку скажу, що сайдбар визначає де будуть виводитися віджети і щоб у вас у шаблоні була можливість виводити віджети вам необхідно включити підтримку сайдбарів.
Для включення заходимо у файл functions.php та додаємо туди код.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// Регистрируем сайдбар function start_sidebar() { $args = array( 'id' => 'sidebar-left', 'name' => __( 'Сайдбар', 'striped' ), 'description' => __( 'Левая колонка', 'striped' ), 'class' => 'striped-widget', 'before_title' => '<header><h2 class="widgettitle">', 'after_title' => '</h2></header>', 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', ); register_sidebar( $args ); } // Хук для функции 'widgets_init' add_action( 'widgets_init', 'start_sidebar' ); |
Розберемо усі атрибути, введені в змінну $args:
- id – унікальний ідентифікатор сайдбару, створюючи інші сайдбари, цей ідентифікатор не повинен повторюватися.;
- name – заголовок сайдбару;
- опис – опис призначення сайдбару;
- class – клас який можна додати для стилізації сайдбару;
- перед_заголовком – текст або теги, які повинні вставлятися до заголовка;
- after_widget – текст або теги, які повинні вставлятися після заголовка;
- before_widget – текст або теги до віджету;
- after_widget – текст або теги після віджету.
before_widget і after_widget – використовують для створення обгортки віджету.
Після додавання коду в панелі адміністратора з'явиться Віджети (Віджети).
Подивимося на сам сайдбар та розберемо по пунктах, що на ньому є:
- ‘name‘ => __( «Бічна панель», «смугастий’ ) – заголовок сайдбару;
- ‘опис‘ => __( 'Ліва колонка', «смугастий’ ) – опис сайдбару;
Перетягнемо в наш сайдбар віджет:
Поки в нашому сайдбарі не відображатиметься активний віджет, з ним можна працювати лише на панелі адміністратора. Щоб віджет відображався, необхідно додати спеціальний код у шаблоні sidebar-left.php.
Додаємо код зверху шаблону sidebar-left.php.
|
1 2 3 4 5 6 7 |
<section> <?php if ( is_active_sidebar( 'sidebar-left' ) ) : ?> <div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary"> <?php dynamic_sidebar( 'sidebar-left' ); ?> </div><!-- #primary-sidebar --> <?php endif; ?> </section> |
Після додавання коду у вас на сайті має з'явитися віджет.
Якщо ми зараз приберемо віджет категорій та залишимо сайдбар порожнім, то на місці виведеного раніше віджету нічого не відобразиться крім обгортки сайдбару.
Цей момент можна виправити, трохи видозмінивши код виведення віджету.
У файлі functions.php змінимо код на такий:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// Регистрируем сайдбар function start_sidebar() { $args = array( 'id' => 'sidebar-left', 'name' => __( 'Сайдбар', 'striped' ), 'description' => __( 'Левая колонка', 'striped' ), 'class' => 'striped-widget', 'before_title' => '<header><h2 class="widgettitle">', 'after_title' => '</h2></header>', 'before_widget' => '<div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary"><div id="%1$s" class="widget %2$s">', 'after_widget' => '</div></div><!-- #sidebar-left -->', ); register_sidebar( $args ); } // Хук для функции 'widgets_init' add_action( 'widgets_init', 'start_sidebar' ); |
У файлі sidebar-left.php змінимо код на такий:
|
1 2 3 4 5 |
<section> <?php if ( !dynamic_sidebar( 'sidebar-left' ) ) { ?> <div>Нет виджетов</div> <?php } ?> </section> |
Тепер розглянемо, як повністю приховувати сайдбар і виводити тільки якщо в ньому є віджети.
У файлі functions.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// Регистрируем сайдбар function start_sidebar() { $args = array( 'id' => 'sidebar-left', 'name' => __( 'Сайдбар', 'striped' ), 'description' => __( 'Левая колонка', 'striped' ), 'class' => 'striped-widget', 'before_title' => '<header><h2 class="widgettitle">', 'after_title' => '</h2></header>', 'before_widget' => '<div id="%1$s" class="widget %2$s"><section><div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">', 'after_widget' => '</div></section><br /></div><!-- #sidebar-left -->', ); register_sidebar( $args ); } // Хук для функции 'widgets_init' add_action( 'widgets_init', 'start_sidebar' ); |
У файлі sidebar-left.php
|
1 |
<?php dynamic_sidebar( 'sidebar-left' ) ?> |
На сьогодні все, далі вам самостійна робота. Вам необхідно вивести сайдбар праворуч, якщо не вийде ви можете завантажити мої вихідні файли та піддивитися, як це зробив я.
- Базовий курс з веб-дизайну;
- Верстка сайтів;
- Загальний курс CMS WordPress та продовження курсу з розробки шаблонів;
- Розробка сайтів на PHP.
Дуже гарний пост, Я точно люблю цей сайт, так тримати.
Дякую, Я постараюся зробити все, що в моїх силах.