Как создать тему для 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, удалять ссылки на автора мы не будем.

Итоги

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

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




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

  1. Usanych

    Хорошо бы было, если бы у Вас, Ирина, появился тут раздел для взаимообмена советами общего характера. Пока же все разделы узкотематические. Вопрос не по теме разделов задать негде. Я вот поискал и не нашел где бы задать такой вопрос:
    1. Есть бэкап сайта, скачанный по FTP с сервера.
    2. Есть бэкап SQL, взятый с панели “Резервное копирование”.
    У меня сегодня безвозвратно испорчена Главная страница на одном их моих сайтов. Вчера она была в отличном состоянии.
    Я не знаю и не умею – откуда эту страницу можно восстановить? Где её найти в сохранённых бэкапах?
    Восстановление через биллинговую панель ничего не дало. Может кто подкинет добрый совет?

    Ответить
    • Ирина

      В разделе общего характера не вижу смысла, так как это, во-первых, мой личный блог, а во-вторых, для этого есть много форумов, где аудитория будет побольше, чем у меня, и соответственно шанс получить ответ тоже выше. Если же у Вас если какой-то вопрос ко мне, Вы всегда можете написать на почту: oriolo@oriolo.ru.

      Что касается Вашего вопроса, то все это зависит от хостинга. У меня, например, в панели управления хостингом в разделе Бэкап есть пункт меню “восстановить из бэкапа”. Если у Вас такого нет, попробуйте написать в службу техподдержки с просьбой восстановить сайт из бэкапа от нужной Вам даты.

      Ответить
  2. Usanych

    Да, Вы правы, Ирина. Извините.
    А пункт в панели “восстановить из бэкапа” у меня есть. Он ничего не дал. Переписка с техподдержкой тоже ни к чему не привела. Уже начал все делать по-новой. Так для меня будет проще и быстрей.
    Вам желаю всяческих удач!
    С Уважением,
    Владимир.

    Ответить
    • Ирина

      Странно это все, конечно. А если вручную страницу из бэкапа заменить через редактор? Или вот еще предположение, что бэкап восстанавливается не сразу, а через какое-то время. Начинаю понимать, как мне повезло с техподдержкой у хостинга – они все делают, и на все вопросы отвечают.

      Ответить
  3. Leonard

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

    Ответить
    • Ирина

      Для этого нужно через условия в php прописать, примерно так:

      Ответить
  4. Hendalf

    В пункте “Настройка меню” кажется забыли указать саму функцию вывода меню и возможные аргументы 🙁

    Ответить
    • Ирина

      В этом пункте все в порядке. Наверное, я не совсем понятно объяснила, что мы делаем в этом уроке. Попробую еще раз 🙂

      За вывод сайдбара и всех виджетов в нем отвечает одна-единственная функция dynamic_sidebar(), которую мы добавили в пункте “Функция добавления сайдбара”. Она выглядит вот так:

      Внешний вид виджетов прописан в файле стилей, а их html-код – в файлах ядра WordPress. Действия, которые мы делаем в пункте “Настройка меню”, позволяют “связать” css из верстки с html из ядра системы. Теперь, если мы добавляем виджет через Консоль, то он должен выглядеть также, как и виджет в верстке.

      Ответить
      • Hendalf

        😀 упс, извиняюсь, вы же его в сайдбаре выводите… Все хорошо объяснили, это я сам запутался

        Ответить
      • Максим

        Ирина здравствуйте!
        Такой вопрос: Вы в статье рассматриваете вариант верстки “от обратного”. Т.е. мы используем функцию, смотрим, что нам “нагенерировал” сам WP (например, если я в виджеты вывешиваю список рубрик), смотрим тэги и лезем в css их менять (задавать нужный стиль).

        А как можно самому прописывать стили, например – для вывода рубрик? (И я иимею ввиду не “обертку”, которую доступно прописать в functions, а именно стили для самих (элементов меню).

        Ответить
        • Ирина

          Максим, да, конечно.
          Смотрите, какой код выдает та или иная функция, и стилизуете через СSS.

          Ответить
  5. Антон

    is-calendar в верстке это widget_calendar

    у меня wp дал следующее:
    Значтит мне менять на это?

    Ответить
  6. Roma

    Ирина помогите), когда добавляю виджет почему-то в низу страницы появляется ещё один т.е один выводиться как положено а второй не понятно почему?

    Ответить
  7. Dan

    Доброго времени суток! Уроки полезные, конечно… были бы, если бы начальная тема интеграции соответствовала той, что рассматривается в этом уроке. Жаль, а я то думал, что нашел хороший обучающий материал

    Ответить
    • Ирина

      Раньше использовалась тема Striped, но мне постоянно писали, что она слишком сложная. К тому же, там есть очень много исключений, нетипичных для обычной реализации темы для WordPress. Поэтому, я решила переписать уроки с использованием более простого изначального шаблона. До пятого урока пока не дошла. Если вам нужно, напишите мне на почту, я могу скинуть вам изначальные тексты с кодом.

      Ответить
  8. Дмитрий

    Мне очень понравился урок, но на 5м уроке случился затык т.к я не нашел строки “Добавьте первую строку после вывода логотипа:” ни строк копирайта в sidebar.php
    можно попросить вас, выложить Все конечные файлы готового проекта 🙂

    Ответить

Оставить комментарий