Дек
6
52

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

виджеты wordpressВиджеты в шаблонах 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 и заходим в раздел «Виджеты». Если все было сделано без ошибок то найдете там новый блок:

добавление виджета wordpress

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

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

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

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

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

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 12, средний балл: 6,17 из 7)
Загрузка...

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

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

  • 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

    Проблема — у меня созданый виджет и тот что был работают одинаковое — я добавляю что то на новый виджет, а оно дублирует и на старый. в чем беда?

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

(предыдущая статья)

Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

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

Поиск:
Последние посты
Заработай в GoGetLinks
Лучшее в категории
Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости