Как сделать бегущую строку в wordpress

Создание бегущей строки с помощью плагина Ditty News Ticker

Бегущая строка в определенном месте сайта служит для привлечения внимания посетителей и обычно с ее помощью публикуют наиболее важные новости и объявления.

Для wordpress есть несколько плагинов, позволяющих сделать такое. Я использую наиболее популярный и гибкий в части настроек плагин Ditty News Ticker. Ниже публикую детальную инструкцию по использованию этого инструмента.

После установки плагина в боковой колонке появится меню из 3-х пунктов. На русском языке пока перевода нет, но я написал пояснения к каждой настройке:

• New Tickers — список существующих «бегущих строк»;
• Add New — добавить новую строку;
• Settings — настройки.

Настройки здесь небольшие:

• Visual Editor — использовать визуальный редактор;
• Quick Edit Links — ссылка в «бегущей строке» на сайте для ее быстрого редактирования (будет видна для администраторов сайта);
• Custom CSS — стили оформления.

Далее добавляем новый элемент по ссылке Add New.

В минимальном варианте здесь нужно указать Заголовок (он используется только для обозначения элемента, на сайте не выводится) и ticker text (текст бегущей строки). В тексте можно использовать любое оформление (цвета, размеры) и в этом виде он будет отображаться на сайте.

После ввода данных нужно их сохранить по кнопке Опубликовать в правой боковой колонке.

Красивая бегущая строка в 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

Задаём конфигурацию например:

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

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

Плагин Ditty News Ticker

Универсальное решение под wordpress плагин Ditty News Ticker. Поиски альтернатив не увенчались успехом, остальные сложные и разобраться необходимо время. Устанавливается Ditty News Ticker стандартным поиском из панели wordpress, либо скачиваем отсюда . В панели появиться новый раздел, заходим и настраиваем первую бегущую строку.

В начале до настроим вордпресс плагин, перейдя во вкладку settings и выбрав чекбокс «Use the visual editor for ticks». Он добавляет визуальный редактор wordpress в панели бегущей строки. Второй чекбокс не понял что делает, поэтому не отмечаем.

Переходим в раздел Add New и работаем над созданием

1. Путь до добавления новых бегущих строк
2. Обязательно пишем название, на сайте не выводиться
3. Плагин предлагает варианты для вставки, шорткодом и PHP функцией

Перейдём к добавлению новых фраз в список.

1. Выбираем вкладку Ticker Type
2. default и mixed позволяют в первом случае отображать стандартный вид, второй смешивает
3. В поле пишем фразы для отображения
4. При желании в каждую фразу можно поместить ссылку
5. Тип открытия ссылки, self в этом окне, target в новом
6. Закрывать ли линк от индексации, тегом noffolow, ставим галочку при необходимости
7. Добавление поля для следующей записи вордпресс

Такими не хитрыми действиями добавляем остальное. Перейдя в Ticke Mode настраиваем модификацию этой бегущей строки, главные раздел это выбор отображения есть:

• Scroll- непрерывно двигающийся текст
• Rotate- появляется одна фраза, останавливается на несколько секунд, исчезает и появляется новая
• List- отображение списком, нелепый и ненужный раздел

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

В global settings показаны общие настройки независимо от выбора внешнего вида. Например, отображение заголовка, или изменение времени показа бегущей строки, сколько секунд рендерить и т.д. В завершение нажимаем справа кнопку «опубликовать» и используя варианты вставки, выводим на экран.

На клиентском блоге вывод осуществлялся под слайдером с помощью шорткода и никаких споров между плагинами не было. Из инструкции мы узнали как в wordpress добавить бегущую строку, разобрали три вида: HTML, CSS и плагин, выбирайте подходящий, вещь необходимая в рекламе и притягивающая внимание.

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

liMarqueeWP — WordPress plugin of Responsive marquee (ticker) for Text and HTML and Images или WordPress плагин бегущей строки для текста, кода или изображений

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

Особенности

• Перетаскивание мышкой
• Перетаскивание касанием пальца (на TOUCH устройствах)
• Адаптируется под ширину экрана
• Пауза и Пуск
• Четыре направления движения (влево, вправо, вверх и вниз)
• Паузы при наведении мышкой
• Пауза при прокрутке страницы
• Пауза при выходе за пределы экрана
• Поддержка XML источника данных
• Возможность дополнять содержание строки новым контентом прямо на ходу
• Возможность изменять содержание строки прямо на ходу
• Возможность автообновления данных
• Множество функций обратного вызова
• Удобная страница настроек всех параметров
• Встроенные кнопки с shortcode прямо в текстовый редактор.
• Круглосуточная поддержка.

Быстрый старт

Чтобы добавить WordPress плагин liMarqueeWP на сайт, вам нужно выполнить всего 3 шага:

Бегущая строка для сайта Elementor

Сегодня на сайте ladyonline.info необычный урок- мы будем делать бегущую строку для сайта Elementor старым «дедовским» способом, используя html и css.

На днях подписчик задал вопрос — как сделать бегущую строку на сайте Elementor базовой версии и я решила сразу же записать видео урок и приготовила готовый код бегущей строки+ таблицу дополнительных стилей, которые помогут преобразовать строку под ваш дизайн. В видео вы увидите Elementor Pro, но установить бегущую строку можно и в базовой версии.

Не будем откладывать, сразу к делу. Смотрите урок «Бегущая строка для сайта Elementor» и применяйте на своем сайте.

Скачайте базовый код бегущей строки и дополнительные стили: https://disk.yandex.ru/d/uco8341D3Nu2k6

Буду рада вопросам и новым идеям, пишите в комментариях 🥰.