Вы хотите добавить WordPress виджет в область заголовка вашего сайта? Виджеты позволяют легко добавлять блоки контента в обозначенных разделов вашей темы. В этой статье мы покажем вам, как легко добавить WordPress виджет в заголовок вашего сайта.
Примечание: Это промежуточный учебник. Вам нужно будет добавлять код в файлы вашей теме WordPress и писать CSS.
Почему и когда вам нужен заголовке виджета на свой сайт?
Виджеты позволяют легко добавлять блоки контента в определенном месте в вашей теме WordPress. Эти назначенные области называются боковые панели или виджет готовые области.
Виджет готовая область в заголовке или перед содержимым могут быть использованы для показа объявлений, последних статей, или все, что вы хотите.
Эта специфическая область называется ‘Below the fold’ и все популярные веб-сайты используют ее, чтобы показать действительно важные вещи.
Как правило, WordPress темы добавляют боковую панель рядом с контентом, или в нижней области. Не многие темы WordPress добавляют виджет-готовые области выше содержания или в заголовке.
Вот почему в этой статье мы рассмотрим, как добавить виджет в область заголовка вашего сайта WordPress.
Шаг 1. Создание заголовка виджета
Во- первых, нам нужно создать область пользовательских виджетов. Этот шаг позволит вам увидеть свой пользовательский виджет – зону на странице Внешний вид » Редактор темы в панели управления WordPress.
Вам нужно будет добавить этот код в файл вашей темы 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' );
Этот код регистрирует новую боковую панель или виджет для вашей темы.
Теперь вы можете перейти к странице Внешний вид » Виджеты, и вы увидите новую область виджета с надписью” Пользовательский заголовок области виджета”.
Идите вперед, и добавьте текстовый виджет в созданном виджете и сохранить его. Смотрите наш руководство о том, как добавлять и использовать виджеты в WordPress для получения подробных инструкций по добавлению виджетов.
Шаг 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 Hero.
Если вы не хотите использовать плагин, то вы можете добавлять пользовательские CSS к вашей теме, посетив страницу Внешний вид » Настроить.
Он запустит интерфейс настройщика темы WordPress. Вам нужно будет нажать на вкладку “Дополнительные CSS”.
Дополнительная закладка 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 в заголовок вашего сайта.