Дек
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. Постовой. Если вы собираетесь посетить «культурную столицу» России, подберите хостелы санкт-петербурга себе по желанию и возможностям.

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

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

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

  • Tod   21.02.2013

    JIexa, сложно сказать, может имя у них одинаковое и поэтому дублируется все?

  • Максим   11.06.2013

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

  • Tod   11.06.2013

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

  • Олег   21.07.2013

    Подскажите, а каким плагином Вы куски кода в статье выводите?

  • Tod   22.07.2013

    Олег, из всех плагинов подсветки синтаксиса для WP я выбрал наиболее простой — WP-Syntax.

  • Wasit   14.12.2015

    В сайдбаре блок виджетов есть. Хочу еще один добавить там же в сайдбаре, но пониже прикрепленных популярных записей. В functions.php тоже надо что-то менять?

  • Tod   15.12.2015

    Wasit, ну да, новый виджет добавляется через файл functions.php, внимательно почитайте статью еще раз.

  • Wasit   15.12.2015

    Понятно. Спасибо. Ваш сайт в закладках. на досуге разберусь.

  • Александр Алексеенко   01.03.2016

    Как всегда, спасибо автору, думал много времени займет появление нового виджета на моем блоге…однако, благодаря этой статье я справился за считанные минуты. Ваш сайт у меня давно в закладках и я считаю его одним из лучших полезных сайтов по вордпрессу в русскоязычной сети, уже ни раз заимствовал с него полезные коды и решения! Успехов вам и процветания, будете на Бали — заезжайте в гости, да и вообще, если соберетесь путешествовать по Азии, пишите, поможем составить классный маршрут! =)

  • Tod   01.03.2016

    Александр, спасибо)

  • Иван   02.03.2016

    Добрый день. Статья действительно полезная. Но не могли бы вы мне подсказать, как мне разместить свой виджет таким образом, как вот у Вас кнопки соц.сетей слева. Мне бы хотелось бы разместить свой виджет событий справа, таким же образом. Вот мой сайт http://meshokstishkov.ru, И разместить таким образом, что бы он не заступал на поле основной информации…Я уже долго мучаюсь, никак не могу найти подходящие статьи. А Ваша более не менее меня натолкнуло на правильные мысли. Но вот чуть чуть не могу сообразить… Подскажите пожалуйста…

  • Tod   02.03.2016

    Иван, это вопрос скорее не по виджетам или соц.кнопкам, а по веб-разработке. Нужно поискать решение для создания плавающего блока на сайте (HTML, CSS или Javascrio), и тогда применить соответствующие стили для вашего шаблона. Достаточно нетривиальная задача, не сталкивался с ней, к сожалению.
    Ну, или найти максимально похожие на функциям модули. Возможно, есть что-то с плавающими блоками.

  • Tod   05.03.2016

    Иват, можно еще попробовать плагин Q2W3 Fixed Widget, который добавляет фиксированный при прокрутке виджет для сайта.

  • Pommity   08.06.2016

    Добавил код в function.php и ничего не поменялось

  • Tod   08.06.2016

    Pommity, попробуйте реализовать это на базовых шаблонах Twenty Sixteen / Twenty Fifteen. Отключите лишние плагины, возможно, какой-то из них мешает. Все должно работать, по идее, сложно сказать почему у вас не отображается новый блок виджетов в админке.

  • Игорь   30.06.2016

    Добрый день! Хочу создать новую зону для виджета своего сайта…именно для кнопок внизу страницы! Все делаю, но у меня эти кнопки стоят в нужном месте (внизу страницы) но по центру, как прописать чтобы кнопки были либо в правом углу снизу либо же с лева. Подскажите пожалуйста, сам новичок в WordPress

  • Tod   30.06.2016

    Игорь, ну это скорее вопрос не WP, а оформления CSS. Я не могу подсказать конкретный код, т.к. шаблоны все разные. Для выравнивания текста в CSS используют свойство align=left для блоков float=left.

  • Александр   22.11.2016

    Вроде всё просто, только вот с шаблоном y «yoo_sync» для WP — проблема за проблемой, можете подсказать?

  • Tod   22.11.2016

    Александр, к сожалению, разбирать каждую отдельную ситацию времени физически нет:( Попробуйте с малого — выводите обычный php код, потом добавьте простой виджет, ну и смотреть нужно что за ошибки появляются.

  • Юлия С.   22.11.2016

    Добрый день! Прочитала все очень внимательно и хочу уточнить, можно ли виджет сделать таким образом, чтобы он находился не в сайдбаре, а над основным содержимым страницы? Сайт http://www.mamelle.ru, тема Twenty Fifteen.

  • Tod   28.11.2016

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

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

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

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

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

Поиск:
Последние посты
Лучшее в категории

Облако тегов
Скажи свое мнение!

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

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

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