Создание области для виджетов в шапке сайта в WordPress

Виджет в шапке сайта — это очень полезная функция. В нём может содержаться полезная и/или продающая информация. С помощью этого виджета можно сообщать пользователям о новинках и скидках на продукцию или услуги, мероприятиях, конференциях и вебинарах. Очень часто применяется для размещения рекламного и конверсионного контента: обратная связь, быстрый заказ товара и прочее.

Некоммерческие сайты размещают в них рекламные баннеры для монетизации своих сайтов. Этот способ приносит неплохой доход как для вебмастера, так и для рекламодателя.

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

Открываем Редактор тем, в нём — Функции темы файл functions.php

Ищем register_sidebar

register_sidebar(
	array(
	'name'          => esc_html__( 'Right Sidebar', 'bhari' ),
	'id'            => 'sidebar-1',
	'description'   => esc_html__( 'Add widgets here.', 'bhari' ),
	'before_widget' => '<section id="%1$s" class="widget %2$s">',
	'after_widget'  => '</section>',
	'before_title'  => '<h2 class="widget-title">',
	'after_title'   => '</h2>',
	)
);
register_sidebar(
	array(
	'name'          => esc_html__( 'Left Sidebar', 'bhari' ),
	'id'            => 'sidebar-2',
	'description'   => esc_html__( 'Add widgets here.', 'bhari' ),
	'before_widget' => '<section id="%1$s" class="widget %2$s">',
	'after_widget'  => '</section>',
	'before_title'  => '<h2 class="widget-title">',
	'after_title'   => '</h2>',
	)
);

и добавляем ещё один свой

register_sidebar(
	array(
	'name'          => esc_html__( 'Head Sidebar', 'bhari' ),
	'id'            => 'sidebar-3',
	'description'   => esc_html__( 'Add widgets here.', 'bhari' ),
	'before_widget' => '<section id="%1$s" class="widget %2$s">',
	'after_widget'  => '</section>',
	'before_title'  => '<h2 class="widget-title">',
	'after_title'   => '</h2>',
	)
);

Должно получиться примерно вот так:

register_sidebar(
	array(
	'name'          => esc_html__( 'Right Sidebar', 'bhari' ),
	'id'            => 'sidebar-1',
	'description'   => esc_html__( 'Add widgets here.', 'bhari' ),
	'before_widget' => '<section id="%1$s" class="widget %2$s">',
	'after_widget'  => '</section>',
	'before_title'  => '<h2 class="widget-title">',
	'after_title'   => '</h2>',
	)
);
register_sidebar(
	array(
	'name'          => esc_html__( 'Left Sidebar', 'bhari' ),
	'id'            => 'sidebar-2',
	'description'   => esc_html__( 'Add widgets here.', 'bhari' ),
	'before_widget' => '<section id="%1$s" class="widget %2$s">',
	'after_widget'  => '</section>',
	'before_title'  => '<h2 class="widget-title">',
	'after_title'   => '</h2>',
	)
);
register_sidebar(
	array(
	'name'          => esc_html__( 'Head Sidebar', 'bhari' ),
	'id'            => 'sidebar-3',
	'description'   => esc_html__( 'Add widgets here.', 'bhari' ),
	'before_widget' => '<section id="%1$s" class="widget %2$s">',
	'after_widget'  => '</section>',
	'before_title'  => '<h2 class="widget-title">',
	'after_title'   => '</h2>',
	)
);

Таким образом мы создадим новую область Head Sidebar для виджетов sidebar-3, которая будем доступна в дашборде.

Открываем файл шапки сайта header.php, и в самом конце (либо в другом нужном месте) добавляем строчку:

<?php dynamic_sidebar('sidebar-3'); ?>

как здесь (101 строка)

Устанавливаем и настраиваем плагин Q2W3 Fixed Widget.

Теперь в новую область добавим виджет с HTML-кодом, куда скопируем код баннера, и ставим галочку Зафиксировать.

Чтобы при прокрутке страницы пост не закрывал баннер своими текстом и картинками, открываем файл CSS-стиля шаблона и в него добавляем:

#text-2 {
		position: static;
		z-index: 10;		
}

#text-2 — это идентификатор виджета, у каждого он может быть свой.

Его можно посмотреть в исходном коде страницы.

Готово. Теперь в шапке размещён виджет с зафиксированным баннером.

Поделиться ссылкой: