Как сделать тему WordPress виджет совместимой за 3 шага

В комментариях к последней статье «Виджеты — это очень просто!» попросили рассказать, как же сделать тему виджет совместимой. Честно говоря, я думал, что на офф.сайте это описано, а как выяснилось написано то оно написано, да не совсем там.

В общем, отрыл я пошаговое описание того, как нужно «грамотно» виджетизировать свою тему, которое ниже предлагаю вам в своём переводе с небольшими корректировками и дополнениями.


Шаг 1. Редактируем functions.php

Сперва необходимо удостоверится в том, что в папке с вашей темой находится файл function.php, а если таковой отсутствует, то создайте его сами.
Следующим шагом нам необходимо определиться — как у нас формируется сайдбар. Откройте свой sidebar.php и попытайтесь вникнуть в код и понять, что используется для формирования сайдбара — списки (<ul>) или дивы (<div>).
Например, у Артема сайдбар стандартный, из списков и заголовков второго уровня, что видно по коду:

А вот у Максима напротив, сайдбар состоит из последовательных блоков div, обрамленных изображениями «скругленных углов», а уже внутри дива находится контент виджета. Кусок кода, чтобы было (возможно) проще понять, о чём я говорю:

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

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

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

Если же, вы используете, какой-то более извращенный метод (ничего личного, Макс:-)), то код может принять устрашающий вид, аля:

Дам небольшие пояснения, строка, передаваемая в параметр ‘before_widget’ будет выводится как начало любого виджета, а ‘after_widget’ — конец. Т.е. тут мы задаём тэги обрамления виджета. ‘before_title’ и ‘after_title’ соответственно определяют обрамление заголовка виджета (это все те «Рубрики» и «Самое читаемое»). В итоге мы получим дивный сайдбар с заголовками 4 уровня.

Для особо замороченных существует возможность получить при выводе виджета его id (генерится из имени виджета) и класс (получается в процессе обработки виджета). Т.к. ‘before_widget’ пропускается через sprintf, то в любое место строки можно передать %1$s и %2$s, чтобы при выводе получить соответствующие параметры. Надеюсь «замороченные» поняли, о чём я.

Шаг 2. Проверяем сайдбар и добавляем на него виджеты

Чтобы понять работает наш сайдбар или нет, нужно добавить на него несколько виджетов.
Идём в админ панель, далее «Внешний вид > Виджеты» и лицезреем (или нет, если забыли сохранить и/или загрузить functions.php в свою тему) панель сайдбара, куда можно (и даже нужно) натаскать пару-тройку виджетов. И главное нажать «Сохранить», после чего перейти к третьему шагу.

Шаг 3. Добавление сайдбара в шаблон

Ну и наконец-то то, ради чего всё делалось — подключение сайдбара в шаблон.
Тут есть простой и очень простой способ. Оба заключаются в редактировании файла sidebar.php вашей темы.
Простой способ:
Вставить сразу после строки <div id=»sidebar»> следущий код

а перед последним </div> код — <?php endif; ?>
Очень простой способ заключается в том, чтобы понять для себя раз и навсегда, что никто уже не использует шаблоны без виджетов и, стерев предварительно ВЕСЬ код из sidebar.php, скопипастить туда:

Чем меньше кода в подключаемом файле, тем быстрее у нас всё работает (хотя на таком уровне это конечно «мёртвому припарки», но всё же).

Теперь заходим в свой блог и наблюдаем работающие виджеты.


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

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

Виджеты — это очень просто!

«Не знание технологий не освобождает от…», не, не то. «А я вот сделал, а оно не работает…».

К чему это я? Ах да, в последнее время ко мне несколько разных человек обратились примерно с одним и тем же вопросом:
«Почему, после того как я добавил в sidebar.php код кнопки/баннера/ссылки, ничего не изменилось и я их не вижу?!»
На что я сразу выдаю контр-вопрос (нет-нет, я не еврей):
«А вы используете в своей теме виджеты?!»

Просто не все осознают, что всё что находится ниже строки:
if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar() )
в sidebar.php будет показано ТОЛЬКО в том случае, если вы не включили ни одного виджета. В противном случае будут отображаться ваши настройки из «Внешний вид > Виджеты».

Обычно после того, как я это объясняю, следует вопрос — «Ну и как мне поместить свой код в сайдбар/виджет?!», да очень просто — если это обычный хтмл-код (а это в 90% случаев баннеры и стандартные ссылки/кнопки), то достаточно добавить стандартный текстовый виджет и поместить в него готовый код.

Но что делать, если виджет должен выводить результат выполнения какой-то функции? И ведь действительно, почти все «мощные» плагины, такие как ‘Popularity Contest‘ (русская версия), позволяют получать обработанную информацию из своих функций. Например, akpc_most_popular — самые популярные, akpc_most_popular_in_cat — самые популярные в какой-то категории и т.д.

Да, я знаю КАК можно сделать свой виджет, путём редактирования functions.php, но даже мне порой бывает лень это делать, а что говорить о людях, для которых внести изменения в файл темы (причём не просто копи-паст, а ещё и осмысленное редактирование) — это нечто равносильное тасканию пятидесяти килограммовых мешков?

Для таких страдальцев нашёлся чудо плагин Custom Function Widgets (скачать), авторства Kaspars Dambis из Латвии.

Как это работает.

  1. Скачиваете и устанавливаете как и любой другой плагин.
  2. После активации в меню «Внешний вид > Виджеты» появится новый раздел «Custom Function Widgets», где вы можете указать необходимое количество настраиваемых виджетов.
  3. Custom Function Widgets - admin panel - Screenshot

  4. Теперь перетащите один из «Custom Function» плагинов в свой сайдбар и нажмите кнопку настройки.
  5. Введите в поле Function name имя нужной функции (например, st_related_posts, чтобы вывести связанные посты, при помощи плагина Simple Tags) и жмём «сохранить».
  6. Вуаля, если всё сделали правильно, то можем полюбоваться на результат в сайдбаре блога.

Теперь объясню какие поля в настройках за что отвечают:
Widget title — заголовок виджета. Он будет показан при выводе (если вы специально не отключите, о чём ниже), а так же это название будет видно в панели управления виджетами.
Function name — имя функции. Указывается без кавычек и скобок.
Function variables — переменные, передаваемые в функцию. Если функция для работы требует параметры, то указывайте их тут. Важно сохранять последовательность переменных, а так же перечислять переменные через запятую, если их несколько.
HTML before и HTML after — хтмл код, который будет выводиться перед и после вашей функции. Обычно это обрамление тэгами списков, ну или возможно подключение какого-нибудь java-script.
Галочка Remove Widget title from output отключает вывод заголовка виджета в сайдбар, а Remove the default widget wrapper — отключит разрывы между виджетами.

В общем — пробуйте и пишите отзывы тут или сразу автору плагина, который очень оперативно ответил и исправил найденный мною баг. Ещё раз ссылка на скачку плагина.