Как создать плавающую панель уведомлений в WordPress

1. Первый способ - создание бара с кодом
2. Второй способ - подвижная полоса от уровня пробки

Хотите ли вы информировать пользователей вашего сайта об изменениях, новостях или, например, политике использования файлов cookie? Вы можете сделать это с помощью специальной движущейся панели, прикрепленной к главной странице сайта. С помощью этого руководства вы узнаете, как этого добиться на платформе Wordpress.

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

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

Первый способ - создание бара с кодом

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

С другой стороны, для мирян это решение может быть немного сложным. Поэтому, если вы не чувствуете себя в теме HTML, вы можете легко перейти к следующему, второму способу и найти там более удобное решение - с помощью бесплатного плагина Wordpress. Вернемся к теме.

Чтобы добавить подвижную панель на нашем веб-сайте, достаточно найти ее на уровне пульта управления, то есть на панели управления Wordpressem, в левой панели меню «Внешний вид»> вкладка «Редактор». Здесь при проверке, редактируем ли мы тему по умолчанию, перейдите в правую часть окна к файлу footer.php. Это также может быть описано как нижний колонтитул. Мы открываем этот файл.

Затем вставьте в него следующий код:

Это простой список, который мы можем свободно редактировать. Затем сохраните наш файл и перейдите к следующему - стиль CSS. Здесь мы добавляем следующие строки кода:

.fixedbar {background: # 000; низ: 0px; цвет: #fff; семейство шрифтов: Arial, Helvetica, без засечек; Слева направо: 0; отступы: 0px 0; Положение: фиксированный; шрифт Размер-: 16px; ширина: 100%; Z-индекс: 99999; плавать: слева; вертикально-Align: средний; поле: 0px 0 0; непрозрачность: 0,95; вес шрифта: полужирный; } .boxfloat {text-align: center; ширина: 920px; маржа: 0 авто; } #tips, #tips li {margin: 0; обивка: 0; list-style: none} #tips {width: 920px; Размер шрифта: 20px; высота строки: 120%; } #tips li {padding: 15px 0; Дисплей: нет; } #tips li a {color: #fff; } #tips li a: hover {text-ornament: none; }

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

Нам все еще нужно создать файл jQuery, который будет его запускать. Таким образом, мы создаем файл с уровня Notepad, куда добавляем следующий код:

(function ($) {this.randomtip = function () {var length = $ ("# tips li"). length; var ran = Math.floor (Math.random () * length) + 1; $ ("# tips li: nth-child ("+ ran +") "). show ();}; $ (document) .ready (function () {randomtip ();});}) (jQuery);

Затем мы регистрируемся на нашем хостинге и с уровня файлового менеджера, предоставляемого хостинг-провайдером или FTP-клиентом, добавляем созданный нами файл по следующему пути:

/ wp-content / themes / FOLDER Z TWOIM MOTYWEM / js

Где, конечно, FOLDER WITH YOU MOTIVITY - это каталог шаблонов Wordpress, который мы используем. Когда мы сохраняем файл jQuery в папке "js", все, что нам нужно сделать, это вставить следующий код в functions.php (доступ такой же, как в случае с Footer):

function wpb_floating_bar () {wp_enqueue_script ('wpb-footerbar', get_stylesheet_directory_uri (). '/js/floatingbar.js', array ('jquery')); } add_action ('wp_enqueue_scripts', 'wpb_floating_bar');

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

Второй способ - подвижная полоса от уровня пробки

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

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

Теперь на уровне плагина мы создаем новую движущуюся панель - используя «Создать новый Optin». В этом руководстве мы рекомендуем создать команду «Плавающая панель», хотя существуют и другие параметры, такие как боковая панель, лайтбокс или другие надстройки. У каждого из них есть своя графика, благодаря которой у нас есть визуализация панели, которую мы хотим добавить на страницу.

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

Похожие

Комментарии