Шаблон WordPress своими руками. Урок 8. Работа с сайдбаром

Мы уже прошли ряд уроков по созданию шаблона для 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().

Заключение

Работа с сайдбаром достаточно сложная и запутанная, но разобраться в ней возможно. Нужно несколько раз попробовать, регистрируя и вывод элементы по одному или сразу несколько. Постепенно этот аспект создания собственного шаблона своими руками станет простым и перестанет вызывать трудности. Завершив сегодняшний урок, мы можем сказать, что теперь можно сформировать шапку сайта и боковую панель, а это уже значительная часть темы.