Сайдбар в 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' );

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

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

Как добавить sidebar в wordpress тему

Принцип добавления сайдбаров

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

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

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

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

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

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

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

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

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

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

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

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