Плагин бегущая строка для wordpress.
Вы наверняка все знаете, что бегущие строки, используемые на сайтах, оживляют внешний вид и привлекают внимание его посетителей. Их использование, на сайте wordpress, необходимо в том случае, когда необходимо привлечь посетителя к определенной статье, заголовку и.т.п
Вставить бегущие строки на wordpress можно и без плагина, но это чревато последствиями, так как не все браузеры хорошо относятся к их восприятию, да и частенько бывают проблемы при обычной вставки бегущей строки в статью. Чтобы не было проблем, есть прекрасный плагин для вставки бегущей строки, именно о нем пойдет речь.
Плагин бегущая строка для wordpress — Ditty News Ticker.
Плагин оснащен различными настройками. В нем вы можете настроить определенное кол-во строк, которые вы хотите применить на своем wordpress сайте, варианты отображения(строка, список, прокрутка). В отличии от других плагинов бегущих строк для wordpress, данный плагин обладает уникальным визуальным редактором, что повышает его приоритеты над другими. Так же, существует возможность использовать в бегущих строках свои картинки, стили css. Ранее созданные очень легко поддаются редактированию, так как для каждой созданной строки присваивается уникальный идентификатор, который позволяет с легкостью отследить ту или иную бегущую строку на wordpress сайте и отредактировать в редакторе плагина Ditty News Ticker.
Как вставлять бегущие строки в запись wordpress
Вставлять строки, созданные с помощью плагина Ditty News Ticker очень просто. Вы можете это делать двумя способами: вставкой шорткода в нужное место статьи, либо вставкой кода в, необходимое вам, место.
Бегущая строка на сайте с WordPress без плагинов
Иногда для привлечения внимания к какому-то элементу на сайте, возникает желание создать для него анимацию. Как по мне, самой простой анимацией является так называемая бегущая строка на сайте. И сегодня я покажу, как её создать за 1 минуту без плагинов и фотошопа. Силами одного лишь HTML.
Для этого в языке HTML создан специальный тег marquee. И всё, что мы поместим внутрь этого тега, будет двигаться.
Выйду в поле ночью с конем
HTML код бегущей строки
Эта бегущая строка на сайте движется благодаря такому коду:
<marquee>Выйду в поле ночью с конем</marquee>
Теперь давайте еще больше привлечем внимание к этой строке и стилизуем текст, чтобы он стал таким.
Ночкой темной тихо пойдем
<marquee style="color:green;font-size:40px;padding: 20px;background: beige;border: 1px solid red;">Ночкой темной тихо пойдем</marquee>
Возможности стилизации этого тега такие же, как у любого div’a и span'a. то есть мы можем задать его высоту, ширину, фон, рамки, отформатировать текст и много другое.
Дополнительные возможности
Кроме стилизации текста, у самого тега есть несколько дополнительных возможностей. А именно:
Направление текста
За это отвечает команда direction. По умолчанию у нее стоит значение left, но мы можем спокойно заменить его на
right (движение текста направо)
Слева направо
КОД
<marquee direction="right" style="color:green;font-size:40px;padding: 20px;background: beige;border: 1px solid red;">Слева направо</marquee>
up (движение снизу вверх)
Снизу вверх
КОД
<marquee direction="up" style="color:green;font-size:40px;padding: 20px;background: beige;border: 1px solid red;height:100px;">Снизу вверх</marquee>
down (движение сверху вниз)
Сверху вниз
КОД
<marquee direction="down" style="color:green;font-size:40px;padding: 20px;background: beige;border: 1px solid red;text-align:right;height:100px;">Сверху вниз</marquee>
Скорость движения текста
Для этого есть команда scrollamount. По умолчанию в значении этой команды цифра 6, но мы можем менять его на любое число от 1 (самое медленное движение) и до бесконечности. Число здесь — это шаг движения в пикселях. Поэтому, если поставить цифру, которая больше ширины экрана, то текст будет «моргать».
Скорость движения 1 пиксель (самая медленная)
<marquee scrollamount="1" style="color:green;font-size:40px;padding: 20px;background: beige;border: 1px solid red;">Черепаха</marquee>
Скорость движения 80 пикселей
<marquee scrollamount="80" style="color:green;font-size:40px;padding: 20px;background: beige;border: 1px solid red;">Маршрутка</marquee>
Скорость движения 1920 пикселей (моя ширина экрана)
<marquee scrollamount="1920" style="color:green;font-size:40px;padding: 20px;background: beige;border: 1px solid red;">25 кадр</marquee>
Ограниченность прокрутки
Теперь давайте закроем текст в камеру, из которой он не сможет выбраться (И камера эта будет надежнее, чем у героя Билла Скарсгорда в 1 сезоне сериала Castle Rock).
Для этого нам понадобится команда behavior. По умолчанию у неё стоит значение scroll . Поэтому текст пропадает и появляется с другого края. Чтобы это изменить, нам надо заменить значение команды на alternate .
Свободу попугаям!
<marquee behavior="alternate" style="color:green;font-size:40px;padding: 20px;background: beige;border: 1px solid red;">Свободу попугаям</marquee>
А если нам надо, чтобы текст просто прошел до конца строки и остановился, то значение команды надо заменить на slide.
Российская экономика
<marquee behavior="slide" style="color:green;font-size:40px;padding: 20px;background: beige;border: 1px solid red;">Российская экономика</marquee>
Если вы дочитали до этого места и не видели движение фразы "Российская экономика" (хотя и движение самой российской экономики вы тоже вряд ли видели), то просто нажмите на клавиатуре F5 (сверху, между 6 и 7), чтобы страница обновилась.
Движение изображения
Тут всё так же, как у текста, только вместо самого текста надо вставить код изображения.
<marquee><img alt="Бегущая строка на сайте с WordPress без плагинов" decoding="async" svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src="https://andrewrochev.ru/ticker/%D0%B0%D0%B4%D1%80%D0%B5%D1%81%20%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F" /></marquee>
Также можно разместить любое количество изображение подряд
<marquee><img alt="Бегущая строка на сайте с WordPress без плагинов" decoding="async" svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src="https://andrewrochev.ru/ticker/%D0%B0%D0%B4%D1%80%D0%B5%D1%81%20%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F%201" /><img alt="Бегущая строка на сайте с WordPress без плагинов" decoding="async" svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src="https://andrewrochev.ru/ticker/%D0%B0%D0%B4%D1%80%D0%B5%D1%81%20%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F%202" /> <img alt="Бегущая строка на сайте с WordPress без плагинов" decoding="async" svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src="https://andrewrochev.ru/ticker/%D0%B0%D0%B4%D1%80%D0%B5%D1%81%20%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F%203" /></marquee>
Движение текста по изображению
Ну и напоследок пустим бегущую строку с текстом по изображению. Для этого нам надо создать div’ный блок и установить ему фон с нужным нам изображением. А внутри блока написать нужный нам текст или другое изображение. Всё просто
Чу-Чу Чу-Чух
<div style="" data-bg="url(адрес изображения на фоне)"><marquee>Чу-Чу Чу-Чух <img alt="Бегущая строка на сайте с WordPress без плагинов" decoding="async" svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src="https://andrewrochev.ru/ticker/%D0%B0%D0%B4%D1%80%D0%B5%D1%81%20%D0%BF%D0%B0%D1%80%D0%BE%D0%B2%D0%BE%D0%B7%D0%B0" /></marquee></div>
В заключение
Как видите, всё очень просто. И абсолютно нет необходимости устанавливать какой-то плагин, тем самым дополнительно создавая нагрузку на страницу и сайт. Зачем, если можно это всё сделать одной строчкой кода?
Другое дело, если нужна более сложная анимация. Тут уже без плагинов и JavaScript кода не обойтись. Но если использовать на своем WordPress сайте плагин Elementor, то изучать код не обязательно. Там можно создавать анимацию для каждого элемента отдельно. Полный обзор этого мегаполезного плагина будет позже
Красивая бегущая строка в wordpress с помощью плагина и без него (на чистом CSS и HTML)
В уроке разберём как осуществляется бегущая строка wordpress, с помощью простого кода и плагином. Эффективный инструмент в рекламных технологиях для привлечения внимания, ненавязчивый формат несомненно даст результат по просмотрам и юзабилити, применяйте и тестируйте.
HTML тег marquee на примере в шапке сайта
Тег marquee создан компанией microsoft для enternet explorer, но впоследствии иммигрировал на остальные браузеры. Смысл прост, заключаем в тег любой элемент, текст, картинку, скрипт и остальное.
Единственный момент, если вставляете в редакторе wordpress при написании страницы или записи, то marquee затрётся. Выход вставлять его в файлы шаблона. Замечу что он не валиден, и при проверке будет ошибка.
Разберём подробно, например, в шапке сайта. За основу возьмём тему twenty nineteen. Посмотрим на синтаксис и применение:
Так будет выглядеть строка
задаём текст
Как у любой HTML конструкции существуют атрибуты, регулирующие некоторые параметры. В примере ниже разберем два атрибута:
- behavior конструкция движения
- scrollamount скорость перемещения
Прописываем behavior и параметр alternate задаст перемещение между краями области, так же scrollamount и например 10:
Пример исполнения, надпись перемещается с другим параметром и с более высокой скоростью чем начальный вариант.
Вариант от края до края
Для обзора остальных атрибутов прочитайте эту статью , покажет какие есть возможности и дополнения. Для проверки работы, захожу в wordpress через FTP и редактирую файл header.php и вставляю один из вариантов.
В примере расположил перед закрывающим /header. Если возникли проблемы, то пишите нам, обязательно поможем.
Подробнее смотрите в видео.
Бегущая строка wordpress новостей на CSS
Данный метод считается более чистым и современным в wordpress, но предполагаются более глубокие познания CSS и HTML, 100% работающий с любым дополнением, например под слайдером, так как программирование идёт на уровне CSS. Зададим div и прицепим класс begush.
Задаем что должно выводитьсяТеперь идём в файл style.css
Задаём конфигурацию например:
.begush @keyframes nazvanie-animacii < from < margin-left: 1px; >to < margin-left: 600px; >>
Бегущей строке можно задать цвет фона и текста. Для оптимального выбора воспользуйтесь css палитрой, которую вы сделали специально для таких случаев.
Подробнее почитайте в интернете, статей куча. Основывается способ на связке двух стилей animation, регулирующий подачу, и keyframes, управляющий границами.
- Создание блоков в Guttenberg
- Сделать свои шорткоды
- Узнаем PHP версию движка
- Пиксели или px – это
Плагин Ditty News Ticker
Универсальное решение под wordpress плагин Ditty News Ticker. Поиски альтернатив не увенчались успехом, остальные сложные и разобраться необходимо время. Устанавливается Ditty News Ticker стандартным поиском из панели wordpress, либо скачиваем отсюда . В панели появиться новый раздел, заходим и настраиваем первую бегущую строку.
В начале до настроим вордпресс плагин, перейдя во вкладку settings и выбрав чекбокс “Use the visual editor for ticks”. Он добавляет визуальный редактор wordpress в панели бегущей строки. Второй чекбокс не понял что делает, поэтому не отмечаем.
Переходим в раздел Add New и работаем над созданием
- Путь до добавления новых бегущих строк
- Обязательно пишем название, на сайте не выводиться
- Плагин предлагает варианты для вставки, шорткодом и PHP функцией
Перейдём к добавлению новых фраз в список.
- Выбираем вкладку Ticker Type
- default и mixed позволяют в первом случае отображать стандартный вид, второй смешивает
- В поле пишем фразы для отображения
- При желании в каждую фразу можно поместить ссылку
- Тип открытия ссылки, self в этом окне, target в новом
- Закрывать ли линк от индексации, тегом noffolow, ставим галочку при необходимости
- Добавление поля для следующей записи вордпресс
Такими не хитрыми действиями добавляем остальное. Перейдя в Ticke Mode настраиваем модификацию этой бегущей строки, главные раздел это выбор отображения есть:
- Scroll- непрерывно двигающийся текст
- Rotate- появляется одна фраза, останавливается на несколько секунд, исчезает и появляется новая
- List- отображение списком, нелепый и ненужный раздел
При выборе модификации, открываются доступные для изменения настройки именно для этого параметра.
В global settings показаны общие настройки независимо от выбора внешнего вида. Например, отображение заголовка, или изменение времени показа бегущей строки, сколько секунд рендерить и т.д. В завершение нажимаем справа кнопку “опубликовать” и используя варианты вставки, выводим на экран.
На клиентском блоге вывод осуществлялся под слайдером с помощью шорткода и никаких споров между плагинами не было. Из инструкции мы узнали как в wordpress добавить бегущую строку, разобрали три вида: HTML, CSS и плагин, выбирайте подходящий, вещь необходимая в рекламе и притягивающая внимание.
Нажмите, пожалуйста, на одну из кнопок, чтобы узнать понравилась статья или нет.
Бегущая строка на сайте
Бегущая строка на сайте с плагином Ditty News Ticker
Бегущая строка на сайте будет отличным рекламным трюком привлекающим внимание посетителей Вашего сайта, реализовать это можно с бесплатным плагином Ditty News Ticker.
Плагин присутствует в библиотеке WordPress, прост в установке и настройке.
После установки и активации плагина в боковой панели администрирования сайта появится надпись News Tickers и подменю
- News Tickers (все существующие бегущие строки)
- Add New (добавить новую бегущую строку)
- Settings (установки)
Создание бегущей строки
Можно сразу переходить ко второму пункту Add New — созданию новой бегущей строки
Вначале вписываем название для создаваемой бегущей строки, как для любой новой записи. Например «Бегущая строка».
В самом верху представлены шорткод для вставки на страницу или виджет
и код для вставки в шаблон темы
Ниже присутствует строка для ввода самого текста бегущей строки
Ниже можно указать ссылку Link, по которой будет осуществляться переход на требуемую страницу или запись и ее параметры Target и No follow. Если переход по ссылке не нужен, можно не указывать.
Еще ниже «галочкой» можно отметить параметр Line Breaks — разрыв линии в бегущей строке (можете провести эксперимент и посмотреть как это выглядит)
Настройки плагина Ditty News Ticker
Visual Editor Use the visual editor to create tick contents
Use the visual editor for ticks
Quick Edit Links Add quick edit links on the front-end of the site for editors and admins
Add quick edit links
Custom CSS Add custom css to style your ticker without modifying any external files
- В первой строке предлагается включить визуальный редактор для редактирования текста бегущей строки. Естесственно, что со включенным визуальным редактором можно не только ввести текст, но и нормально его отредактировать (цвет, размер и т. д.)
- Во второй строке предлагается по сути то же самое, только для редактирования ссылки с текста бегущей строки
- В третьей строке есть возможность прописать собственный CSS стиль для отображения бегущей строки.
Нам кажется, что настроек, как для бесплатного плагина, более чем достаточно.