Записи с метками ‘sidebar’

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

Вторник, 19 февраля 2008

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

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


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

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

  • О себе

      ....
  • Рубрики

    ....

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


Самое комментируемое

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

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

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

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

 '
', 'after_widget' => ''
, 'before_title' => '

', 'after_title' => '

', )); ?>

Дам небольшие пояснения, строка, передаваемая в параметр ‘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, скопипастить туда:


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

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


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

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

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

Воскресенье, 10 февраля 2008

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

К чему это я? Ах да, в последнее время ко мне несколько разных человек обратились примерно с одним и тем же вопросом:
“Почему, после того как я добавил в 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 - отключит разрывы между виджетами.

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