Плагин бегущая строка на сайт WordPress
Прибамбасы для сайта
Привет! Ditty News Ticker — отличный плагин для создания бегущей строки на wordpress сайте. Бегущую строку вы сможете вставить в любое место на вашем сайте, с помощью шорткода или php кода. Вы сможете вставлять в бегущую строку не только обычный текст, но и медиафайлы. Плагин имеет достаточно простые и понятные настройки, по крайней мере для меня, если вы новичок, то данная инструкция вам в помощь. Установить плагин вы сможете прямо из админ-панели wordpress. Перейдите по вкладке: Плагины — Добавить новый , введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.
После установки и активации плагина, чтобы создать бегущую строку, перейдите по вкладке: News Tickers — Add New .
На странице создание бегущей строки, укажите название бегущей строки. Чтобы добавить новый текст в бегущую строку, нажмите на плюсик , в правой части окна. Чтобы создать бегущую строку, нажмите на кнопку — Опубликовать . Для сохранения изменений в бегущей строке, нажмите вверху на кнопку — UPDATE .
— TICKER TEXT, укажите здесь текст бегущей строки.
— LINK, укажите ссылку для текста.
— TARGET, выберите в каком окне будет открываться ссылка, blank — в новом окне, self — в том же окне.
Далее, перейдите на страницу — Settings и поставьте галочку в значении — Visual EditorUse the visual editor to create tick contents . Сохраните изменения.
После чего снова зайдите на страницу создания бегущей строки или откройте для редактирования уже созданную. Теперь вы сможете создавать бегущую строку с помощью визуального редактора.
После создания бегущей строки, скопируйте шорткод или php код бегущей строки, в зависимости от того куда вы хотите вставить бегущую строку. Шорткод можно вставить на страницу, в запись, в виджет Текст или в виджет визуальный редактор, если он у вас есть. PHP код можно вставлять в php файлы, например в footer.php подвал сайта или header.php шапка сайта, самый верх.
Например, скопируйте шорткод бегущей строки, вставьте шорткод на страницу создания записи или страницы.
На сайте у вас будет отображаться бегущая строка.
Если что-то не понятно по настройкам или есть вопросы по дополнительным настройкам, которые я не стал разбирать, то оставьте комментарий к данной записи.
Красивая бегущая строка в 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
Задаём конфигурацию например:
Вариантов оформления и вывода новостей море, можно замедлить в необходимых местах или ускорить, пошаговый вывод и т.д. Подробнее почитайте в интернете, статей куча. Основывается способ на связке двух стилей 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 и плагин, выбирайте подходящий, вещь необходимая в рекламе и притягивающая внимание.
Нажмите, пожалуйста, на одну из кнопок, чтобы узнать понравилась статья или нет.
Как делается бегущая строка WordPress? Узнай сейчас и сделай на своем сайте!
Сегодня я вам расскажу и покажу, как делается бегущая строка WordPress. И Вы узнаете из этой статьи, как самому быстро сделать бегущую строку на WordPress сайте с применением плагина и без плагина, на простом HTML коде.
Не буду Вас томить ожиданиями и длинными предисловиями, о том зачем нужна бегущая строка wordpress, для чего ее используют на сайтах и как она может быть полезна в рекламных целях на вашем ресурсе. Вы и сами наверное знаете уже, раз попали на мой блог и именно на данный материал по созданию бегущей строки wordpress.
Как и обещал в начале материала, начну свой рассказ с создания бегущей строки wordpress при помощи плагина …
Как создать бегущую строку на WordPress используя специальный плагин?
Как всегда, все довольно просто и быстро делается на движке WordPress!
Для того, чтобы наша строка начала двигаться (бежать) и чтобы она не просто бежала, а бежала в нужном нам месте нашего сайта. Для этого нужно всего лишь использовать специальный плагин, который называется – Ditty News Ticker
Установка его происходит на сайте в штатном режиме, то есть Вы можете скачать его с официального сайта WordPress вот по этой ссылке – Скачать плагин Ditty News Ticker.
Или можете просто взять и поместить название плагина в строку поиска плагинов у себя на сайте в админке. И этот плагин быстро найдется, затем нажмите “установить” и “активировать” его. И ваш уже установленный и активированный плагин Ditty News Ticker – готов к использованию.
Ditty News Ticker
После установки и активации плагина нужно зайти в настройки плагина во вкладку Add New:
add new
Стрелками указаны пункты, которые Вы должны выполнить для того, чтобы бегущая строка wordpress у Вас заработала на сайте:
- Заполните поле “Заголовок” вашей первой бегущей строки WordPress
- Нажмите на плюсик справа, чтобы можно было ввести свой текст
- Введите текст своей бегущей строки WordPress в появившемся редакторе
- Теперь можно добавить ссылку в вашу бегущую строку WordPress, если это необходимо. Для этого есть поле ниже
- Затем опубликуйте вашу бегущую строку
Теперь в админке найдите вкладку “Settings” и поставьте галочку как на скриншоте и сохраните изменения:
settings
Следующий шаг – это найти в админке вкладку “News Tickers” и перейти по ней. Попадете на страничку, где уже Вы сможете скопировать готовый шорткод вашей бегущей строки:
News Tickers
Вставьте его в нужное место в вашей записи и наслаждайтесь своей новой бегущей строкой!
Также Вы можете скопировать php код, который можно вставить в свою тему оформления сайта, например в файл header или другое место, где вам нужно чтобы выводилась ваша бегущая строка wordpress. Это на ваше усмотрение.
О том как делается бегущая строка wordpress без использования плагина, я уже писал в своей статье вот здесь. Смотрите и делайте бегущую строку на простом html коде!
На этом позвольте закончить свой рассказ и по прощаться. До свидания! До новых встреч! Всем удачи и благополучия!