Бегущая строка на WordPress

 

Создать бегущую строку на сайте WordPress довольно просто. Для реализации подобной идеи понадобится тег . Этот тег будет работать не только на сайтах WordPress, но и на большинстве других существующих сайтов независимо от CMS. В данной статье я приведу несколько примеров бегущих строк, а также изображений и, соответственно, опубликую готовые скрипты.

Итак, приступим:

Самый простой способ сделать бегущую строку - окружить текст тегами <marquee></marquee>

:

Бегущая строка на WordPress

Соответственно код будет выглядеть так:

<marquee>Бегущая строка на Wordpress</marquee>

В данный код мы можем вставить html, а соответственно, любые изображения в любом порядке, прикрепив к ним любые необходимые ссылки!

Для того, чтобы задать скорость прокрутки, необходимо немного дописать код:

Бегущая строка на WordPress

Теперь он будет выглядеть так:

<marquee scrollamount='2'>Бегущая строка на Wordpress</marquee>

Где значение scrollamount отвечает за скорость, чем оно выше - тем быстрее будет двигаться ваша бегущая строка!

Изменить направление движения можно добавлением нового параметра:

Бегущая строка на WordPress

<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">&nbsp;<img src="http://site-s-nulya.ru/wp-content/uploads/2014/01/Begushhaya-stroka-sayta-Wordpress.jpg"></marquee>

По аналогии можете вставить ссылки на собственные изображения, а также изменить любые параметры в соответствии со своими предпочтениями!

Если по каким-то причинам вам не удалось создать бегущую строку или возникли сложности - обязательно пишите в комментариях, будем разбираться вместе!

Вы можете оставить комментарий, или ссылку на Ваш сайт.

20 комментариев к записи “Бегущая строка на WordPress”

  1. Василий:

    Как изменить цвет шрифта, например на белый?

  2. Василий:

    Разобрался 🙂

  3. Андрей:

    Здравствуйте, подскажите как изменить размер шрифта в бегущей строке?
    Что добавить к коду Здесь может быть ваша реклама?

    • В комментариях не возможно публиковать html код в целях безопасности. Видимо вам нужен следующий код:

      <marquee direction="left" scrollamount='4'><h4><span style="color: #DBBB11;">Здесь может быть ваша реклама</h4></marquee>

      Здесь может быть ваша реклама


      Размер шрифта, в данном случае, проще всего регулировать изменениями тега

      <h4></h4>

      , изменяя данный тег на

      <h3></h3>
      <h5></h5>

      , в общем, от 1 до 6. Если требуется более точная настройка размера шрифта, можно задать дополнительные css стили.

  4. А как ее сделать над окном комментария? В шаблоне куда вставлять?

    • Для того, чтобы вставить бегущую строку именно над окном комментария, необходимо править файлы WordPress, соответственно, обновление этих файлов нужно будет запретить, что может привести к нежелательным последствиям. Чтобы вставить непосредственно над формой комментариев, нужно перейти в админ-панели вашего сайта на вкладку «Внешний вид» — «Редактор» , выбрать файл single.php для записей и page.php для страниц, найти строчку отвечающую за вывод стандартных комментариев, как правило она выглядит так:

      <?php comments_template(); ?>

      и над ней вставить код бегущей строки, после чего нажать кнопку «Обновить файл» .

  5. Здравствуйте. Можно ли сделать так чтоб картинки не прерывались, а прокручивались по кругу, за последней снова первая.( может в примере так и есть, просто не понятно..) И ещё вопрос: как прописать в картинки ссылки на разные статьи блога?

  6. wandrys:

    Уважаемые! Подскажите кто знает — как сделать бегущую строку на фоне статичного изображения?
    Вот на этом сайте реализовано:
    http://www.platina-kostroma.ru

    Гугл и Яндекс бессильны.

  7. Нигде не могу увидеть как остановить бегущую строку при наведении на него мыши

  8. Андрей:

    Здравствуйте.
    Подскажите пожалуйста, как мне сделать сайт объявлений на вордпресс. Нужно чтобы можно было настроить поддомены для регионов. (чтобы присвоить в яндексе регион). Вот нашел одну доску объявлений http://moskva.biglus.com/ с регионами, подскажите какой шаблон или плагин тут используется, нужно именно, чтобы поддомены работали как в указанном сайте. Я находил плагин для создания поддоменов, но там только для категорий, тоесть из категорий создаются поддомены, а мне так не нужно.

  9. Сосновоборск:

    А как сделать чтобы в бегущей строке прокручивались названия последних добавленных статей? Заранее благодарен за ответ!

  10. Ксения:

    Здравствуйте! Подскажите, на сайте так и не отображается бегущая строка, она статична, может, что-то еще нужно сделать? И тэгами фраза окружена, но при сохранении они исчезают, остается просто надпись. Заранее спасибо!

  11. gazung:

    Делал я бегущую строку с тэгом marquee. Работает. Эксперементировал с боковой колонкой. Получался и текст и изображения тоже. В заглавия статей ставил. Все хорошо, но… Когда установил карту сайта, то тэги вылезли в названиях страниц. Конечно быстро и просто. Сейчас пробую с плагином ditty news ticker. Увы у этого метода тоже есть недостаток. Плагины тормозят скорость загрузки сайта. Автору спасибо большое. Именно по этой статья я научился делать бегущие строки.

  12. Артём:

    Здравствуйте, как называется тема вашего сайта?

  13. Олег:

    Присоединяюсь к предыдущему комментатору: как сделать чтобы в бегущей строке прокручивались названия последних добавленных статей? И, кроме того, как и куда, пардон, вставить тег в код… Спасибо.

  14. VicKey:

    Как сделать, что б строка показывала заголовки статей и по очереди в WordPress??

  15. Майский:

    Здравствуйте.
    Спасибо за такую хорошую статью.Бегущая строка получилась сразу,изменил цвет и размер шрифта, все получилось.На предосмотре в черновике бежала. Статью дописал,а текстовый редактор автоматически видоизменяется код и строка перестаёт бежать. Почему?
    Всю статью надо писать только в текстовом редакторе?
    Спасибо.

  16. Михаил:

    Здравствуйте!
    Почему WordPress обрезает тег — ? Ставлю Ваш код (Бегущая строка на WordPress), сохраняю. Пред просмотр… Срока на двигается. Возвращаюсь в админку, тег — нет, осталось только текст «Бегущая строка на WordPress».

Оставить комментарий

Яндекс.Метрика