Как создать тему для WordPress. Часть 5: создание сайдбара

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

Функция добавления сайдбара

Чтобы добавить к теме поддержку виджетов, необходимо зарегистрироват боковую колонку при помощи функции register_sidebar(). Давайте добавим сайдбар со всеми возможными параметрами в начало файла functions.php:

Немного о возможных аргументах:

  • 'id' => 'sidebar-left' – задает ID сайдбара, по которому мы в дальнейшем будем выводить его в теме
  • 'name' – название сайдбара, которое будет выводиться в консоли при добавлении в него виджетов
  • 'before_title', 'after_title', 'before_widget', 'after_widget' – задают теги, которые будут до и после заголовка виджета и до и после самого виджета

Теперь для того, чтобы отобразить сайдбар в теме, необходимо в файл sidebar.php добавить вызов. Обратите внимание, что обязательно нужно указать ID сайдбара, его мы задали в функции вверху:

Добавьте первую строку после вывода логотипа:

А вторую строку перед копирайтом:

Теперь мы можем заметить в Консоли, что у нашей темы появилась поддержка виджетов, и мы уже можем их добавить и посмотреть на результат.

Следующим шагом будет настройка оформления виджетов, чтобы они были такими же, как в верстке.

Оформление виджетов в сайдбаре

В сайдбаре у нас должны выводиться следующие виджеты:

  • меню со страницами
  • поиск
  • текстовый виджет в рамке
  • последние записи
  • последние комментарии
  • календарь

Сначала посмотрим, как выводятся виджеты в верстке. Они обернуты в тег section, а заголовки виджетов – в header. Сделаем также в нашей теме, внесем измерения в 'before_title' и 'after_title', 'before_widget' и 'after_widget':

Точно также сопоставим, какому классу вордпресс соответствуют классы виджетов в верстке. Здесь нам поможет расширение FireBug для Firefox, или, если используете Chrome, нажмите F12:

  • is-search в верстке это widget_search
  • is-text-style1 в верстке это widget_text
  • is-recent-comments в верстке это widget_recent_comments
  • is-recent-posts в верстке это widget_recent_entries
  • is-calendar в верстке это widget_calendar
  • виджет с навигационным меню будем настраивать отдельно

Теперь заменим в CSS стили на те, которые использует вордпресс.

Обратите внимание, в текстовом виджете вложенный div имеет класс inner, а в вордпресс – класс textwidget, это в CSS тоже нужно заменить. То же самое касается и виджета календаря, только там вместо .inner#calendar_wrap.

Виджет “Поиск”

Виджет поиска придется настроить отдельно, так как он не совпадает по разметке с тем, что есть в верстке.

Существует несколько способов создать собственную форму поиска для вордпресс. Со всеми вы можете ознакомиться в Кодексе.

Самым простым является использование отдельного файла в теме для вывода формы. Нам нужно создать в папке темы новый файл с именем searchform.php со следующим содержанием:

Сохраните файл. После этого наша форма поиска будет выглядеть так же, как и в верстке. Если вы брали другой шаблон, то посмотрите, какие поля и классы есть там, и перенесите их в шаблон.

Настройка меню

Самое трудное сегодня будет в конце. Сейчас мы настроим вывод виджета произвольного меню со списком наших страниц.

Сейчас меню выводится в верстке вот таким кодом:

А вордпресс сгенерировал такой код для меню:

Для стилей в CSS сейчас используется #nav li. Поэтому нам нужно вместо #nav использовать в стилях .widget_nav_menu. Заменяем. Также вместо .current_page_item будет использовать .current-menu-item, так как в меню у нас могут быть не только страницы, но и посты, и произвольные ссылки. Тоже заменяем. Проверяем – если все сделано правильно, все должно работать.

Заголовок блога и копирайты

Сделаем вывод названия блога в боковой колонке. Вместо статичного кода:

Вставьте:

И заодно сделаем вывод названия блога в копирайтах. В файле sidebar.php, вместо этого:

Вставьте:

Так как наш шаблон распространяется по лицензии Creative Commons, удалять ссылки на автора мы не будем.

Итоги

Мы создали сайдбар, добавили в него виджеты и настроили их стили. Также мы сделали вывод названия блога в боковой колонке и в подвале.

В следующей части мы создадим постраничную навигацию.