Создание бегущей строки с помощью плагина 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 и работаем над созданием
- Путь до добавления новых бегущих строк
- Обязательно пишем название, на сайте не выводиться
- Плагин предлагает варианты для вставки, шорткодом и PHP функцией
Перейдём к добавлению новых фраз в список.
- Выбираем вкладку Ticker Type
- default и mixed позволяют в первом случае отображать стандартный вид, второй смешивает
- В поле пишем фразы для отображения
- При желании в каждую фразу можно поместить ссылку
- Тип открытия ссылки, self в этом окне, target в новом
- Закрывать ли линк от индексации, тегом noffolow, ставим галочку при необходимости
- Добавление поля для следующей записи вордпресс
Такими не хитрыми действиями добавляем остальное. Перейдя в Ticke Mode настраиваем модификацию этой бегущей строки, главные раздел это выбор отображения есть:
- Scroll- непрерывно двигающийся текст
- Rotate- появляется одна фраза, останавливается на несколько секунд, исчезает и появляется новая
- List- отображение списком, нелепый и ненужный раздел
При выборе модификации, открываются доступные для изменения настройки именно для этого параметра.
В global settings показаны общие настройки независимо от выбора внешнего вида. Например, отображение заголовка, или изменение времени показа бегущей строки, сколько секунд рендерить и т.д. В завершение нажимаем справа кнопку «опубликовать» и используя варианты вставки, выводим на экран.
На клиентском блоге вывод осуществлялся под слайдером с помощью шорткода и никаких споров между плагинами не было. Из инструкции мы узнали как в wordpress добавить бегущую строку, разобрали три вида: HTML, CSS и плагин, выбирайте подходящий, вещь необходимая в рекламе и притягивающая внимание.
Нажмите, пожалуйста, на одну из кнопок, чтобы узнать понравилась статья или нет.
Бегущая строка для сайта
Очень давно искал плагин бегущей строки для сайта, но так нормального и не нашел, но вот недавно наткнулся на зарубежном сайте на классную бегущую строку. Посмотрел как она реализована и нашел jQuery плагин для такой строки. Он называется Web ticker. Настройка заняла буквально 5 минут и в итоге у меня получилось вот так:
И сегодня я вам расскажу как установить себе на сайт бегущую строку с помощь небольшого плагина Web ticker.
Web ticker — что это такое?
Web ticker — это jQuery плагин, который позволяет прокручивать на вашем сайте например заголовки ваших статей. Он использует некоторые необычные расчеты для обеспечения плавного непрерывного движения. Контент, помещенный в web ticker может быть разнообразным, включая текст, список картинок или ровные стилизованные списки. Web ticker API также может быть использован для управления прокруткой и настраивается программно.
Инсталляция и конфигурация
Все, что вам нужно сделать, это посмотреть на несколько наших простых примеров, чтобы начать работу. Читать далее пошаговые инструкции.
1. Убедитесь, что сам jQuery подключен к вашему сайту и если он еще не подключен, то вы можете вставить его сами, скопировав код ниже:
2. Вам нужно скачать файл web ticker. Тут лежит его минимализированная версия. Или установить через npm (менеджер пакетов, входящий в состав Node.js.)
И включить его на странице
3. Теперь нужно сделать список с содержанием, которое будет крутиться на сайте.
4. В вашем JS-файле нужно выбрать с помощью jQuery список, который вы хотите преобразовать в скролл, и запустить функцию webTicker.
WebTicker активирован в списке при помощи #webTicker (id webTicker)
Настройки
При инициализации плагина вы можете передать параметры, чтобы изменить настройки, заданные по умолчанию. Это совершенно необязательно и используется только для удовлетворения ваших конкретных потребностей.
| Настройка | Описание | По умолчанию |
|---|---|---|
| speed | Скорось передвижения в секунду. Задается в пикселях — px | 50 |
| moving | Определяет, должен продолжать движение после наведения или нет | true |
| startEmpty | Определяет, начинать показывать элементы в переделах видимого поля или нет | true |
| duplicate | Означает, что детали должны быть продублированы в случае необходимости, чтобы удалить любые пробелы | false |
| hoverpause | Пауза при наведении | true |
| rssurl | URL-адрес RSS-канала (обратите внимание на ограничения домена) | false |
| rssfrequency | Время (в минутах), необходимое для обновления RSS-канала. 0 означает отсутствие обновления | 0 |
| updatetype | Определяет сбрасывать ли данные при обновлении или нет | reset |
| transition | Функция замедления для переходов | linear |
| height | Высота элементов. Строковое значение должно включать в себя значение | ‘30px’ |
| maskleft | Изображение, чтобы быть использованы для наложения маски на левой стороне | ” |
| maskright | Изображение, чтобы быть использованы для наложения маски на правой стороне | ” |
| maskwidth | Определяет ширину маски | 0 |
Методы
Методы могут быть вызваны с помощью JavaScript. Приведенная ниже таблица показывает доступные методы.
| Метод | Описание | Пример |
|---|---|---|
| stop | Останавливает элементы бегущей строки в текущей позиции | Пример |
| cont | Продолжается прокрутка элементов от текущего положения | Пример |
| update | Возможность обновления поддерживает два режима ‘swap’ и ‘reset’, которые устанавливаются соответственно при запуске акции. Функциональность подкачки использует данные-обновить атрибуты для идентификации элементов uniquie в списке. Если значение узла изменяется это просто ‘swapped’, оставляя его в той же позиции. Элементы не в «обновление» списка не удаляются, а новые будут добавлены в конце. Это поведение может быть изменено путем передачи последних двух параметров, ‘insert’ и ‘remove’. Логическое значение True будет означать, какие новые пункты должны быть добавлены/удалены соответственно. Значения по умолчанию для ‘insert’ истинно, в то время как ‘remove’, является ложным. | Пример |
| transition | Определяет, какой из переходов в использовании. Доступным переходом являются ‘linear’, которые прокручивается с нормальной и постоянной скоростью, и ‘ease’, который замедляется, когда элемент выходит из края web ticker границы. | Пример |
Отображение
Отображение WebTicker очень многое зависит от вас или разработчика, однако WebTicker можно слегка и изменить
Как добавить бегущую строку новостей в WordPress
Вам нужно добавить бегущую строку новостей на свой сайт WordPress?
Вы часто увидите новостные ленты, используемые телевизионными сетями для освещения последних новостей. Вы можете добавить новостной тикер на свой веб-сайт, чтобы выделить специальные предложения или популярные сообщения.
В этой статье мы покажем вам, как добавить прокрутку новостей в WordPress.
Что такое Бегущая Строка Новостей?
Бегущая строка новостей непрерывно прокручивает одну строку информации по экрану. Обычно они отображают текущие новости, спортивные результаты, финансовую и валютную информацию в режиме реального времени, а также информацию о погоде.
Они являются отличным способом отображения небольших фрагментов информации, которые постоянно меняются. Вы обнаружите, что новостной тикер может отображать довольно много информации в ограниченном пространстве вашего блога WordPress.
Например, вы можете использовать тикер новостей для отображения ваших наиболее эффективных сообщений, товаров в вашем магазине, которые продаются, или любой другой информации, которую вы хотите выделить.
Еще один способ отображения такого типа информации на вашем веб-сайте-это липкая плавающая панель нижнего колонтитула.
С учетом сказанного давайте рассмотрим, как добавить прокручивающийся новостной тикер на ваш сайт WordPress.
Как добавить бегущую строку новостей в WordPress
Первое, что вам нужно сделать, это установить и активировать плагин Ditty News Ticker. Для получения более подробной информации ознакомьтесь с нашим пошаговым руководством по установке плагина WordPress.
После активации плагин добавляет пункт меню Тикера новостей в вашу админ-область WordPress.
Вам нужно перейти к ленте новостей » Добавить новое, чтобы добавить ленту новостей. На следующем экране у вас будет возможность присвоить этому конкретному тикеру новостей имя, текст тикера и ссылку.
Для каждого тикера вы можете добавить столько тиков, сколько захотите. Это отдельные части информации, которые вы хотите отобразить, и каждая из них может иметь свою собственную ссылку.
Если вы хотите добавить еще один элемент тикера, нажмите кнопку плюс + в правом верхнем углу текущего тикера. Будет добавлен новый элемент тикера.
Как только вы закончите добавлять элементы тикера, вам следует перейти на вкладку Режим тикера. Доступны три различных режима тикера: прокрутка, поворот и список.
Режим прокрутки является настройкой по умолчанию, поскольку он наиболее часто используется в телевизионных сетях. Поворот-еще один хороший вариант, если вы хотите показывать по одному тикеру за раз.
Настройки на остальной части страницы позволяют настроить поведение тикера новостей. Вы можете настроить скорость и направление прокрутки, переопределить размеры тикера по умолчанию и выбрать расстояние между каждым тиком.
Плагин генерирует шорткод, а также функцию PHP для каждого созданного вами новостного тикера. Вы можете либо добавить шорт-код в виджет сообщения, страницы, боковой панели, либо вы можете напрямую вставить функцию PHP в файлы тем.
Как только вы введете короткий код тикера или функцию PHP, вы сможете посетить свой веб-сайт, чтобы увидеть его в действии.
Мы надеемся, что этот урок помог вам узнать, как добавить прокрутку новостного тикера в WordPress.