Хотите добавить виджет WordPress в область заголовка вашего сайта? Виджеты позволяют легко добавлять блоки содержимого в определенные разделы темы. В этой статье мы покажем вам, как легко добавить виджет WordPress в заголовок вашего сайта.
Внимание: Это учебник среднего уровня. Вы должны добавить код в ваши файлы тем WordPress и написать CSS.
Зачем и когда вам нужен виджет заголовка на вашем сайте?
Виджеты позволяют легко добавлять блоки содержимого в обозначенную область в теме WordPress. Эти обозначенные области называются подготовленными областями на боковой панели или виджетом.
Вы можете использовать готовую к виджетам область в заголовке или в предыдущем контенте для отображения рекламы, последних статей или чего угодно.
Эта конкретная область называется «Under the Fold», и все популярные сайты используют ее, чтобы показать действительно важные вещи.
Темы WordPress обычно добавляют боковые панели рядом с контентом или в области нижнего колонтитула. Несколько тем WordPress добавляют готовые для виджетов области к содержимому или заголовку.
Поэтому в этой статье мы поговорим о добавлении области виджетов в заголовок веб-сайта WordPress.
Шаг 1. Создайте область виджета заголовка
Сначала нам нужно создать пользовательскую область виджетов. Этот шаг позволит вам отобразить область пользовательских виджетов в Внешний вид »Виджеты страница в панели управления WordPress.
Вам нужно добавить этот код в файл functions.php вашей темы.
function wpb_widgets_init () {register_sidebar (array (“name” => “Область виджета настраиваемого заголовка”, “id” => “Виджет настраиваемого заголовка”, “before_widget” => ‘
“,” After_widget “=> ‘
“,” Before_title “=> ‘
“,” After_title “=> ‘
«));} Добавить действия (» widgets_init «,» wpb_widgets_init «);
Этот код регистрирует новую боковую панель или область, готовую для виджета темы.
Теперь вы можете перейти к Внешний вид »Виджеты , и вы увидите новую область виджета с пометкой «Область заголовка пользовательского виджета».
Идем дальше, добавляем текстовый виджет во вновь созданную область виджетов и сохраняем его. См. Наше руководство о том, как добавлять и использовать виджеты в WordPress для получения подробных инструкций о том, как добавлять виджеты.
случилось 2- Показать пользовательский заголовок виджета
Если вы зайдете на ваш сайт сейчас, вы не увидите текстовый виджет, который вы только что добавили во вновь созданный виджет заголовка.
Это потому, что мы еще не сказали WordPress, где отображать эту область виджетов.
Мы сделаем это на этом этапе.
Вам нужно отредактировать файл header.php в теме и добавить этот код, где вы хотите отобразить область пользовательских виджетов.
Не забудьте сохранить свои изменения.
Теперь вы можете посетить их веб-сайт и просмотреть область виджета заголовка.
Вы заметите, что это выглядит немного отполированным. Вот где вам нужен CSS, чтобы улучшить его.
Шаг 3: Дизайн области виджета заголовка с использованием CSS
В зависимости от темы вам нужно будет добавить CSS для управления отображением области виджета заголовка и каждого виджета, который он содержит.
Самый простой способ сделать это с помощью плагина CSS Hero. Это позволяет использовать интуитивно понятный пользовательский интерфейс для изменения CSS любой темы WordPress. Для получения дополнительной информации, посмотрите наш обзор CSS Hero.
Если вы не хотите использовать плагин, вы можете добавить собственный CSS в свою тему, посетив Внешний вид »Настройка стр.
Это запустит интерфейс настройки темы WordPress. Вы должны нажать на вкладку «Дополнительные CSS».
Дополнительная вкладка CSS в инструменте настройки темы позволяет вам добавлять пользовательский CSS, наблюдая, как ваши изменения отображаются в режиме реального времени.
Для целей данного руководства мы предполагаем, что вы будете использовать эту область только для добавления виджета для показа рекламных баннеров или пользовательского виджета меню.
Вот несколько примеров CSS, которые помогут вам начать работу.
div # header-widget-area {width: 100%; цвет фона: # f7f7f7; нижний край: 1px solid #eeeeee; выравнивание текста: среднее; } H2.chw-title {margin-top: 0px; выравнивание текста: слева; преобразование текста: заглавные буквы; размер шрифта: маленький; цвет фона: #feffce; ширина: 130 пикселей; отступы: 5 пикселей; }
Вот как была настроена область заголовка стандартной темы Twenty Seventeen.
Может быть необходимо адаптировать CSS к теме. Прочитайте наше руководство о том, как добавить пользовательские стили в виджеты WordPress.
Мы надеемся, что эта статья помогла вам узнать, как добавить виджет WordPress в заголовок вашего сайта. Вы также можете просмотреть наш список 25 самых полезных виджетов WordPress для вашего сайта.
Если вам понравилась эта статья, подпишитесь на наш канал YouTube и посмотрите обучающие видео по WordPress. Вы также можете найти нас на сайте Twitter и Facebook,
