Хотите добавить виджет WordPress в область заголовка вашего сайта?

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

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

Внимание: Это учебник среднего уровня. Вам нужно будет добавить код в файлы вашей темы WordPress и освоить немного CSS.

Но перед любой модификацией узнайте наш 5 WordPress плагинов для резервного копирования вашего блога или Как установить тему WordPress et Сколько плагинов я должен установить на WordPress.

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

Зачем и когда нужно добавлять виджет в шапку?

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

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

Этот конкретный домен используется на всех популярных веб-сайтах для отображения действительно важной информации.

Откройте для себя тоже Как добавить пользовательские виджеты после публикации в WordPress

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

Мы также советуем ознакомиться с нашими MailChimp учебник на французском языке: полное руководство по созданию информационного бюллетеня

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

Шаг 1. Создайте область виджетов

Прежде всего, нам нужно создать настраиваемую область виджетов. Этот шаг позволит вам увидеть настраиваемую область виджетов в " Внешний вид> Виджеты На вашей панели WordPress.

Вам нужно будет добавить этот код в файл functions.php Вашей темы.

function bpc_widgets_init () {register_sidebar (array ('name' => 'Пользовательская область виджета заголовка', 'id' => 'custom-header-widget', 'before_widget' => ' ',' after_widget '=>' ',' before_title '=>' ',' after_title '=>' ',)); } add_action ('widgets_init', 'bpc_widgets_init');

Этот код сохраняет новую боковую панель или область виджетов в вашей теме WordPress.

Если вы никогда не устанавливали WordPress локально, узнайте Как установить WordPress локально на ПК / Windows с XAMPP

Вы можете пойти в " Внешний вид> Виджеты И вы увидите новую область виджета с пометкой " Пользовательский заголовок виджета Область .

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

Попробуйте также наш гид по добавлению виджетов.

Шаг 2: покажи свой виджет в шапке

Если вы зайдете на свой веб-сайт, вы не сможете увидеть только что добавленный текстовый виджет.

Потому что мы еще не показали, как отображать зоны пользовательские виджеты WordPress.

Это то, что мы будем делать на этом этапе.

Вот также для вас список 5 Критические плагины WordPress для увеличения доходов вашего блога

Вам нужно будет отредактировать файл header.php В вашей теме WordPress и добавьте этот код, где вы хотите отобразить виджеты.

Не забудьте сохранить изменения.

Затем вы можете посетить свой веб-сайт, и вы увидите текстовый виджет в заголовке.

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

Шаг 3: Придайте стиль своим заголовкам CSS

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

Один из самых простых способов сделать это - использовать CSS Hero. Последний позволяет использовать интуитивно понятный пользовательский интерфейс для изменения CSS темы WordPress.

Мы также советуем вам узнать это Что вы можете сделать с плагином Yellow Pencil WordPress?

Если вы не хотите использовать плагин, вы можете добавить собственный CSS в свою тему WordPress, посетив " Внешний вид »Персонализация Чтобы настроить тему WordPress.

Читайте также нашу статью о 10 WordPress плагины для улучшения трафика блога

Это позволит вам отобразить интерфейс настройщика WordPress. Вам нужно будет нажать на " Дополнительные CSS .

Вкладка « дополнительный CSS В Настройщик Позволяет добавлять собственный CSS при просмотре изменений в окне предварительного просмотра справа.

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

Вот пример CSS для начала:

DIV # заголовок-виджет-область {ширина: 100%; цвет фона: #f7f7f7; граница дна: 1px твердый #eeeeee; выравнивания текста: центр; } H2.chw-заголовок {Маржа-топ: 0px; выравнивания текста: слева; текст-преобразования: заглавные буквы; Размер шрифта: маленький; цвет фона: #feffce; ширина: 130px; обивка: 5px; }

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

Откройте для себя также несколько премиальных плагинов WordPress  

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

Мы предлагаем вам несколько премиальных плагинов WordPress, которые помогут вам сделать это.

1. Smart4y Tooltip

Подсказка Smart4y — это Плагин Wordpress гибкий инструмент, предназначенный для создания современных всплывающих подсказок без какой-либо зависимости от библиотеки Javascript. Он полностью адаптивен и предлагает возможность вставки HTML-контента.

Его WYSIWYG-редактор позволит вам визуально создавать каждую всплывающую подсказку без необходимости вводить какой-либо код, но если вы хотите, вы всегда можете это сделать.

Узнайте также наш 10 WordPress плагины для оценки статей из вашего блога

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

Скачать | Демо | веб-хостинг

2. Оправдано

Le Плагин Wordpress Justified — это адаптивный плагин галереи, который выравнивает миниатюры по выравнивающей сетке с помощью jQuery, как на Flickr. 

Это приносит функции, которые будут отличать ваши галереи от конкурентов!

Его основными характеристиками являются: адаптивная компоновка, специальные эффекты пролета, автоматическое выравнивание сетки,  редактор коротких кодов, внешний вид eполностью настраиваемый, поддержка рзрители и многие другие…

скачать | Демонстрация | веб-хостинг  

3. Расписание писем

ce Плагин Wordpress как следует из названия, позволяет вам планировать публикацию по электронной почте на вашем веб-сайте. Это часть расширения плагина WordPress «Follow My Blog Post».

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

Читайте также нашу статью о 10 WordPress плагины для использования карт на вашем сайте

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

скачать | Демонстрация | веб-хостинг

Рекомендуемые ресурсы

Узнайте о других рекомендуемых ресурсах, которые помогут вам создать и управлять своим сайтом.

• Как создавать документы Excel и Word, на WordPress
• Как настроить логотип WordPress на приборной панели
• Как найти файлы для редактирования темы WordPress
• Как настроить CSS вашего сайта WordPress

Заключение

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

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

Если у вас есть предложения или замечания, оставьте их в нашем разделе Комментарии.

...