Как добавить в шаблон собственную область для вывода виджетов

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

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

Иногда хочется добавить в существующий шаблон собственную область виджетов и WordPress предоставляет для этого простые и удобные инструменты.

Рассмотрим добавление области виджетов в тему на простом примере. Здесь я предполагаю, что у читателя есть базовые знания php и структуры шаблонов WP.

Добавим в шапку сайта область для наполнения такими элементами как контактные телефоны.

Для этого потребуется выполнить 3 шага:

1. зарегистрировать новую область виджетов в файле functions.php;
2. наполнить ее информацией в панели управления;
3. сделать вывод области в вашем шаблоне.

Регистрация области виджетов производится специальной функцией register_sidebar.

Основные параметры здесь означают:

• name – заголовок виджета;
• description – описание;
• id – идентификатор.

Сохраняем файл. Заходим в админ панель “Внешний вид – Виджеты”. Видим, что там появилась новая область, которая на рисунке выделена красной рамкой. Видим, что ее заголовок и описание как соответствуют нашим.

Далее перетаскиваем в эту область элемент “Текст” из области доступных виджетов и записываем в него наши телефоны.

Затем выводим область виджетов в нашей теме (у меня это нужно сделать внутри тега header, чтобы выводилось на всех страницах). Делается это функцией dynamic_sidebar, в качестве аргумента для которой указываем наш идентификатор top-area.

Применяем необходимо стилевое оформление к элементу и вот как он выводится у меня. Здесь правда слева еще один виджет с адресом компании.

Теперь клиент может самостоятельно изменять телефоны и адрес в шапке на своем сайте.

Спасибо большое! Работает!

Большое спасибо. Редко найдешь доходчивую статью! Все работает.

помогите, все вроде вышло – 1 и 2 пункты. а вот с третьим – не получается. нужно вставить тут: http://prntscr.com/db0fci, а оно не там вылазит..

Сейчас на сайте там уже видно телефон.

Денис, это сильно зависит от верстки темы. Обычно свойства display: inline-block и float: left помогают выстроить элементы по горизонтали.

Вопрос такой, как сделать так что бы некоторые дивы были скрыты пока этот виджет не включен?

А что значит “виджет включен”?

Как разместить два виджета рядом? То есть как в вашем примере: виджет с адресом, а рядом виджет с телефоном.

нужно или в одном виджете разместить 2 элемента или сделать 2 разных виджета

Какой код применить чтобы сделать 2 разных виджета (как в вашем примере – адрес и телефон)?

так сделал. а как же их разместить рядом? в header указал:

и виджеты встали друг под другом, а не рядом. что и где исправить? или что-то не дописал?

позиционирование элементов делается через стили. Нужно добавить инструкции в файл style.css

Спасибо за помощь! А вы что указали в style.css чтобы элементы (функции) расположить рядом?

можно оформить 2 элемента в разные div. И для этих div указать свойство display: inline-block. Тогда они будут находится горизонтально на одной строке.

После ввода этой фукции:

ничего не меняется. Хотя и внутри тега и вне его добавляю. Мне кажется что именно эту функцию надо в другом фале добавлять, т.к. есть еще родительская тема. Это в function.php тоже добавляется, правильно?

название функции пропало

Admin! Поясните по человеческий, как нормально написать виджет Телефон в шапке. Не выходит область area в виджета

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

Помогите, пожалуйста(( Что можно попробовать? Вместо виджета в шапке появляется вторая шапка под меню. https://prnt.sc/jlkibe

Grace, можете прислать адрес сайта. Нужно посмотреть код.

Чтобы расположить виджеты в новой зоне сайдбара, в той папке, куда вы его вставили (не зарегистрировали, а вставили – index, woocommerce, header или другая)

В этом варианте будет использоваться принцип колонок самого вордпресса – все вставленные виджеты нового сайдбара расположатся колонками в одной общей зоне (если ей задать background цвет, то станет понятно). Это адаптивный вариант. Есть еще вариант в котором создается несколько отдельных новых сайдбаров, они регистрируются и вставляются как описано выше. Style каждого нужно прописать отдельно. Колонками их сделают параметры display: inline-block; и vertical-align: bottom;- этот “приклеит длину к низу, а top “приклеит” к верху:

Так же описываете второй, третий, сколько угодно сайдбаров В этом варианте width лучше прописать не в px, а в %. Вариант не адаптивный. Чтобы сделать резиновым нужно мудрить дальше. И есть третий вариант, описанный самим вордпрессом, оставлю ссылку: https://ru.support.wordpress.com/advanced-html/. Тоже не адаптивный способ.

Надеюсь, кому-то поможет. Я не программист, насколько это правильно, я не знаю, но у меня сработали все три варианта. На сайте стоит первый вариант – новый сайдбар в который вставлены виджеты фильтрации woocommerce, соответственно, вставлено в woocommerce.php и работает как фильтр ajax, но с перезагрузкой страницы. Шаблон темы вордпресс у меня на гутенберге – возможно это важно.

Огромное спасибо! Нашёл единственный рабочий плагин способный нормально отобразить RSS из Livejournal, это Superr RSS Reader, но он работает только в виджетах, а мне нужно было на всю ширину страницы. Благодаря Вашим советам создал новую область виджета (на всю ширину) и всё работает!

Спасибо большое за ваше руководство! Мучилась, мучилась, вообще не понимаю, почему не все шаблоны Вордпресса дают возможность разместить виджет под текстом, а не сбоку и не сверху.