Создание бегущей строки с помощью плагина 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 – расстояние между элементами бегущей строки.

Добавьте комментарий