Как сделать бегущую строку на сайте WordPress

Давно на блоге не появлялись статей на чисто практические темы с использованием html и php. Поэтому, в этом посте я расскажу и покажу вам на конкретных примерах, как сделать бегущую строку на сайте или WordPress блоге без плагинов с использованием html тегов. Этот разговор я завел не случайно, ведь интернет ресурсы создаются для заработка, а сделанная бегущая строка на сайте является эффективным инструментом трансляции рекламы (для заработка), объектом для внимания и выделения главных мыслей.

Помимо этого она совершенно не нагружает WordPress блог, то есть не оказывает влияние на скорость загрузки страницы. После прочтения данного поста вы сможете сделать бегущую строку на сайте или WordPress блоге практически любой сложности.

Как сделать бегущую строку на сайте

Расскажу и наглядно покажу несколько способов того, как сделать и вставить бегущую строку. Каждый последующий будет чуть сложнее предыдущего, отличия друг от друга будут заметны в функциональных возможностях. Не будем терять время, а приступим к практике.

Код бегущей строки. Способ №1

Данный метод является самым простым, так как бегущая строка будет содержать в себе только текст. Все что выделено синим цветом заменяется на ваше усмотрение. Пример кода:

<marquee>
Пример_текста
</marquee>

Пример:

Привет, товарищи!

Для размещения в ней ссылки, опубликуйте код следующего вида:

<marquee>
<a title=«Как сделать форму обратной связи без плагинов» href=«http://disseo.ru/sozdanie-bloga/forma-obratnoj-svyazi-bez-plaginov.html»> Форма обратной связи без плагинов
</marquee>

Пример:

Форма обратной связи без плагинов

Код бегущей строки. Способ №2

Второй вариант чуть посложнее, но более функциональнее. В этом коде мы постараемся сделать так, чтобы бегущая строка на сайте отображала не только текст, но и картинку. Для этого в дальнейшем оперируйте этим скриптом:

<marquee>
<img title=«Все о создании, оптимизации и раскрутке WordPress блога» src="http://disseo.ru/wp-content/plugins/share-buttons/upload/uploads/logo.png"/>Успехов в работе!
</marquee>

Пример:

Успехов в работе!

На изображении ниже, можно увидеть атрибуты, которые прописываются внутри первого тега <marquee> для улучшения внешнего вида бегущей строки.

Как сделать бегущую строку на сайт WordPress

Куда и как вставить бегущую строку на сайт

Вставить бегущую строку на сайт можно тремя различными способами способами:

В статью. Она будет функционировать только в том месте статьи, в котором мы ее разместим. Вставлять необходимо в режиме Html, точно так же как показано на изображении ниже.

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

Шаблон. Можно вставить бегущую строку в WordPress шаблон, чтобы она работала вне зависимости от того, какую из страниц мы просматриваем. Для этого используются файлы темы WordPress — это header.php и Footer.php.

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

Боковая панель. Аналогичен второму, только вставка кода осуществляется в одном или нескольких виджетах (боковой панели). Обратите внимание на картинку ниже.

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

Какой способ размещения или вставки использовать на практике, решать вам. Если возникнут вопросы, то задавайте их в комментариях, чтобы другие пользователи находили ответ. На этом наш урок закончен, не забывайте подписываться на обновление блога в форме расположенной ниже, чтобы получать свежие статьи на E-mail.

С уважением, Дороднов Иван

Поделиться в соц. сетях

0

Получайте свежие посты прямо на E-mail: