Дек

Добавление нового блока виджетов в шаблоны wordpress

Виджеты в шаблонах wordpress позволяют достаточно просто, быстро и наглядно добавлять разные элементы в дизайн вашего блога. Чаще всего виджеты выводятся в сайдбаре или футере, где можно разместить, например, список последних постов, архив блога, теги или некоторую другую информацию. Чтобы не выводить ее с помощью специальных функций в шаблонах (которые знают не все пользователи), разработчики добавляют специальные блоки виджетов. В них пользователь просто перетаскивает готовые элементы и настраивает их свойства. Сегодня рассмотрим как это реализуется. Кстати, также можно добавлять виджеты на страницы если очень нужно.

Чтобы понять о чем, собственно, я сегодня буду говорить, зайдите в раздел «Внешний вид» — меню «Виджеты». На странице слева найдете перечень доступных виджетов, а справа блоки, куда их можно добавлять.

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

В принципе, ничего сложного в этом нету, если вы часто заглядываете в редактор wordpress шаблона, то наверняка видели там блок кода по типу:

<div class="sidebar">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<?php endif; ?>
</div>

Этот код отвечает за вывод содержимого блока виджетов. Таким образом вы, например, можете разместить его в футере сайта, если хотите выводить виджеты там. Если установленных виджетов в шаблоне хватает, то можно ограничиться ими. Но в случае работы по шаблону на заказ (не для себя) может возникнуть ситуация создания дополнительного блока виджетов. Для этого выполняем пару шагов.

Во-первых, заходим в файл functions.php, где добавляем код:

if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'name' => 'New Sidebar',
        'before_widget' => '',
        'after_widget' => '',
        'before_title' => '<div class="title">',
        'after_title' => '</div>',
    ));

Здесь задается имя виджета (name), отображаемый HTML код до и после виджета (before_widget, after_widget), а также код до и после заголовка.

Сохраняете содержимое functions.php и заходим в раздел «Виджеты». Если все было сделано без ошибок то найдете там новый блок:

Туда уже можно будет разместить разные элементы. Но чтобы их отобразить потребуется зайти в нужный вам файл шаблона (сайдбар, футер или любое другое место), где добавляем код:

<div class="my-new-sidebar">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("New Sidebar") ) : ?>
<?php endif; ?>
</div>

В отличие от самого первого примера здесь явно указываем имя блока виджетов, который мы создали. Сохраняем шаблон и смотрим на сайте все ли выводится, должно работать:) Если есть желание «копнуть глубже», то можете почитать раздел кодекса про виджеты в шаблонах.

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

P.S. Постовой. Если вы собираетесь посетить «культурную столицу» России, подберите хостелы санкт-петербурга себе по желанию и возможностям.

Оцените статью:

(голосов - 13, средний балл: 5,77 из 7)

Загрузка...

Категории: Виджеты; Возможности; Шаблоны;

Теги: базовые знания, виджеты, возможности шаблона, оформление блога, полезное для блога, правка шаблона, сниппеты.

комментария 52 к статье “Добавление нового блока виджетов в шаблоны wordpress”

1 2 Далее →

aurum 07.12.2010
Все это (и многое другое) делает отличный плагин Custom sidebars. Создает любое количество сайдбаров, которые потом можно привязывать к постам или страницам.
Сергей 07.12.2010
Зачем грузить сайт плагином Custom sidebars, если можно прописать в шаблоне нужный код.
Отличная статья, особенно для новичков.
YoS 08.12.2010
Спасибо! отличная статья
Вячеслав 12.12.2010
извиняюсь, не по теме а как сделать страницы для листания перехода 1 2 3 и тд а то я повесть свою выкладываю и каждую главу страницей накладно а на одной очень уж длинно получаеться.
Tod 13.12.2010
Вячеслав, в текстовом редакторе должно быть разбиение не страницы, но как это работает я лично не пробовал.
mik 15.12.2010
В чем может быть проблема, у меня в виджете рубрики не отображаются категории. Можно ли в этом виджете прописать другие категории отличные от категорий в хедере.
Tod 15.12.2010
mik, сложно сказать в чем проблема, если последний вордпресс используешь, то можно подобные блоки выводить через новое меню в wordpress 3.0
mik 16.12.2010
Спасибо за подсказку!!! В виджете выводятся рубрики после добавления в них статей. Новое меню это хорошое решение мой проблемы. Спасибо!
Grigor 24.12.2010
Подскажите пожалуйста, как сделать такой же отсчет времени до Нового года как на сайте videorecept.ru в сайдбаре правом?
Tod 24.12.2010
Grigor, когда давно писал статью по теме — создание на сайте счетчика обратного отсчета там есть пару решений, хотя возможно сейчас актуальны уже другие плагины и скрипты.
gogolik 10.01.2011
Мда, 2 дня думал как это сделать, сегодня сделал кое как и сразу после этого наткнулся на Ваш блог… Причем, сделал точно так же ))) Будем и дальше читать.
sidash 20.01.2011
спасибо большое!пригодится думаю в будущем!
Илья 04.02.2011
У меня сейчас попытка сделать три виджета в сайдбаре. Сайт трехколоночный и резиновый. Вот думаю, сделать внизу только под центральной колонкой или во всю ширину. Правда пока не могу оформить правильно их в CSS, все сдвигается.

К тому же, возникла идея воткнуть блок виджетов в синглпост, чтобы отображать там небольшое меню. Получиться нет, хз.
Андрей 02.03.2011
Все коды как в примере вставил, ничего не менял, но так и не получилось ничего…
Не отображается новый сайдбар!
Что не так?
В файл functions.php в начале добавил:
if ( function_exists(‘register_sidebar’) )
register_sidebar(array(
‘name’ => ‘New Sidebar’,
‘before_widget’ => »,
‘after_widget’ => »,
‘before_title’ => »,
‘after_title’ => »,
));

в файл футера так же добавил:

Что не так сделал? Кто подскажет?
Спасибо заранее!
Tod 03.03.2011
Андрей, сложно сказать наверняка, я в примерах указывал код, который сам использую, поэтому он работает. Возможно ответ удастся найти на официальном сайте вордпресс http://codex.wordpress.org/Widgetizing_Themes
Илья 03.03.2011
Всё работает. Проверьте имена. Если в коде в Функтионс.пхп имя например NEW SIDEBAR, то и в сайдбаре такое же имя должно быть.

Если в функтионс
if ( function_exists(‘register_sidebar’) )
register_sidebar(array(
‘name’ => ‘my-new-sidebar’,
‘before_title’ => »,
‘after_title’ => »,
‘before_widget’ => »,
‘after_widget’ => »,
));

То и в футере например вставляете код

имя my-ne-sidebar должно совпадать

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

?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(«my-new-sidebar») ) : ?>
<?php endif; ?

в начале и в конце соответственно. А то он что то не отображается
Но только в фуктионс.рхр надо добавлять не в начале, а уже после
Андрей 04.03.2011
Разобрался уже просто сам накосячил в сонном бреду…
Все равно спасибо за отзывы…
Илья у тебя ошибка
перед ?> надо ставить точку с запятой, а не двоеточие… если уж помогаешь, то сам ошибки не допускай, а то совсем людей не опытных в блуд ввести можно…
Но все равно спасибо!
Илья 04.03.2011
php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar() ) : ?>

В это строке перед ?> точка с запятой? даже в посте в примере стоит двоеточие. А уж с точкой запятой футер вовсе не работает. Что то Вы опять путаете в сонном бреду.
Андрей 04.03.2011
пардон!
dron 23.04.2011
Хорошая статья, все подробно описано! спасибо автор!!
Саня 08.05.2011
Всё понятно, но как вы у себя смогли разрезать на попалам, где реклама от гугула?
Tod 12.05.2011
Саня, немного изменил шаблон + пару строк в CSS. Можете сохранить данную страницу и посмотреть как все реализовано на уровне HTML + CSS.
Саня 12.05.2011
блин я кодах не очень, уже много раз пытался понять как это сделать но ничего не получается((( можете мне помочь???
Андрей 21.06.2011
Спасибо, супер, очень помогло при установке в футер
Александр 03.07.2011
Я пожалуй остановлюсь на плагине Custom sidebars. С кодом для меня уж очень много хлопот.
Разбасовкин 04.07.2011
Я делал кодами. Причем на страницу сообщения вставлял одни виджеты, на архив и главную сраницу другие.
Да и вывод постов делал с кодами. Этим плагином я бы не стал нагружаться.
Юля 12.11.2012
Здравствуйте) вот и я, не знаток хтмл-я, сижу и мучаюсь с кодами)))
Сайдбар вставила, отображается только в панели управления.
Зашла в файл футера и вставила код

кстати.. в какое место(пардон))) его там вставлять? Он не отображается на сайте у меня. Имена совпадают сайдбара.
Или этот код ставить в тот же файл, что и код для сайдбара нового?…хм
Tod 12.11.2012
Юля, сложно что-то подсказать, если честно. Попробуйте еще раз пошагово все выполнить как сказано в статье — там описан весь механизм. Еще как вариант — найти шаблон с виджетами и позаимствовать из него нужный код.
JIexa 20.02.2013
Проблема — у меня созданый виджет и тот что был работают одинаковое — я добавляю что то на новый виджет, а оно дублирует и на старый. в чем беда?