Виджет в шапке сайта — это очень полезная функция. В нём может содержаться полезная и/или продающая информация. С помощью этого виджета можно сообщать пользователям о новинках и скидках на продукцию или услуги, мероприятиях, конференциях и вебинарах. Очень часто применяется для размещения рекламного и конверсионного контента: обратная связь, быстрый заказ товара и прочее.
Некоммерческие сайты размещают в них рекламные баннеры для монетизации своих сайтов. Этот способ приносит неплохой доход как для вебмастера, так и для рекламодателя.
В данной статье разберёмся, как создать дополнительную область виджетов на шапку сайта, разместить в ней баннер и зафиксировать его при прокрутке в 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 — это идентификатор виджета, у каждого он может быть свой.
Его можно посмотреть в исходном коде страницы.
Готово. Теперь в шапке размещён виджет с зафиксированным баннером.
Поделиться ссылкой: