Вы хотите сообщить пользователям своего сайта об изменениях, новостях или, например, политике cookie? Вы можете сделать это, используя специальную движущуюся панель, прикрепленную к главной странице сайта. С помощью этого руководства вы узнаете, как его достичь на платформе WordPress.
Информация, которую мы хотим отобразить на нашем сайте, необязательно должна быть в постоянных элементах сайта. Иногда мы хотим добавить на сайт дополнительную «быструю» информацию, такую как баннер с информацией об обучении, продвижении по службе, важном событии или возможности подписки на информационный бюллетень. В этом случае лучше всего добавить новый, отличительный элемент, который отрежет немного от всей страницы.
Вот что такое специальные движущиеся ремни. Мы можем поместить в них любую информацию, и панель появится на главной странице или, например, при прокрутке страницы — скажем, когда пользователь прокручивает статью почти до самого конца. Мы также можем вызвать бары со специальной информацией после нажатия на определенную кнопку на странице. Есть много возможностей. Пойдем к самому гиду.
Первый метод — создание бара с кодом
Вначале это самое простое решение, хотя и требует определенных навыков. Самый простой, потому что вам просто нужно добавить несколько строк кода на наш сайт, чтобы запустить специальную информационную панель. Более того, если мы немного знаем HTML, мы можем легко модифицировать такой элемент.
С другой стороны, для мирян это решение может быть немного сложным. Поэтому, если вы не чувствуете себя в теме HTML, вы можете легко перейти к следующему, второму методу и найти там более удобное решение — с помощью бесплатного плагина WordPress. Вернемся к теме.
Чтобы добавить передвижную панель на нашем веб-сайте, достаточно найти ее с уровня Cockpit, то есть панели управления WordPressem, в левой панели меню на вкладке Внешний вид> Редактор. Здесь, проверяя, редактируем ли мы тему по умолчанию, перейдите в нужную часть окна в файл footer.php. Он также может быть описан как Footer. Мы открываем этот файл.
Затем вставьте в него следующий код:
- Первая позиция в списке
- Другая позиция в списке
Это простой список, который мы можем свободно редактировать. Затем сохраните наш файл и перейдите к следующему стилю CSS. Здесь мы добавляем следующие строки кода:
.fixedbar {
фон: # 000;
bottom: 0px;
цвет: #fff;
font-family: Arial, Helvetica, sans-serif;
Слева направо: 0;
padding: 0px 0;
Положение: фиксированный;
Размер шрифта: 16px;
ширина: 100%;
Z-индекс: 99999;
плавать: слева;
вертикально-Align: средний;
margin: 0px 0 0;
непрозрачность: 0,95;
font-weight: bold;
}
.boxfloat {
выравнивания текста: центр;
ширина: 920px;
margin: 0 автомобиль;
}
#tips, #tips li {
Маржа: 0;
обивка: 0;
не список-стиль: нет
}
#tips {
ширина: 920px;
Размер шрифта: 20px;
высота строки: 120%;
}
#tips li {
padding: 15px 0;
Дисплей: нет;
}
#tips li a {
цвет: #fff;
}
#tips li a: hover {
text-decoration: none;
}
Мы также сохраняем файл. После этого мы только что создали новый бар с информацией, которая будет отображаться в нижнем колонтитуле нашего веб-сайта или блога.
Нам еще нужно создать файл jQuery, который будет запускать его. Таким образом, мы создаем файл с уровня Notepad, где мы добавляем следующий код:
(функция ($) {
this.randomtip = function () {
var length = $ («# tips li»). length;
var ran = Math.floor (Math.random () * length) + 1;
$ («# tips li: nth-child (» + ran + «)»). show ();
};
$ (Документ) .ready (функция () {
randomtip ();
});
}) (jQuery);
Затем мы заходим на наш хостинг и с уровня файлового менеджера, предоставляемого хостинг-провайдером или FTP-клиентом, добавляем файл, который мы создали, к следующему пути:
/ wp-content / themes / FOLDER Z TWOIM MOTYWEM / js
Где, конечно же, FOLDER WITH YOUR MOTIVITY — это каталог шаблонов WordPress, который мы используем. Когда мы сохраняем файл jQuery в папке «js», все, что нам нужно сделать, это вставить следующий код в functions.php (получить доступ к тому же, что и в случае Footer):
функция 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». В этом руководстве мы рекомендуем создать команду «Floating Bar», хотя доступны и другие опции, такие как Sidebar, Lightbox или другие надстройки. Каждый из них имеет свою собственную графику, благодаря которой у нас есть визуализация панели, которую мы хотим добавить на страницу.
Теперь все, что вам нужно сделать, это добавить свой собственный текст в информационную панель и активировать его. Через некоторое время он будет отображаться на нашем веб-сайте. Однако, если у вас есть проблемы с обсуждаемым здесь решением, прокомментируйте. Мы постараемся помочь во всех случаях.
