Виджеты — это очень удобная технология для сайтов, заключающаяся в том, что вы можете из административной панели самостоятельно наполнять определенные области различными элементами.
Чаще всего виджеты используются для наполнения боковой колонки (такими элементами, как: последние записи, последние комментарии и т.д.) и все более менее современные шаблоны поддерживают эту технологию.
Иногда хочется добавить в существующий шаблон собственную область виджетов и WordPress предоставляет для этого простые и удобные инструменты.
Рассмотрим добавление области виджетов в тему на простом примере. Здесь я предполагаю, что у читателя есть базовые знания php и структуры шаблонов WP.
Добавим в шапку сайта область для наполнения такими элементами как контактные телефоны.
Для этого потребуется выполнить 3 шага:
- зарегистрировать новую область виджетов в файле functions.php;
- наполнить ее информацией в панели управления;
- сделать вывод области в вашем шаблоне.
Регистрация области виджетов производится специальной функцией register_sidebar.
|
1 2 3 4 5 6 7 8 9 |
register_sidebar( array( 'name' => __( 'Телефон в шапке', '' ), 'id' => 'top-area', 'description' => __( 'Шапка', '' ), 'before_widget' => '', 'after_widget' => '', 'before_title' => '<h3>', 'after_title' => '</h3>', ) ); |
Основные параметры здесь означают:
- name — заголовок виджета;
- description — описание;
- id — идентификатор.
Сохраняем файл. Заходим в админ панель «Внешний вид — Виджеты». Видим, что там появилась новая область, которая на рисунке выделена красной рамкой. Видим, что ее заголовок и описание как соответствуют нашим.
Далее перетаскиваем в эту область элемент «Текст» из области доступных виджетов и записываем в него наши телефоны.
Затем выводим область виджетов в нашей теме (у меня это нужно сделать внутри тега header, чтобы выводилось на всех страницах). Делается это функцией dynamic_sidebar, в качестве аргумента для которой указываем наш идентификатор top-area.
|
1 2 3 |
<div class="top_phone"> <?php dynamic_sidebar( 'top-area' ); ?> </div> |
Применяем необходимо стилевое оформление к элементу и вот как он выводится у меня. Здесь правда слева еще один виджет с адресом компании.
Теперь клиент может самостоятельно изменять телефоны и адрес в шапке на своем сайте.
Спасибо большое! Работает!
Большое спасибо. Редко найдешь доходчивую статью! Все работает.
помогите, все вроде вышло — 1 и 2 пункты. а вот с третьим — не получается.
нужно вставить тут: http://prntscr.com/db0fci, а оно не там вылазит..
Сейчас на сайте там уже видно телефон.
Денис, это сильно зависит от верстки темы. Обычно свойства display: inline-block и float: left помогают выстроить элементы по горизонтали.
Вопрос такой, как сделать так что бы некоторые дивы были скрыты пока этот виджет не включен?
А что значит «виджет включен»?
Как разместить два виджета рядом?
То есть как в вашем примере: виджет с адресом, а рядом виджет с телефоном.
нужно или в одном виджете разместить 2 элемента или сделать 2 разных виджета
Какой код применить чтобы сделать 2 разных виджета (как в вашем примере — адрес и телефон)?
сделайте 2 функции
register_sidebar( array(
‘name’ => __( ‘Телефон в шапке’, » ),
‘id’ => ‘top-area’,
‘description’ => __( ‘Шапка’, » ),
‘before_widget’ => »,
‘after_widget’ => »,
‘before_title’ => ‘
‘,
‘after_title’ => ‘
‘,
) );
с разными значениями id
так сделал.
а как же их разместить рядом?
в 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, но он работает только в виджетах, а мне нужно было на всю ширину страницы. Благодаря Вашим советам создал новую область виджета (на всю ширину) и всё работает!
Спасибо большое за ваше руководство!
Мучилась, мучилась, вообще не понимаю, почему не все шаблоны Вордпресса дают возможность разместить виджет под текстом, а не сбоку и не сверху.
Пожалуйста, подскажите, как разместить виджет в строку самом верху страницы.
Это должно быть официальная ссылка на регистрацию учреждения в ЕСИР
Код для вставки:
Помогите человеку, который много лет работал в другом конструкторе
Екатерина, в вашем случае можно просто добавить код для вывода ссылки в файл header.php, чтобы не разбираться с виджетами. header.php — как правило это файл, отвечающий за вывод шапки сайта.