29 января, 2014 
admin Создать бегущую строку на сайте WordPress довольно просто. Для реализации подобной идеи понадобится тег . Этот тег будет работать не только на сайтах WordPress, но и на большинстве других существующих сайтов независимо от CMS. В данной статье я приведу несколько примеров бегущих строк, а также изображений и, соответственно, опубликую готовые скрипты.
Итак, приступим:
Самый простой способ сделать бегущую строку - окружить текст тегами <marquee></marquee>
:
Соответственно код будет выглядеть так:
<marquee>Бегущая строка на Wordpress</marquee> |
В данный код мы можем вставить html, а соответственно, любые изображения в любом порядке, прикрепив к ним любые необходимые ссылки!
Для того, чтобы задать скорость прокрутки, необходимо немного дописать код:
Теперь он будет выглядеть так:
<marquee scrollamount='2'>Бегущая строка на Wordpress</marquee> |
Где значение scrollamount отвечает за скорость, чем оно выше - тем быстрее будет двигаться ваша бегущая строка!
Изменить направление движения можно добавлением нового параметра:
<marquee direction="right" scrollamount='2'>Бегущая строка на Wordpress</marquee> |
Как вы уже догадались, параметр direction="right" отвечает за направление прокрутки!
Таким образом, можно запросто создать прокрутку любого текста, объявлений, баннеров и многого другого! Напоследок предоставлю вам код скроллинга первого изображения в начале статьи:
<marquee direction="left"scrollamount='5'><img src="http://site-s-nulya.ru/wp-content/uploads/2014/01/Begushhaya-stroka-na-Wordpress.jpg"> <img src="http://site-s-nulya.ru/wp-content/uploads/2014/01/Begushhaya-stroka-sayta-Wordpress.jpg"></marquee> |
По аналогии можете вставить ссылки на собственные изображения, а также изменить любые параметры в соответствии со своими предпочтениями!
Если по каким-то причинам вам не удалось создать бегущую строку или возникли сложности - обязательно пишите в комментариях, будем разбираться вместе!
Опубликовано в рубрике 
Метки:
Как изменить цвет шрифта, например на белый?
Разобрался 🙂
Здравствуйте, подскажите как изменить размер шрифта в бегущей строке?
Что добавить к коду Здесь может быть ваша реклама?
В комментариях не возможно публиковать html код в целях безопасности. Видимо вам нужен следующий код:
Здесь может быть ваша реклама
Размер шрифта, в данном случае, проще всего регулировать изменениями тега
, изменяя данный тег на
, в общем, от 1 до 6. Если требуется более точная настройка размера шрифта, можно задать дополнительные css стили.
А как ее сделать над окном комментария? В шаблоне куда вставлять?
Для того, чтобы вставить бегущую строку именно над окном комментария, необходимо править файлы WordPress, соответственно, обновление этих файлов нужно будет запретить, что может привести к нежелательным последствиям. Чтобы вставить непосредственно над формой комментариев, нужно перейти в админ-панели вашего сайта на вкладку «Внешний вид» — «Редактор» , выбрать файл single.php для записей и page.php для страниц, найти строчку отвечающую за вывод стандартных комментариев, как правило она выглядит так:
и над ней вставить код бегущей строки, после чего нажать кнопку «Обновить файл» .
Здравствуйте. Можно ли сделать так чтоб картинки не прерывались, а прокручивались по кругу, за последней снова первая.( может в примере так и есть, просто не понятно..) И ещё вопрос: как прописать в картинки ссылки на разные статьи блога?
Уважаемые! Подскажите кто знает — как сделать бегущую строку на фоне статичного изображения?
Вот на этом сайте реализовано:
Гугл и Яндекс бессильны.
Здравствуйте, думаю вам поможет эта статья: Фоновое изображение в тексте WordPress
Нигде не могу увидеть как остановить бегущую строку при наведении на него мыши
Здравствуйте.
Подскажите пожалуйста, как мне сделать сайт объявлений на вордпресс. Нужно чтобы можно было настроить поддомены для регионов. (чтобы присвоить в яндексе регион). Вот нашел одну доску объявлений с регионами, подскажите какой шаблон или плагин тут используется, нужно именно, чтобы поддомены работали как в указанном сайте. Я находил плагин для создания поддоменов, но там только для категорий, тоесть из категорий создаются поддомены, а мне так не нужно.
А как сделать чтобы в бегущей строке прокручивались названия последних добавленных статей? Заранее благодарен за ответ!
Здравствуйте! Подскажите, на сайте так и не отображается бегущая строка, она статична, может, что-то еще нужно сделать? И тэгами фраза окружена, но при сохранении они исчезают, остается просто надпись. Заранее спасибо!
Делал я бегущую строку с тэгом marquee. Работает. Эксперементировал с боковой колонкой. Получался и текст и изображения тоже. В заглавия статей ставил. Все хорошо, но… Когда установил карту сайта, то тэги вылезли в названиях страниц. Конечно быстро и просто. Сейчас пробую с плагином ditty news ticker. Увы у этого метода тоже есть недостаток. Плагины тормозят скорость загрузки сайта. Автору спасибо большое. Именно по этой статья я научился делать бегущие строки.
Здравствуйте, как называется тема вашего сайта?
Присоединяюсь к предыдущему комментатору: как сделать чтобы в бегущей строке прокручивались названия последних добавленных статей? И, кроме того, как и куда, пардон, вставить тег в код… Спасибо.
Олег, пишите, если придумали как это сделать: super.inetmaster@yandex.ru
Будем экспериментировать. Если что-то получится, надо будет с людьми поделиться 🙂
Как сделать, что б строка показывала заголовки статей и по очереди в WordPress??
Здравствуйте.
Спасибо за такую хорошую статью.Бегущая строка получилась сразу,изменил цвет и размер шрифта, все получилось.На предосмотре в черновике бежала. Статью дописал,а текстовый редактор автоматически видоизменяется код и строка перестаёт бежать. Почему?
Всю статью надо писать только в текстовом редакторе?
Спасибо.
Здравствуйте!
Почему WordPress обрезает тег — ? Ставлю Ваш код (Бегущая строка на WordPress), сохраняю. Пред просмотр… Срока на двигается. Возвращаюсь в админку, тег — нет, осталось только текст «Бегущая строка на WordPress».
Этот тег не входит в спецификацию HTML и его наличие приведет к невалидному коду. Поэтому WP обрезает код.Следует применять анимацию.