Пропустить

Как добавить виджет в заголовок вашего блога WordPress

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 600.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

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

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

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

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

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

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

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

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

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

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

Зона виджетов в WordPress Head

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

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

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

Шаг 1: Создание области виджета

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

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

function bpc_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', 'bpc_widgets_init');

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

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

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

новая зона виджетов WordPress

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

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

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

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

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

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

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

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

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

<? Php если (is_active_sidebar ( "заказ-заголовок виджет)):?> <Div ID = "заголовок-виджет-область" класс = "CHW-виджет-область виджета-область" Роль = "комплементарный"> <? PHP dynamic_sidebar ( "заказ-заголовок виджет); ?> </ Div> <Php ENDIF; ?>

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

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

в виду демонстрационный сайт

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

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

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

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

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

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

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

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

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

дополнительный css WorDPress

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

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

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

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

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

демо тема двадцать семнадцать wordpress

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

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

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

1. Smart4y Tooltip

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

Smart4y Tooltip Адаптивный плагин WordPress

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

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

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

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

2. Оправдано

Плагин WordPress Justified - это адаптивный плагин галереи, который выравнивает ваши эскизы в выровненной сетке с помощью jQuery, как на Flickr.

Обоснованный-плагин для WordPress-фотографов,

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

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

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

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

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

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

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

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

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

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

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

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

Заключение

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

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

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

...

Эта статья содержит комментарии 8

  1. Здравствуй! Я хотел бы знать, есть ли у вас возможность рассказать мне, как разместить «информационное окно», подобное тому, которое использовалось здесь в начале этой статьи, включая интерактивные кнопки рядом с «Загрузить» и «Таблицы», макет очень красивый. Спасибо!

  2. Сэр, я попробовал это. Действительно, на странице виджетов отсутствует добавление виджетов. И я добавил это. Когда шаг 2 не удается ввести код в заголовке php. Угадай 2, в чем ошибка, сэр?

  3. В первом отображаемом коде, который состоит в создании новой зоны виджета, начните с ввода «function», но я бы сказал, что он начинается с «function». Фактически, в этом коде есть несколько ошибок, которые допускают ошибку при его написании. Буду признателен за исправление.

  4. 🙂 Все в порядке, только никто в своих советах не объясняет, где добавить код в функцию functions.php !!! Это важно! Все используют «разные» темы ...

  5. Привет,

    Благодарим вас за поддержку.

    Я смог добавить свою панель поиска в пользовательский заголовок. К минусам, настроить стиль более сложно ...

    Я хотел бы изменить размер, положение (что он не принимает всю ширину заголовка), а также цвет фона.

    Спасибо заранее.

Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

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

Вверх
6 акции
доля1
чирикать
Регистрация5