Дек

Добавление нового блока виджетов в шаблоны 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

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.
Woot 25.08.2016
Игорь, почитай тут
http://loco.ru/materials/445-wordpress-dobavit-eshche-odnu-oblast-vidzhetov-widget-area-v
Александр 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
Юлия, да, конеччно, виджет будет отображаться там, где в шаблоне вы добавите код его вызова.