Добавляем сайдбар в WordPress – урок 18

- Николаенко Максим · Опубликовано 5 января, 2015 · Обновлено 7 августа, 2018

Для начала скажу, что сайдбар определяет где будут выводиться виджеты и чтобы у вас в шаблоне была возможность выводить виджеты вам будет необходимо включить поддержку сайдбаров.

Для включения заходим в файл 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' );

// Регистрируем сайдбар

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).

wordpress create sidebar widgets курсы по wordpress

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

Создание нового сайдбара для левой колонки

‘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>

<?php if ( is_active_sidebar( 'sidebar-left' ) ) : ?>

<?php dynamic_sidebar( 'sidebar-left' ); ?>

</div>

<?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' );

// Регистрируем сайдбар

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>',

);

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>

<?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' );

// Регистрируем сайдбар

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>',

);

register_sidebar( $args );

}

// Хук для функции 'widgets_init'

add_action( 'widgets_init', 'start_sidebar' );

В файле sidebar-left.php

<?php  dynamic_sidebar( 'sidebar-left' )  ?>

1	<?php dynamic_sidebar( 'sidebar-left' ) ?>

На сегодня все, далее вам самостоятельная работа. Вам необходимо вывести сайдбар справа, если не получится вы можете скачать мои исходные файлы и подсмотреть, как это сделал я.

Услуги репетитора онлайн. Список курсов которые я веду

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

Подробнее читайте на странице репетитор по WordPress

Метки: wordpress добавить сайдбар wordpress сайты уроки wordpress уроки по созданию сайта как добавить сайдбар в тему wordpress Сайдбар в Wordpress уроки wordpress для начинающих

Николаенко Максим

Директор веб-студии ProGrafika. Занимаюсь разработкой, дизайном и продвижением веб-сайтов. Всегда рад новым читателям блога и хорошим клиентам.

John Deere:

7 января, 2016 в 3:26 дп

Very nice post, I surely love this site, keep it up.

Ответить
- Николаенко Максим:
  
  9 января, 2016 в 10:16 пп
  
  Thank you, I will try to do everything in my power.
  
  Ответить