Плагин бегущая строка для wordpress.
Вы наверняка все знаете, что бегущие строки, используемые на сайтах, оживляют внешний вид и привлекают внимание его посетителей. Их использование, на сайте wordpress, необходимо в том случае, когда необходимо привлечь посетителя к определенной статье, заголовку и.т.п
Вставить бегущие строки на wordpress можно и без плагина, но это чревато последствиями, так как не все браузеры хорошо относятся к их восприятию, да и частенько бывают проблемы при обычной вставки бегущей строки в статью. Чтобы не было проблем, есть прекрасный плагин для вставки бегущей строки, именно о нем пойдет речь.
Плагин бегущая строка для wordpress — Ditty News Ticker.
Плагин оснащен различными настройками. В нем вы можете настроить определенное кол-во строк, которые вы хотите применить на своем wordpress сайте, варианты отображения(строка, список, прокрутка). В отличии от других плагинов бегущих строк для wordpress, данный плагин обладает уникальным визуальным редактором, что повышает его приоритеты над другими. Так же, существует возможность использовать в бегущих строках свои картинки, стили css. Ранее созданные очень легко поддаются редактированию, так как для каждой созданной строки присваивается уникальный идентификатор, который позволяет с легкостью отследить ту или иную бегущую строку на wordpress сайте и отредактировать в редакторе плагина Ditty News Ticker.
Как вставлять бегущие строки в запись wordpress
Вставлять строки, созданные с помощью плагина Ditty News Ticker очень просто. Вы можете это делать двумя способами: вставкой шорткода в нужное место статьи, либо вставкой кода в, необходимое вам, место.
Коды разных бегущих строк на HTML + добавление на WordPress
Ваш сайт не должен быть сухим, если вы хотите что бы он был привлекательным для пользователей и они на нем задерживались. Одним из элементов, которые привлекают внимание и оживляют сайт, является бегущая строка. В этом небольшом туториале я покажу как создать самые разные бегущие строки: медленную, быструю, вертикальную, с остановкой по ховеру (при наведении) и даже такую:
Если вам понравится материал из этой статьи, обязательно посетите раздел этого сайта про работу с HTML, я уверен, там вы сможете найти еще больше крутых фишек и трюков с этим языком разметки страниц.
Примечание: Поскольку мой блог на WordPress и большая часть статей относится именно к этой CMS, в конце вы также можете найти видео о том как добавить HTML код в запись на WordPress.
Содержание
- Простая бегущая строка
- Медленная бегущая строка
- Бегущая строка слева на право
- Отскакивающая бегущая строка
- Бегущая строка вверх
- Бегущая строка вниз
- Бегущая строка с фоном
- Бегущая строка с ховером
- Необычный вариант
- Бегущая строка с картинкой
- Как добавить HTML на WordPress
- Примечание
Простая бегущая строка
Демонстрация работы строки находится под HTML кодом. Такой тип бегущей строки вставляется вот таким HTML кодом:
Здесь находится ваш бегущий текст и он прекрасен
Медленная бегущая строка
Демонстрация работы строки находится под HTML кодом. Данный тип можно вывести на экран с помощью кода:
Обратите внимание, что бы изменить скорость (замедлить строку), вам потребуется вписаться свое значение вместо цифры 1, например 3, или 30.
Здесь находится ваш бегущий текст и он прекрасен
Бегущая строка слева на право
Демонстрация работы строки находится под HTML кодом. Такой тип бегущей строки вставляется вот таким HTML кодом:
Здесь находится ваш бегущий текст и он прекрасен
Отскакивающая бегущая строка
Такой тип строки характеризуется тем, что он не заканчивается в конце пути, а отскакивает от края и начинает двигаться в другую сторону. Ниже можно найти код HTML такой строки:
your message here
Бегущая строка вверх
В этом случае наша строка будет совершать непрерывный подъем вверх. Вот код:
Здесь находится ваш бегущий текст
Бегущая строка вниз
Тоже самое что и предыдущая, только теперь наша строка постоянно двигается вниз. Эти отличия можно наблюдать и в коде: вместо direction=”up”, мы теперь пишем direction=”down”. Вот такой у нас получается HTML:
Здесь находится ваш бегущий текст
Бегущая строка с фоном
Здесь у нас должен добавиться фон у строки. Давайте посмотрим код и действие:
Здесь находится ваш бегущий текст
Бегущая строка с ховером
Попробуйте навести на работающую строку ниже курсор мыши – она остановится. Вот код:
Поймай меня мышкой
Необычный вариант
Как очень нетривиальную опцию предлагаю еще такую строку:
Обратите внимание, в этом варианте также как и в нескольких предыдущих вы можете изменить цвет фона, направление движения и сам текст.
Здесь находится ваш бегущий текст Здесь находится ваш бегущий текст Здесь находится ваш бегущий текст Здесь находится ваш бегущий текст
Бегущая строка с картинкой
Уже не совсем бегущая строка – скорее бегущая картинка. Но вписывается в тему этого тутаториала однозначно, поэтому вот код HTML для вывода такого необычного решения на вашем сайте:
Как добавить HTML на WordPress
Примечание
Небольшое примечание: Тег marquee, задающий бегущую строку, придуман когда-то для Internet Exlorer и другие веб-браузеры не всегда корректно отображают работу различных его атрибутов. Желательно проверить работоспособность из Google Chrome и Safari.
Плагин бегущая строка на сайт WordPress
Прибамбасы для сайта
Опубликовано 24.01.2016 Обновлено 30.09.2019
Привет! Ditty News Ticker — отличный плагин для создания бегущей строки на wordpress сайте. Бегущую строку вы сможете вставить в любое место на вашем сайте, с помощью шорткода или php кода. Вы сможете вставлять в бегущую строку не только обычный текст, но и медиафайлы. Плагин имеет достаточно простые и понятные настройки, по крайней мере для меня, если вы новичок, то данная инструкция вам в помощь. Установить плагин вы сможете прямо из админ-панели wordpress. Перейдите по вкладке: Плагины — Добавить новый , введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.
После установки и активации плагина, чтобы создать бегущую строку, перейдите по вкладке: News Tickers — Add New .
На странице создание бегущей строки, укажите название бегущей строки. Чтобы добавить новый текст в бегущую строку, нажмите на плюсик , в правой части окна. Чтобы создать бегущую строку, нажмите на кнопку — Опубликовать . Для сохранения изменений в бегущей строке, нажмите вверху на кнопку — UPDATE .
— TICKER TEXT, укажите здесь текст бегущей строки.
— LINK, укажите ссылку для текста.
— TARGET, выберите в каком окне будет открываться ссылка, blank — в новом окне, self — в том же окне.
Далее, перейдите на страницу — Settings и поставьте галочку в значении — Visual EditorUse the visual editor to create tick contents . Сохраните изменения.
После чего снова зайдите на страницу создания бегущей строки или откройте для редактирования уже созданную. Теперь вы сможете создавать бегущую строку с помощью визуального редактора.
После создания бегущей строки, скопируйте шорткод или php код бегущей строки, в зависимости от того куда вы хотите вставить бегущую строку. Шорткод можно вставить на страницу, в запись, в виджет Текст или в виджет визуальный редактор, если он у вас есть. PHP код можно вставлять в php файлы, например в footer.php подвал сайта или header.php шапка сайта, самый верх.
Например, скопируйте шорткод бегущей строки, вставьте шорткод на страницу создания записи или страницы.
На сайте у вас будет отображаться бегущая строка.
Если что-то не понятно по настройкам или есть вопросы по дополнительным настройкам, которые я не стал разбирать, то оставьте комментарий к данной записи.
Остались вопросы? Напиши комментарий! Удачи!
Бегущая строка на сайте с 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, то изучать код не обязательно. Там можно создавать анимацию для каждого элемента отдельно. Полный обзор этого мегаполезного плагина будет позже