Последние новости:

Поиск по сайту:

Ковыляющий по прямой дороге опередит бегущего, который сбился с пути (Ф. Бэкон).

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

FavoriteLoadingДобавить в избранное
15.12.2016
Заголовок виджета без стилей

Вы хотите добавить 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 за 48 часов

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

Идите вперед, и добавьте текстовый виджет в созданном виджете и сохранить его. Смотрите наш руководство о том, как добавлять и использовать виджеты в 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 к теме WordPress

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

Читать  Лучшие практики для внутренних ссылок в WordPress

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

Вот некоторые примеры 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 в заголовок вашего сайта.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...
Поделиться в соц. сетях:

0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
guest

**ссылки nofollow

2 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
VVPutinnaf

Всем привет!
Вчера зашел на кинопрталы, привычные мне, удивленно нашел что они толком не пашут, то есть их фильмы не показывают, типо в вашей стране видео запрещенно!
Сегодня фильмы не посмотреть онлайн по всюду сериалы заблокированы, что опять назад на торренты?

Это может быть вам интересно

Статьи партнеров:

Рекомендуемое
вы хотите использовать поиск Google на свой WordPress сайта? Хотя…
2
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам:

Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

badge
Обратный звонок 1
Отправить

Спасибо! Ваша заявка принята

close

Спасибо! Ваша заявка принята

close