Как добавлять виджеты WordPress в шапку сайта

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

Зачем и когда может потребоваться добавлять виджет в хидер

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

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

Такая область обычно называется «Под складкой» и используется многими популярными ресурсами для отображения важной информации.

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

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

Шаг 1. Создаем область для виджетов в хидере

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

Для этого добавляем следующий код в файл functions.php темы:

function wpb_widgets_init() {

	register_sidebar( array(
		'name'          => 'Произвольная область для виджетов в хидере',
		'id'            => 'custom-header-widget',
		'before_widget' => '<div class="chw-widget">',
		'after_widget'  => '</div>',
		'before_title'  => '<h2 class="chw-title">',
		'after_title'   => '</h2>',
	) );

}
add_action( 'widgets_init', 'wpb_widgets_init' );

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

Теперь можно перейти на страницу Внешний вид » Виджеты и вы увидите новую область под названием ‘Произвольная область для виджетов в хидере’.

Добавляем в нее текстовый виджет для проверки и сохраняем.

Шаг 2: Выводим произвольную область для виджетов в хидере

Если сейчас вы перейдете на сайт, то не увидите добавленный текстовый виджет.

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

Вам потребуется отредактировать файл header.php своей темы и добавить следующий код в то место, где нужно вывести область для виджетов.

<?php

if ( is_active_sidebar( 'custom-header-widget' ) ) : ?>
    <div id="header-widget-area" class="chw-widget-area widget-area" role="complementary">
	<?php dynamic_sidebar( 'custom-header-widget' ); ?>
    </div>

<?php endif; ?>

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

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

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

Шаг 3: Стилизируем виджет в хидере с помощью CSS

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

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

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

Появится интерфейс кастомайзера тем WordPress. Здесь выбираем владку ‘Произвольный CSS’.

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

Ниже пример кода для минимального оформления области виджетов.

div#header-widget-area {
    width: 100%;
    background-color: #f7f7f7;
border-bottom:1px solid #eeeeee;
    text-align: center;
}
h2.chw-title {
    margin-top: 0px;
    text-align: left;
    text-transform: uppercase;
    font-size: small;
    background-color: #feffce;
    width: 130px;
    padding: 5px;
    }

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

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

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

По всем вопросам и отзывам просьба писать в комментарии ниже.

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