Как добавить верхнюю панель уведомлений в WordPress?

Многие блоггеры написали длинные обучающие статьи. Однако эффективность статьи не в длине и зависит от результатов вашего призыва к действию. WordPress позволяет вставлять разделы с призывом к действию разными способами. Самый эффективный и привлекательный способ — добавить верхнюю панель уведомлений. Если вы ищете, как добавить верхнюю панель уведомлений в WordPress, в этой статье мы объясним несколько способов.

Популярные примеры панели уведомлений

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

Примеры уведомлений GeneratePress Top
Примеры уведомлений GeneratePress Top

Второй пример — еще один популярный тематический сайт Astra. Здесь вы можете увидеть текст специального предложения с таймером обратного отсчета.

Уведомление Astra Top
Уведомление Astra Top

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

Варианты добавления верхней панели уведомлений в WordPress

Вот некоторые из возможных вариантов.

  • Специальный плагин панели уведомлений
  • Многоцелевые плагины
  • Использование параметров темы с API хуков WordPress
  • Использование сторонних встраиваний
  • Используйте свой собственный CSS

1. Использование специальных плагинов панели уведомлений

Мы рекомендуем использовать эту опцию, так как ее легко контролировать и настраивать с минимальными усилиями. Кроме того, вы можете получить много бесплатных плагинов для этой цели вместо того, чтобы искать плагин премиум-класса, и здесь мы объясним, с помощью плагина Easy Notification Bar. Плагин использует wp_body_open перехватить API, чтобы вставить уведомление над основной частью вашего сайта. Следовательно, он будет работать с любыми темами, в которых используются последние стандарты WordPress. Сначала установите и активируйте плагин Easy Notification Bar.

Установите Easy Notification Bar
Установите Easy Notification Bar

После этого перейдите в раздел «Плагины> Установленные плагины». Щелкните ссылку «Настройки» под плагином Easy Notification Bar.

Простые настройки панели уведомлений
Простые настройки панели уведомлений

Настройка параметров плагина

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

Вот параметры, которые вы можете настроить с помощью плагина.

  • Включить панель уведомлений — установите этот флажок, чтобы увидеть предварительный просмотр панели уведомлений в режиме предварительного просмотра. Преимущество здесь в том, что вы можете изменить вид на рабочий стол, планшет или мобильное устройство, чтобы проверить внешний вид панели без публикации изменений.
  • Показывать значок закрытия — если вы хотите, чтобы пользователи закрывали панель, установите этот флажок. В противном случае пользователи не смогут закрыть панель, и она всегда будет вверху ваших страниц.
  • Значок закрытия — выберите простые или контурные значки для кнопки закрытия.
  • Включить закрепление — включите, чтобы ваше уведомление было липким, когда пользователи прокручивают область содержимого ваших страниц вниз.
Простые настройки панели уведомлений в настройщике
Простые настройки панели уведомлений в настройщике
  • Отключить только на главной странице — установите этот флажок, чтобы отключить панель уведомлений только на главной странице.
  • Сообщение — плагин заполнит образец сообщения в поле, удалит его и добавит ваше собственное сообщение для отображения на панели.
  • Цвет фона / текста — примените цвета фона и шрифта для панели и текста.
  • Выравнивание текста — выравнивание текста внутри панели по левому, правому или центру.
  • Семейство системных шрифтов — используйте этот параметр, чтобы загрузить системный шрифт для текстового содержимого в панели уведомлений. В противном случае плагин также будет использовать настройки вашей темы по умолчанию для панели уведомлений.
  • Размер шрифта — введите размер шрифта, например 18 пикселей, чтобы размер текста отличался от размера вашего основного раздела.
Настройка панели уведомлений
Настройка панели уведомлений
  • Текст кнопки и ссылка — добавьте текст и ссылку для кнопки
  • Параметры ссылки — вы можете сделать кнопку ссылкой как nofollow, спонсируемой и открыть ее в новом окне.

После настройки параметров нажмите кнопку «Опубликовать», чтобы увидеть верхнюю панель уведомлений в действии на вашем действующем сайте. Как вы можете видеть на скриншоте ниже, он будет похож на примеры профессиональных веб-сайтов, как описано выше.

Опубликованная панель уведомлений
Опубликованная панель уведомлений

Альтернативный вариант — FooBar

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

  • После установки плагина вы можете импортировать демоверсии, которые вы можете редактировать и использовать повторно.
Импортировать демо-бары
Импортировать демо-бары
  • Вы можете создать уведомление, уведомление о файлах cookie и призыв к действию, используя один плагин.
Создать новую панель уведомлений в FooBar
Создать новую панель уведомлений в FooBar
  • Предварительный просмотр панели прямо в вашей административной области или во внешнем интерфейсе, не публикуя ее на самом деле.
  • Отрегулируйте положение, видимость и внешний вид в соответствии с вашими потребностями.
Настройте внешний вид с помощью FooBar
Настройте внешний вид с помощью FooBar

2. Многоцелевые плагины

Некоторые плагины выполняют несколько задач. Например, вы можете использовать плагин OptinMonster для добавления верхней панели уведомлений в WordPress, хотя основной целью плагина является управление потенциальными клиентами. Точно так же вы можете использовать плагин WP Review Pro, чтобы добавить виджет уведомлений сверху, хотя плагин предназначен для создания обзоров. Здесь мы объясняем с помощью WP Review Pro, и вы можете проверить в репозитории плагинов WordPress похожие плагины.

  • После того, как на вашем сайте будет установлена ​​профессиональная версия плагина WP Review, создайте или отредактируйте страницу.
  • Плагин добавит мета-поле обзора в редактор и щелкнет вкладку «Панель уведомлений».
  • Выберите «Использовать настраиваемые параметры» напротив «Включить» и настройте внешний вид панели уведомлений.
Настройки WP Review Pro для панели уведомлений
Настройки WP Review Pro для панели уведомлений

3. Используйте параметры темы

Многие темы WordPress предлагают простой способ вставить верхнюю панель уведомлений без каких-либо плагинов. Например, приведенные выше примеры из GeneratePress и Astra используют API-интерфейс WordPress и настраиваемые параметры макета. Вот как вы можете создать верхнюю панель уведомлений в теме GeneratePress без плагина.

  • Сначала подготовьте HTML-контент для панели.
  • Перейдите в раздел «Внешний вид> Виджеты» и вставьте свой HTML-код в элемент «Пользовательский HTML» в области виджетов «Верхняя панель».
Добавить собственный HTML-код в виджет верхней панели
Добавить собственный HTML-код в виджет верхней панели
  • Сохраните изменения и перейдите в раздел «Внешний вид> Настроить».
  • Перейдите в раздел «Верхняя панель» и настройте отступ, ширину и выравнивание полосы.
Настройка верхней панели в GeneratePress
Настройка верхней панели в GeneratePress
  • Просмотрите и опубликуйте свои изменения.
Панель уведомлений с виджетом верхней панели GeneratePress
Панель уведомлений с виджетом верхней панели GeneratePress

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

4. Использование сторонних встраиваний.

Помимо тем и плагинов WordPress, у вас также есть сторонние варианты. Вы можете использовать подписку по электронной почте от MailChimp или любого другого провайдера в верхней части вашего сайта. Это лучший способ получить электронную почту от читателей, соблюдающих GDPR и другие местные законы. Точно так же вы можете использовать Hello Bar или аналогичный сервис, чтобы добавить верхнюю панель уведомлений для привлечения трафика на целевую страницу.

5. Использование собственного CSS

Вы можете просто добавить фрагмент кода CSS над областью меню навигации в разделе заголовка. Однако это жесткий вариант, и вам нужно настроить панель для мобильного просмотра. Кроме того, вы не можете изменить полосу на разных страницах в зависимости от содержимого. Поэтому подробно объяснять это не будем.

Факторы, которые следует учитывать перед выбором плагина верхней панели уведомлений

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

  • В целях электронного маркетинга обязательно проверьте, поддерживает ли плагин интеграцию с формами электронной почты. Кроме того, вы можете выбрать сторонних поставщиков услуг, таких как MailChimp.
  • Для демонстрации собственных продуктовых купонов или партнерских купонов нужны красивые кнопки с иконками.
  • Чтобы привлечь трафик на любую целевую страницу, вы можете иметь простую панель.
  • Для продукта или любых других запусков нужен таймер на панели.

Заключительные слова

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

Похожие записи

Добавить комментарий

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