Как создать собственный виджет заголовка в WordPress

Опубликовано: 2021-11-16

Вы ищете способы создать виджет заголовка на своем сайте? Вы пришли в нужное место. Мы покажем вам, как легко создать собственный виджет заголовка в WordPress .

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

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

Зачем создавать собственный виджет заголовка в WordPress?

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

четырехслойный заголовок

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

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

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

Как создать собственный виджет заголовка в WordPress

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

ПРИМЕЧАНИЕ . Прежде чем двигаться дальше, поскольку мы будем редактировать некоторые файлы ядра, мы рекомендуем вам создать полную резервную копию вашего веб-сайта и установить дочернюю тему. Чтобы создать дочернюю тему, вы можете следовать этому руководству или использовать любой из этих специальных плагинов.

Как только вы это сделаете, переходите к следующему разделу.

1) Создание пользовательского виджета

Во-первых, вам нужно создать новую область виджетов. Для этого на панели инструментов WordPress выберите « Внешний вид» > «Виджеты» .

создать пользовательский виджет заголовка в WordPress — все виджеты

Оказавшись там, вы увидите все области виджетов, доступные в вашей активной теме. Это может измениться в зависимости от вашей темы, но в большинстве случаев вы увидите здесь несколько областей. Для этой демонстрации мы используем GeneratePress, и он поставляется с множеством областей виджетов, которые уже зарегистрированы и оформлены.

создать собственный виджет заголовка в WordPress — все области виджетов

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

Для этой демонстрации мы будем использовать фрагменты кода, поэтому перейдите в « Плагины»> «Добавить новый» и найдите плагин «Фрагменты кода». Затем мы устанавливаем его и активируем, как показано ниже.

установить плагин фрагментов кода

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

создать собственный виджет заголовка в WordPress — создать новый фрагмент

Дайте фрагменту имя, а затем вставьте следующий фрагмент в раздел « Код »:

 функция quadlayers_widgets_init() {
register_sidebar(массив(
'name' => 'Виджет заголовка QuadLayers',
'id' => 'quadlayers-header-widget',
'before_widget' => '<div class="ql-widget">',
'after_widget' => '</div>',
'before_title' => '<h2 class="ql-title">',
'после_названия' => '</h2>',
));
}
add_action('widgets_init', 'quadlayers_widgets_init');

Этот фрагмент кода создает новый виджет на вашем сайте WordPress под названием Quadlayers Header Widget.

создать собственный виджет заголовка в WordPress - создать собственный виджет

Затем сохраните изменения, и после активации вы увидите совершенно новую область виджетов в разделе виджетов WordPress.

виджет заголовка четырех слоев

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

2) Добавление виджета в шапку

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

Для этого нужно отредактировать файл header.php . Вы можете найти этот файл в каталоге темы, выбрав « Внешний вид » > « Редактор темы» > «Заголовок темы» (header.php) . Перед редактированием файла убедитесь, что вы используете дочернюю тему. Если в вашей дочерней теме нет файла header.php , откройте папку родительской темы, скачайте оттуда файл header.php , а затем загрузите его в папку дочерней темы.

После этого вставьте следующий код в файл header.php :

 <?php

если (is_active_sidebar('quadlayers-header-widget')) : ?>
<div class="ql-widget-area widget-area" role="дополнительный">
<?php dynamic_sidebar('quadlayers-header-widget'); ?>
</div>

<?php конец; ?>

После того, как вы вставили код, обновите файл.

вставить виджет заголовка в файл

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

образец текстового блока

В интерфейсе веб-сайта вы увидите заголовок, как показано ниже.

образец виджета заголовка

Это означает, что виджет и код работают. Здорово!

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

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

3) Настройка виджета с помощью CSS

После добавления виджета в заголовочный файл пришло время улучшить его внешний вид с помощью CSS. Вы можете ввести свой код CSS в файл style.css темы или использовать настройщик WordPress. Оба метода работают хорошо, но мы рекомендуем вам добавить код CSS, используя раздел « Дополнительные CSS » на панели администратора. Таким образом, вы мгновенно увидите изменения в мастере предварительного просмотра в реальном времени. Тем не мение,

Теперь давайте взглянем на пример скрипта, чтобы вы могли настроить собственный виджет заголовка, который вы создали в предыдущем разделе. Скопируйте следующий код, перейдите в раздел « Внешний вид » > « Редактор тем» > «Дополнительный CSS » и вставьте его.

 div#quadlayers-header-widget {
ширина: 100%;
цвет фона: #f5f5f5;
нижняя граница: 1px сплошная #eeeeee;
выравнивание текста: по центру;
}

.ql-виджет {
ширина: 100%;
цвет фона: #f5f5f5;
выравнивание текста: по центру;
}

h2.ql-название {
поле сверху: 0px;
выравнивание текста: по левому краю;
преобразование текста: верхний регистр;
размер шрифта: маленький;
цвет фона: #feffce;
ширина: 130 пикселей;
отступ: 5px;
}

css-скрипт

После того, как вы обновите CSS, он будет выглядеть так:

виджет заголовка css

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

Вот и все! Вот как вы можете создать собственный виджет заголовка в WordPress с небольшим количеством кода. Это было не так уж сложно, не так ли?

Вывод

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

В этом посте мы показали вам, как создать собственный виджет заголовка и настроить его с помощью небольшого количества кода. Даже если у вас нет навыков программирования, вы можете следовать инструкциям и добавить виджет на свой сайт. Однако, чтобы изменить его стиль, вам могут понадобиться базовые знания CSS. Редактирование файла header.php может быть сложным в зависимости от вашей темы, поэтому, если у вас возникнут какие-либо проблемы с ним, вы можете связаться с автором своей темы.

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

Дополнительные способы настройки заголовка см. в следующих руководствах:

  • 3 способа настроить заголовок в WordPress
  • Как сделать заголовок Divi липким