Мы уже прошли ряд уроков по созданию шаблона для 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’ );
Таким образом мы прописали в файле генерацию сразу нескольких сайдбаров. Отдельно мы сформировали правый и левый сайдбары и еще один, находящийся в подвале сайта. При желании, вы можете использовать только один из них, либо же наоборот, разместить дополнительный в центре страницы.
Сайдбар создан, однако, мы не вывели его на сайт в нужном месте, поэтому переходим к следующему шагу. Одной регистрации в системе определенно недостаточно.
Внедрение в тему
Принцип добавления данного элемента достаточно прост. Генерируя его для собственного шаблона, чтобы выводить те или иные данные, вам будет достаточно использовать следующий фрагмент кода:
<div class=”sidebar”> <?php dynamic_sidebar( ‘right-side’ ); ?> </div>
Если же речь идет о создание темы на заказ, то придется дополнительно проверить наличие отдельных виджетов. Есть вероятность, что заказчик не будет пользоваться сайдбаром на сайте, а пустые блоки на страничке оставлять незачем. Для проверки задействованы ли виджеты и последующего внедрения сайдбара прописываем следующий код:
<?php if ( is_active_sidebar( ‘right-side’ ) ) : ?>
<div class=”sidebar”>
<?php dynamic_sidebar( ‘right-side’ ); ?>
</div>
<?php endif; ?>
В нем мы проверили условие существования виджетов в сайдбаре, а затем осуществили вывод на экран. Меняя id элемента можно размещать на странице и другие аналогичные блоки.
Файлы
Для подобных элементов сайта в WordPress предусмотрен один из стандартных файлов sidebar.php. Он будет содержать в себе всю необходимую информацию:
- условия вывода;
- внешнюю составляющую панелей и другое.
Когда в шаблоне предусмотрен только один сайдбар, просто вставляем его код в файл и подключаем через index.php. Для этого в последнем документе прописываем:
<?php get_sidebar(); ?>
Если же вы планируете генерировать сразу несколько сайдбаров, то потребуется столько же файлов с уникальными названиями, например, sidebar-footer.php для элемента, расположенного в подвале сайта.
При использовании ряда сайдбаров, подключение к индексному файлу можно осуществить следующим фрагментом кода:
<?php get_header(); ?>
<?php get_sidebar(‘left’); ?>
<?php get_sidebar(‘right’); ?>
<?php get_sidebar(‘footer’); ?>
<?php get_footer(); ?>
Расположение документов можно выбирать любое. Главное, чтобы значение в скобках соответствовало названию: «footer» для sidebar-footer.php и подобным образом для других файлов.
Удаление
В нашем уроке мы подробно разобрали, как добавить сайдбар в WordPress. Но если нам нужно сделать обратное? Удалить элемент можно простым рядом действий, который мы сейчас разберем.
Перед тем, как удалять какие-либо файлы шаблона обязательно создавайте их копии! Выполнять все действия лучше через FTP-сервер. Делать подобные манипуляции из административной панели не рекомендуется.
Сначала находим functions.php и среди его функций вызов сайдбара и удаляем эту строку. Как она выглядит, мы уже определили выше в статье.
Чтобы приступить к работе, нам потребуется открыть папку с нашим шаблоном и найти документы, которые мы уже упоминали ранее в нашем уроке. Если до этого мы прописывали в них фрагменты кода, то теперь нужно будет от них избавляться.
Следующим файлом для работы будет sidebar.php. В нем потребуется избавиться от вывода боковой колонки. Обычно, это элементы, связанные с фразой «dynamic_sidebar()».
В конечном итоге в индексном файле стираем строку с подключением всех докумендов сайдбара, они содержат фрагмент get_sidebar().
Заключение
Работа с сайдбаром достаточно сложная и запутанная, но разобраться в ней возможно. Нужно несколько раз попробовать, регистрируя и вывод элементы по одному или сразу несколько. Постепенно этот аспект создания собственного шаблона своими руками станет простым и перестанет вызывать трудности. Завершив сегодняшний урок, мы можем сказать, что теперь можно сформировать шапку сайта и боковую панель, а это уже значительная часть темы.
