Красивая бегущая строка в wordpress с помощью плагина и без него (на чистом CSS и HTML)

В уроке разберём как осуществляется бегущая строка wordpress, с помощью простого кода и плагином. Эффективный инструмент в рекламных технологиях для привлечения внимания, ненавязчивый формат несомненно даст результат по просмотрам и юзабилити, применяйте и тестируйте.

HTML тег marquee на примере в шапке сайта

Тег marquee создан компанией microsoft для enternet explorer, но впоследствии иммигрировал на остальные браузеры. Смысл прост, заключаем в тег любой элемент, текст, картинку, скрипт и остальное.

Единственный момент, если вставляете в редакторе wordpress при написании страницы или записи, то marquee затрётся. Выход вставлять его в файлы шаблона. Замечу что он не валиден, и при проверке будет ошибка.

Разберём подробно, например, в шапке сайта. За основу возьмём тему twenty nineteen. Посмотрим на синтаксис и применение:

<marquee>задаём текст</marquee>

Так будет выглядеть строка
задаём текст

Как у любой HTML конструкции существуют атрибуты, регулирующие некоторые параметры. В примере ниже разберем два атрибута:

  • behavior конструкция движения
  • scrollamount скорость перемещения

Прописываем behavior и параметр alternate задаст перемещение между краями области, так же scrollamount и например 10:

<marquee behavior="alternate" scrollamount="10">Пишем пример</marquee>

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

Вариант от края до края
Для обзора остальных атрибутов прочитайте эту статью, покажет какие есть возможности и дополнения. Для проверки работы, захожу в wordpress через FTP и редактирую файл header.php и вставляю один из вариантов.

тег marquee на сайте в шапке

В примере расположил перед закрывающим /header. Если возникли проблемы, то пишите нам, обязательно поможем.

Подробнее смотрите в видео.

Бегущая строка wordpress новостей на CSS

Данный метод считается более чистым и современным в wordpress, но предполагаются более глубокие познания CSS и HTML, 100% работающий с любым дополнением, например под слайдером, так как программирование идёт на уровне CSS. Зададим div и прицепим класс begush.

<div class="begush">Задаем что должно выводиться</div>

Теперь идём в файл style.css

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

 .begush{overflow: hidden;
    white-space: nowrap; /* Убираем переносы */
    animation: nazvanie-animacii 10s linear infinite normal;}
 @keyframes nazvanie-animacii {
    from { margin-left: 1px; }
    to { margin-left: 600px; }
   }

Результат:

 

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

Советую к прочтению:

Плагин Ditty News Ticker

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

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

плагин ditty news ticker добавление редактора

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

Заголовок и шорткоды ditty news ticker

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

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

добавление текста в плагине бегущей строки wordpress

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

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

Стили отображения бегущей строки

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

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

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

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

 

Курс WordPress-разработчик
Если Вам понравилась статья — поделитесь с друзьями
Валентин Лифанов
С 2008 года изучаю wordpress, веду блоги, пишу статьи. Бывает подрабатываю создавая сайты на этом удивительном движке.