Добавляем сайдбар в WordPress – урок 18
Для начала скажу, что сайдбар определяет где будут выводиться виджеты и чтобы у вас в шаблоне была возможность выводить виджеты вам будет необходимо включить поддержку сайдбаров.
Для включения заходим в файл functions.php и добавляем туда код.
// Регистрируем сайдбар
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 — заголовок сайдбара;
- description — описание назначения сайдбара;
- class — класс который можно добавить для стилизации сайдбара;
- before_title — текст или теги которые должны вставляться до заголовка;
- after_widget — текст или теги которые должны вставляться после заголовка;
- before_widget — текст или теги до виджета;
- after_widget — текст или теги после виджета.
before_widget и after_widget — используют для создания обвертки виджета.
После добавления кода в панели администратора появится пункт Виджеты (Widgets).

Посмотрим на сам сайдбар и разберем по пунктам, что на нем есть:

- ‘name‘ => __( ‘Сайдбар’, ‘striped’ ) — заголовок сайдбара;
- ‘description‘ => __( ‘Левая колонка’, ‘striped’ ) — описание сайдбара;
Перетянем в наш сайдбар виджет:

Пока в нашем сайдбаре не будет отображаться активный виджет, с ним можно работать только в панели администратора. Чтобы виджет отображался необходимо добавить специальный код в шаблоне sidebar-left.php.
Добавляем код вверху шаблона sidebar-left.php.
<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 изменим код на вот такой:
// Регистрируем сайдбар
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 изменим код на вот такой:
<section>
<?php if ( !dynamic_sidebar( 'sidebar-left' ) ) { ?>
<div>Нет виджетов</div>
<?php } ?>
</section>Теперь рассмотрим, как полностью скрывать сайдбар и выводить только если в нем есть виджеты.
В файле functions.php
// Регистрируем сайдбар
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
<?php dynamic_sidebar( 'sidebar-left' ) ?>
На сегодня все, далее вам самостоятельная работа. Вам необходимо вывести сайдбар справа, если не получится вы можете скачать мои исходные файлы и подсмотреть, как это сделал я.
/*

- Базовый курс по веб-дизайну;
- Верстка сайтов;
- Общий курс по CMS WordPress и продолжение курса по разработке шаблонов;
- Разработка сайтов на PHP.





Very nice post, I surely love this site, keep it up.
Thank you, I will try to do everything in my power.