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

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

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

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

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

settings

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

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

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

редактор

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

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

Чтобы вставить бегущую строку, например, в шапку сайта, вам нужно открыть в любом редакторе файл, отвечающий за вывод шапки (обычно это header.php) и вставить там функцию вывода тикера — она приведена под заголовком справа. Или шорткод — под заголовком слева. Шорткод в wordpress выводится с помощью функции do_shortcode, например, так:

Кроме того с помощью шорткода вы можете вывести бегущую строку на страницах вашего сайта, для этого вставьте шорткод в нужно место страницы в редакторе Вордпресс. Также можно вставить шорткод в виджет.

После этого в этом месте на сайт будет появляется введенная вами бегущая строка. Она будет с определенной периодичностью «пробегать» слева направо. На вкладке Ticker Mode можно настроить вывод более детально.

настройки

  • SCROLL DIRECTION — направление движения: влево, вправо, вверх, вниз. Показывать строку изначально;
  • TICK DIMENSIONS — размеры области вывода;
  • SCROLLER PADDING — отступы области вывода: padding — внутренний отступ, margin — внешний отступ;
  • SCROLL SPEED — скорость движения в условных единицах. Останавливать движение при наведении курсора мышки;
  • TICK SPACING — расстояние между элементами бегущей строки.
Оцените статью
Делаем сайт своими руками
Добавить комментарии