Сайдбары в WordPress

156 комментариев

Хотите больше практики? Рекомендую тогда посмотреть мой видеоурок по сайдбарам.

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

  • Сайдбар — это область сайта слева или справа от основного контента (одним словом боковая колонка),
  • Сайдбар в WordPress — это любая область на сайте, в которой выводятся виджеты;

В обоих случаях предназначение у сайдбаров одинаковое — навигация по сайту, ссылки на социальные сети, виджеты соц сетей, виджеты каких-либо сторонних сервисов (например поиск авиабилетов) и т.д.

Единственное отличие определения сайдбара в WordPress это то, что он может находится где угодно на странице сайта (но чаще всего это боковые колонки справа и слева от контента и футер).

В этом шагу мы рассмотрим пошагово как создать два сайдбара — один в боковой колонке и один в подвале (футере) сайта.

Шаг 1. Регистрация сайдбара

Для начала скажу, что в разных темах WordPress сайдбары регистрируются по-разному, в некоторых ещё до сих пор используется способ 2007-го года. Почему? Да просто некоторые липовые разработчики любят неосознанно копировать код из других тем, их даже не волнует, что тема, которую они используют в качестве своего «на все случаи» шаблона, не обновлялась более 5 лет.

Это я к тому, что код, который я дам вам сегодня может отличаться от кода, используемого в вашей теме — пусть это не станет поводом для волнений, просто замените старый код на новый.

Как я уже говорил, мы будем создавать два сайдбара — в боковой колонке и в футере, в этом нам поможет функция register_sidebar() (если что-то будет непонятно в коде — смотрите документацию функции). Хук widgets_init обязателен!

Код для файла functions.php:

function true_register_wp_sidebars() {
 
	/* В боковой колонке - первый сайдбар */
	register_sidebar(
		array(
			'id' => 'true_side', // уникальный id
			'name' => 'Боковая колонка', // название сайдбара
			'description' => 'Перетащите сюда виджеты, чтобы добавить их в сайдбар.', // описание
			'before_widget' => '<div id="%1$s" class="side widget %2$s">', // по умолчанию виджеты выводятся <li>-списком
			'after_widget' => '</div>',
			'before_title' => '<h3 class="widget-title">', // по умолчанию заголовки виджетов в <h2>
			'after_title' => '</h3>'
		)
	);
 
	/* В подвале - второй сайдбар */
	register_sidebar(
		array(
			'id' => 'true_foot',
			'name' => 'Футер',
			'description' => 'Перетащите сюда виджеты, чтобы добавить их в футер.',
			'before_widget' => '<div id="%1$s" class="foot widget %2$s">',
			'after_widget' => '</div>',
			'before_title' => '<h3 class="widget-title">',
			'after_title' => '</h3>'
		)
	);
}
 
add_action( 'widgets_init', 'true_register_wp_sidebars' );

Вот что получилось у меня на странице Внешний вид > Виджеты:

Зарегистрированные сайдбары

Уже сейчас вы можете добавлять и настраивать виджеты в сайдбарах, теперь осталось только вывести их на сайте.

Шаг 2. Как отобразить сайдбары на страницах сайта?

Как и в случае из первого шага, в разных темах вы можете найти разный код, отвечающий за вывод сайдбаров на сайте. Я рассмотрю только один способ, который использую сам, с использованием функций is_active_sidebar() и dynamic_sidebar().

В двух словах о том, для чего нужны эти функции:

Давайте теперь выведем те два сайдбара, которые мы создавали в прошлом шаге. И начнем с боковой колонки:

<?php if ( is_active_sidebar( 'true_side' ) ) : ?>
 
	<div id="true-side" class="sidebar">
 
		<?php dynamic_sidebar( 'true_side' ); ?>
 
	</div>
 
<?php endif; ?>

Куда вставлять код? Ну где хотите вывести сайдбары, туда и вставляйте. Не уверены в какой файл? Ну, вообще это полностью зависит от вашей темы, но вероятнее всего, что код боковой колонки вставлять в sidebar.php, а код футера в footer.php. Возможно вам ещё пригодится документация функций get_sidebar() и get_footer().

Футер:

<?php if ( is_active_sidebar( 'true_foot' ) ) : ?>
 
	<div id="true-foot" class="sidebar">
 
		<?php dynamic_sidebar( 'true_foot' ); ?>
 
	</div>
 
<?php endif; ?>

Ещё несколько советов относительно сайдбаров

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

  • Если выводимый садбар не имеет виджетов, то при помощи if и else можно задать код, который будет выполняться в этом случае: 
    if ( is_active_sidebar( 'true_foot' ) ) :
	dynamic_sidebar( 'true_foot' );
else :
	// код по умолчанию на случай, если сайдбар пустой
endif;
  • Не нужно использовать PHP-функцию function_exists() для функции dynamic_sidebar() и других функций WordPress. Просто иногда используют. Это ни к чему.
  • Некоторые подключают файл sidebar.php через include() или require(). Чего вы хотите этим добиться? Увеличения производительности? Сомневаюсь, что причина медленной загрузки вашего сайта кроется именно в этом. А для подключения sidebar.php используем специально предназначенную для этого функцию get_sidebar().
  • Функции register_sidebar() и register_sidebars() позволяют не указывать ID сайдбаров при регистрации. Всегда указывайте ID! Во-первых, вам будет удобнее и нагляднее работать с сайдбарами на вашем сайте. Во-вторых, это поможет избежать проблем при установке сторонних плагинов / тем.

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

Как отключить сайдбар в WordPress?

Могу предложить вам пару вариантов решения этой задачи:

  • Вручную — удаляем функции register_sidebar() и dynamic_sidebar() из файлов functions.php и sidebar.php. Этот способ самый действенный. Если же вы не хотите, чтобы после обновления темы все ваши изменения исчезли, используйте дочерние темы.
  • Функция unregister_sidebar() позволяет отключить сайдбар (но нужно знать его ID, да и код из sidebar.php всё равно придется удалять вручную).

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.

Комментарии — 156

Чтобы оставить комментарий, пожалуйста, зарегистрируйтесь или войдите.

Миша Рудрастых и WordPress

Полезности из мира WordPress и жизни студии.

Мой телеграм-канал