Создание адаптивного шаблона для wordpress. Часть 4

Всем привет, в прошлом уроке мы с вами научились выводить меню посредством wordpress и bootstrap navbar, а также вывели основной контент сайта (краткая запись). В данном уроке мы продолжим формировать структуру нашего шаблон для wordpress основанного на фреймворке Twitter Bootstrap.

Приступим к выводу сайдбара на wordpress. Сайдбар на вордпрессе можно выводить двумя способами, просто создав в корне файл sidebar.php и выводить его в нужном месте с помощью тега get_sidebar(). Или же выводить с помощью зарегистрированного сайдбара в системе присваивая ему имя. В последнем варианте, вы можете использовать несколько сайдбаров одновременно, управляя им через админку. Мы же будем использовать второй вариант, с внедрением в первый, в конце урока объясню почему.

1. Регистрация Sidebar

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


  function register_my_widgets(){
 register_sidebar( array(
 'name' => "Правая боковая панель сайта",
 'id' => 'right-sidebar',
 'description' => 'Эти виджеты будут показаны с правой колонке сайта',
 'before_widget' => '<li class="homepage-widget-block">',
 'after_widget' => '</li>',
 'before_title' => '<h1>',
 'after_title' => '</h1>'
 ) );
 }
 add_action( 'widgets_init', 'register_my_widgets' );

Давайте рассмотрим подробнее код, самая важная строчка

'id' => 'right-sidebar'

Данная строчка указывает идентификатор нашего будущего сайдбара, с помощью которого мы будем вызывать конкретный сайдбар.

'name' => "Правая боковая панель сайта"

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

Пример отображения сайдбара в админ панеле

Данные о сайдбаре можно посмотреть в пункте Внешний вид – Виджеты (файл functions.php.php должен быть уже отредактирован с регистрацией sidebar, иначе вы не увидите данное окошко)

Текст указанный красной строчкой указывается в строчке name которую мы рассматривали выше.

2. Вывод Sidebar в шаблон

На самом деле существует два варианта вывода, с помощью файла sidebar-name.php указав имя (идентификатор сайдбара), и с помощью функции dynamic_sidebar(‘name’);  Мы воспользуемся вторым методом.

Открываем файл sidebar.php и вставляем внутри тега <aside></aside> (html5 тег, необязательный) функцию вывода.

<?php dynamic_sidebar('right-sidebar'); ?>

В лапках right-sidebar, это идентификатор который мы указывали в первом пункте, при регистрации виджет панели.

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

3. Вставка виджетов в сайдбар

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

Как добавить виджет в сайдбар

В графу заголовок прописываем название блока, которое будет отображаться в сайдбаре сайта над блоком виджета. Как вы наверное заметили, на картинке после виджета я добавил Календарь. В сайдбар можно добавлять пару виджетов одновременно, для этого просто перетащите нужный виджет под или над уже  установленным виджетом. Последовательность виджетов на сайте будет такой же как и в админке.

Так как файл searchform.php у нас пустой, то вы не увидите строку поиска, редактированием вида нашего сайта мы займемся в последующих уроках. Чтобы убедится что виджет работает, удалите файл searchform.php

Хочу обратить ваше внимание, что это уроки по созданию структуры шаблона на twitter boostrap, поэтому особого дизайна в шаблоне не будет, постараюсь привести шаблон в эстетический вид. 

Ну вот и подошел наш очередной урок к концу, в следующем уроке мы создадим pagenavi на основе bootstrap pagination, распределим код по всем основным файлам, и понемногу приблизимся к адаптивному дизайну. Прошу прощения за то что длительное время не писал на сайт, обещаю исправиться :)



Хотите подобный функционал, верстку либо помощь в настройке вашего сайта?
Свяжитесь со мной

4 Комментария к “Создание адаптивного шаблона для wordpress. Часть 4”

  • Евгений ·
    04.05.2014 в 10:29
    #

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

  • Людмила ·
    28.09.2014 в 20:59
    #

    Добрый вечер!Подскажите, пожалуйста, такой момент: удалось зарегистрировать еще один сайдбар, прописала функцию для вывода в нужном мне месте.Но вновь созданный мною сайдбар все-равно не отображается, а выводится только когда я отключила “родной sidebar”. А как мне вывести два сайдбара одновременно:один слева, другой справа?Помогите, пожалуйста!Буду благодарна за ответ!

    • Admin ·
      08.11.2014 в 21:50
      #

      Создавать новый сайдбар нужно внутри функции if ( function_exists(‘register_sidebar’) ) с разными именами, выводить нужно через
      < ?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(2) ) : ?>
      < ?php endif; ?>

      Где 2 это номер сайдбара в коде. Если память не изменяет, вместо 2, можно прописать имя сайдбара.

  • Оставить отзыв

    (обязательно)

    (обязательно)


    Наши друзья
    - ARTtime - Блог о Photoshop и Дизайн
    - Блог о дизайне и арте
    Реклама