Как добавить виджет WordPress на заголовок вашего сайта

Хотите добавить виджет WordPress в область заголовка вашего сайта? Виджеты позволяют легко добавлять блоки содержимого в определенные разделы вашей темы. В этой статье мы покажем вам, как легко добавить виджет WordPress в заголовок вашего сайта..


Добавьте виджет WordPress в заголовок вашего сайта

Замечания: Это учебник среднего уровня. Вам нужно будет добавить код в ваши файлы тем WordPress и написать CSS.

Почему и когда вам нужен виджет заголовка на вашем сайте?

Виджеты позволяют легко добавлять блоки контента в обозначенную область в вашей теме WordPress. Эти обозначенные области называются боковыми панелями или областями, готовыми для виджетов..

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

Эта конкретная область называется «Ниже сгиба», и все популярные сайты используют ее для показа действительно важных вещей..

Заголовочный раздел на популярном сайте List25

Как правило, темы WordPress добавляют боковые панели рядом с содержимым или в области нижнего колонтитула. Не многие темы WordPress добавляют готовые для виджетов области над содержимым или в заголовке..

Вот почему в этой статье мы расскажем, как добавить область виджетов в заголовок вашего сайта WordPress..

Шаг 1. Создание области виджета заголовка

Сначала нам нужно создать пользовательскую область виджетов. Этот шаг позволит вам увидеть свою область виджетов на Внешний вид »Виджеты страница в вашей панели WordPress.

Вам нужно будет добавить этот код в файл functions.php вашей темы.

function wpb_widgets_init () {

register_sidebar (массив (
‘name’ => «Пользовательская область виджета заголовка»,
‘id’ => “Заказ-заголовок виджет,
‘before_widget’ => «»,
‘after_widget’ => «»,
‘before_title’ => ‘

‘,
after_title => ‘

‘,
));

}
add_action (‘widgets_init’, ‘wpb_widgets_init’);

Этот код регистрирует новую боковую панель или область виджетов для вашей темы..

Теперь вы можете перейти к Внешний вид »Виджеты страница, и вы увидите новую область виджетов с надписью «Область виджетов пользовательских заголовков».

Пользовательская область виджета заголовка

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

Шаг 2: Показать ваш пользовательский виджет заголовка

Если вы зайдете на свой веб-сайт сейчас, вы не сможете увидеть текстовый виджет, который вы только что добавили в только что созданный виджет заголовка..

Это потому, что мы еще не сказали WordPress, где отображать эту область виджетов..

Давайте сделаем это на этом этапе.

Вам нужно будет отредактировать файл header.php в вашей теме и добавить этот код, где вы хотите отобразить свою область виджета.

<?PHP

if (is_active_sidebar (‘custom-header-widget’)): ?>

<?php dynamic_sidebar (‘custom-header-widget’); ?>

<?php endif; ?>

Не забудьте сохранить свои изменения.

Теперь вы можете посетить свой веб-сайт, и вы увидите область виджета заголовка.

Неустановленный виджет заголовка

Вы заметите, что это выглядит немного неполированным. Вот где вам понадобится CSS, чтобы он выглядел лучше.

Шаг 3: стиль вашей области виджета заголовка с использованием CSS

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

Самый простой способ сделать это с помощью плагина CSS Hero. Это позволяет вам использовать интуитивно понятный пользовательский интерфейс для изменения CSS любой темы WordPress. Для более подробной информации смотрите наш обзор CSS Hero.

Если вы не хотите использовать плагин, вы можете добавить свой CSS в свою тему, посетив Внешний вид »Настройка страница.

Это запустит интерфейс настройщика темы WordPress. Вам нужно будет нажать на вкладку «Дополнительные CSS».

Добавление собственного CSS в тему WordPress

Дополнительная вкладка CSS в настройщике тем позволяет добавлять пользовательский CSS, наблюдая за изменениями, отображаемыми в режиме предварительного просмотра..

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

Вот пример CSS, который поможет вам начать.

div # header-widget-area {
ширина: 100%;
цвет фона: # f7f7f7;
Граница внизу: 1px solid #eeeeee;
выравнивание текста: по центру;
}
h2.chw-title {
margin-top: 0px;
выравнивание текста: слева;
преобразование текста: верхний регистр;
размер шрифта: маленький;
цвет фона: #feffce;
ширина: 130 пикселей;
обивка: 5px;
}

Вот так выглядела наша область виджета с заголовками для темы Twenty Seventeen по умолчанию.

Предварительный просмотр виджета заголовка

Возможно, вам придется настроить CSS в соответствии с вашей темой. Ознакомьтесь с нашим руководством по добавлению пользовательских стилей в виджеты WordPress..

Мы надеемся, что эта статья помогла вам узнать, как добавить виджет WordPress в заголовок вашего сайта. Вы также можете увидеть наш список 25 самых полезных виджетов WordPress для вашего сайта.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map