Сайдбар в 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 мы зарегистрировали сразу два сайдбара боковых — правый, левый и отдельно сайдбар для футера. Также вы можете регистрировать только один сайдбар или добавить еще по необходимости, к примеру в средину страницы.
Сайдбар зарегистрирован, теперь нужно его вывести в нужном месте. Именно этим мы и займемся далее.
Принцип добавления сайдбаров
Если вы пишите тему для своего сайта, и регистрировали сайдбар для виджетов 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()).
Это муторная работа, и для не знающих может быть проблемой, но если вам это действительно нужно, тогда разберетесь.
Здравствуйте. Помогите! Мне тема не дает делать боковые сайдбары на главной странице и вообще на страницах, разрешает только нижние сайдбары, а вот в рубриках и записях разрешает их ставить где угодно. Что можно сделать с кодом? и еще хотелось бы чтобы сайдбар можно было установить после шапки сайта. Спасибо.
Хорошо написано, толково, прочитал на одном дыхании, попробую установить сайдбар. У меня этот вопрос как у Александра.
Очень просто и понятно. Спасибо!