Сайдбар в WordPress. Как добавить, убрать сайдбар в WordPress

Сайдбар в WordPress стал неотъемлемой частью сайта. Его использование открывает огромные возможности для разработчиков тем и пользователей платформы WordPress. На всевозможных блогах отводиться большое количество времени описанию добавления, удаления и настройкам сайдбара. В данном вопросе и мой блог не стал исключением, сегодня я постараюсь рассказать о как можно большем количестве настроек и всех возможных махинациях над боковой колонкой сайта на WordPress.

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

После небольшого отступления перейдем к нашим «баранам» и окунемся в суть работы с темами, а именно рассмотрим боковое меню WordPress.

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

Сайдбар сайта — правая или левая части сайта, отвечающая за донесение дополнительной информации и участвующая в навигации по сайту. Возможно использование и правой и левой боковой колонки одновременно.

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

Регистрация сайдбара в WordPress. Как добавить сайдбар в WordPress

Вывод сайдбара WordPress происходит по определенному принципу, при помощи вызова в файлах шаблона и регистрации в файле functions.php функцией register_sidebar().

Будьте внимательны, перед регистрацией сайдбара убедитесь что он ранее не был зарегистрирован. При наличии нескольких регистраций с одним и тем же id, возможно возникновение ошибок. Перед редактированием сторонних шаблонов, стоит убедиться что сайдбар не «завязан» к каким-то функционалом шаблона.

Первым делом откроем файл functions.php и напишем функцию регистрации сайдбара:

function my_register_sidebars() {
/* регистрация правого сайдбара */
register_sidebar(
array(
‘id’ => ‘right-side’, // уникальный id для сайта, назначается правому сайдбару
‘name’ => ‘Правая колонка’, // название сайдбара, которое будет отображаться в админке
‘description’ => ‘Перетяните виджеты, чтобы добавить их в сайдбар.’, // описание выводимое в админке для сайдбара
‘before_widget’ => ‘<div class=»r-sidebar»>’, // по умолчанию виджеты выводятся <li>-списком
‘after_widget’ => ‘</div>’, // в этой и предыдущей строке мы задали контейнер в котором будет размещен сайдбар
‘before_title’ => ‘<h3 class=»r-wtitle»>’, // если оставить пустым, будет выводиться в <h2>
‘after_title’ => ‘</h3>’
)
);

/* регистрация левого сайдбара */
register_sidebar(
array(
‘id’ => ‘left-side’, // уникальный id для сайта, назначается правому сайдбару
‘name’ => ‘Левая колонка’, // название сайдбара, которое будет отображаться в админке
‘description’ => ‘Перетяните виджеты, чтобы добавить их в сайдбар.’, // описание выводимое в админке для сайдбара
‘before_widget’ => ‘<div class=»l-sidebar»>’, // по умолчанию виджеты выводятся <li>-списком
‘after_widget’ => ‘</div>’, // в этой и предыдущей строке мы задали контейнер в котором будет размещен сайдбар
‘before_title’ => ‘<h3 class=»l-wtitle»>’, // если оставить пустым, будет выводиться в <h2>
‘after_title’ => ‘</h3>’
)
);
/* регистрация сайдбара для футера */
register_sidebar(
array(
‘id’ => ‘footer-side’, // уникальный id для сайта, назначается правому сайдбару
‘name’ => ‘Нижний сайдбар’, // название сайдбара, которое будет отображаться в админке
‘description’ => ‘Перетяните виджеты, чтобы добавить их в сайдбар.’, // описание выводимое в админке для сайдбара
‘before_widget’ => ‘<div class=»f-sidebar»>’, // по умолчанию виджеты выводятся <li>-списком
‘after_widget’ => ‘</div>’, // в этой и предыдущей строке мы задали контейнер в котором будет размещен сайдбар
‘before_title’ => ‘<h3 class=»f-wtitle»>’, // если оставить пустым, будет выводиться в <h2>
‘after_title’ => ‘</h3>’
)
);
}

add_action( ‘widgets_init’, ‘my_register_sidebars’ );

1234567891011121314151617181920212223242526272829303132333435363738394041

function my_register_sidebars() {/* регистрация правого сайдбара */ register_sidebar( array( ‘id’ => ‘right-side’, // уникальный id для сайта, назначается правому сайдбару ‘name’ => ‘Правая колонка’, // название сайдбара, которое будет отображаться в админке ‘description’ => ‘Перетяните виджеты, чтобы добавить их в сайдбар.’, // описание выводимое в админке для сайдбара ‘before_widget’ => ‘<div class=»r-sidebar»>’, // по умолчанию виджеты выводятся <li>-списком ‘after_widget’ => ‘</div>’, // в этой и предыдущей строке мы задали контейнер в котором будет размещен сайдбар ‘before_title’ => ‘<h3 class=»r-wtitle»>’, // если оставить пустым, будет выводиться в <h2> ‘after_title’ => ‘</h3>’ ) ); /* регистрация левого сайдбара */ register_sidebar( array( ‘id’ => ‘left-side’, // уникальный id для сайта, назначается правому сайдбару ‘name’ => ‘Левая колонка’, // название сайдбара, которое будет отображаться в админке ‘description’ => ‘Перетяните виджеты, чтобы добавить их в сайдбар.’, // описание выводимое в админке для сайдбара ‘before_widget’ => ‘<div class=»l-sidebar»>’, // по умолчанию виджеты выводятся <li>-списком ‘after_widget’ => ‘</div>’, // в этой и предыдущей строке мы задали контейнер в котором будет размещен сайдбар ‘before_title’ => ‘<h3 class=»l-wtitle»>’, // если оставить пустым, будет выводиться в <h2> ‘after_title’ => ‘</h3>’ ) );/* регистрация сайдбара для футера */ register_sidebar( array( ‘id’ => ‘footer-side’, // уникальный id для сайта, назначается правому сайдбару ‘name’ => ‘Нижний сайдбар’, // название сайдбара, которое будет отображаться в админке ‘description’ => ‘Перетяните виджеты, чтобы добавить их в сайдбар.’, // описание выводимое в админке для сайдбара ‘before_widget’ => ‘<div class=»f-sidebar»>’, // по умолчанию виджеты выводятся <li>-списком ‘after_widget’ => ‘</div>’, // в этой и предыдущей строке мы задали контейнер в котором будет размещен сайдбар ‘before_title’ => ‘<h3 class=»f-wtitle»>’, // если оставить пустым, будет выводиться в <h2> ‘after_title’ => ‘</h3>’ ) );} add_action( ‘widgets_init’, ‘my_register_sidebars’ );

Вставив этот код в файл functions.php мы зарегистрировали сразу два сайдбара боковых — правый, левый и отдельно сайдбар для футера. Также вы можете регистрировать только один сайдбар или добавить еще по необходимости, к примеру в средину страницы.

Сайдбар зарегистрирован, теперь нужно его вывести в нужном месте. Именно этим мы и займемся далее.

Как добавить sidebar в wordpress тему
Принцип добавления сайдбаров

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

<div class=»sidebar»>
<?php dynamic_sidebar( ‘right-side’ ); ?>
</div>

123

<div class=»sidebar»>     <?php dynamic_sidebar( ‘right-side’ ); ?></div>

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

<?php if ( is_active_sidebar( ‘right-side’ ) ) : ?>
<div class=»sidebar»>
<?php dynamic_sidebar( ‘right-side’ ); ?>
</div>
<?php endif; ?>

12345

<?php if ( is_active_sidebar( ‘right-side’ ) ) : ?>     <div class=»sidebar»>        <?php dynamic_sidebar( ‘right-side’ ); ?>     </div> <?php endif; ?>

Мы проверили существуют ли виджеты в правом сайдбаре и вывели их на странице. По аналогии, заменяя лишь значение ID сайдбара (right-side) на нужный нам, мы сможем вывести все блоки на страницу в необходимом месте.

Куда добавить код для вывода сайдбара в WordPress

Для сайдбаров в вордпресс зарезервирован файл шаблона sidebar.php. Именно в нем в большинстве случаев описывается все необходимое (обертки панелек, условия для вывода на определенных страницах и т.д.)

Если у вас один сайдбар, тогда добавляйте его код в sidebar.php, и подключайте его в нужном месте в файле index.php с помощью функции:

<?php get_sidebar(); ?>

1

<?php get_sidebar(); ?>

При использовании нескольких сайд баров вам нужно будет создавать дополнительные файлы к примеру sidebar-right.php, sidebar-left.php и sidebar-footer.php.

Поместив необходимый участок кода в нужный файл, подключение к индексному будет происходить следующим образом:

<?php get_header(); ?>
<?php get_sidebar(‘left’); ?>
<?php get_sidebar(‘right’); ?>
<?php get_sidebar(‘footer’); ?>
<?php get_footer(); ?>

12345

<?php get_header(); ?><?php get_sidebar(‘left’); ?><?php get_sidebar(‘right’); ?><?php get_sidebar(‘footer’); ?><?php get_footer(); ?>

Месторасположение подключения вы выбираете самостоятельно. Значение в скобках должно соответствовать названию файла (sidebar-right.php), выделено жирным.

Как убрать сайдбар в WordPress?

Я детально рассказал как добавить сайдбар в WordPress, теперь пойдем от обратного и начнем удалять. Составлю небольшой план как убрать сайдбар в WordPress (перед редактированием файлов обязательно сделайте их копии и пользуйтесь FTP, не редактируйте с админки):

• Заходим в папку с темой и открываем следующие файлы functions.php, sidebar.php и index.php;
• ищем и удаляем регистрацию сайдбара в файле функций, как он выглядит описано выше в статье.
• переходим к файлу sidebar.php и удаляем вызов боковой колонки (нужно удалить все что связано с dynamic_sidebar(), пример так же есть выше).
• идем в индексный файл и удаляем подключение файлов сайдбара (get_sidebar()).

Это муторная работа, и для не знающих может быть проблемой, но если вам это действительно нужно, тогда разберетесь.