Бегущая строка wordpress: Бегущая строка на WordPress – Бегущая строка на сайте с WordPress без плагинов

Leave a Comment / Разное / By /

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

 

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

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

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

:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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>

<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>

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

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

Это полезно знать:

на Ваш сайт.

WordPress plugin of Responsive marquee (ticker) for Text and HTML and Images или WordPress плагин бегущей строки для текста, кода или изображений

Описание

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

Особенности

  • Перетаскивание мышкой
  • Перетаскивание касанием пальца (на TOUCH устройствах)
  • Адаптируется под ширину экрана
  • Пауза и Пуск
  • Четыре направления движения (влево, вправо, вверх и вниз)
  • Паузы при наведении мышкой
  • Пауза при прокрутке страницы
  • Пауза при выходе за пределы экрана
  • Поддержка XML источника данных
  • Возможность дополнять содержание строки новым контентом прямо на ходу
  • Возможность изменять содержание строки прямо на ходу
  • Возможность автообновления данных
  • Множество функций обратного вызова
  • Удобная страница настроек всех параметров
  • Встроенные кнопки с shortcode прямо в текстовый редактор.
  • Круглосуточная поддержка.

Быстрый старт

Чтобы добавить WordPress плагин liMarqueeWP на сайт, вам нужно выполнить всего 3 шага:

  • 1. Установить плагин «liMarquee.zip» в панеле администрирования WordPress.
  • 2. Добавить HTML-код <div>content</div> в коде страницы сайта или шорткод [limarquee]content[/limarquee] в текстовом редакторе.
  • 3. Вызвать плагин, указав имя класса на странице настроек плагина или добавить код инициализации непосредственно на страницу сайта

Установка WordPress плагина liMarqueeWP

Документация

Изменения

v.1.1.1-6.0.5
— 05/07/2016 Fixed a bug when converting a string into a Boolean variable
v.6.0.5
— 23/06/2016 Added support desktop PC with a touch screen
v.6.0.4
— 23/06/2016 Added «stopOutScreen» parameter. This parameter specifies, the ticker will stop outside the screen or not
v.6.0.3
— 23/06/2016 Fixed page scrolling on touch devices
v.6.0.2
— 22/06/2016 Added «touchEvent» option on / off the drag to «touch» devices
— 22/06/2016 Added php7 support
v.6.0.1
— 18/06/2016 Improved smoothness of animation
v.6.0.0
— 28/05/2016 Simplified structure of the HTML code. Now is enough wrap the content by only one element. Attention! Those who are using earlier versions, you can to not change the HTML code!
— 28/05/2016 Simplified file structure.
— 28/05/2016 Added the ability to post on the page at the same time vertical and horizontal ticker.
v.5.7.4
— 13/05/2016 Fixed clickable child elements
v.5.7.3
— 26/04/2016 Changed example with HTML content
v.5.7.2
— 14/04/2016 Added new event «wayEnd()»
v.5.7.1
— 19/02/2016 Fixed Destroy method
— 19/02/2016 Added Destroy demo page
v.5.7
— 11/02/2016 Fixed work with empty string
v.5.6
— 26/01/2016 Fixed work with xml file
— 27/01/2016 In elements «.mItem» fixed css «display:inline-block» for IE7
v.5.5
— 06/01/2016 Added folder «quick_start»
— 06/01/2016 Added video «QUICK INSTALL PLUGIN»
v.5.4
— 23/12/2015 Fixed work with image content on touch devices
v.5.3
— 14/11/2015 Fixed work with hidden elements
— 14/11/2015 Added demo with Tabs
v.5.2
— 13/11/2015 Fixed click event on linked elements
— 13/11/2015 Fixed behavior of the image when you use bootstrap
v.5.1 — 09/11/2015 Fixed behavior when scroll event
v.5.0
— 10/10/2015 Optimized code (14KB to 10KB)
— 12/10/2015 Added touch events for Mobile devices
— 13/10/2015 Added new Options: width, height, scrollDelay, scrollAmount, scrollStop, startShow, removeContentFadeDuration
— 14/10/2015 Added new methods: getContent, addContent, removeContent, changeOptions, resetPosition
— 15/10/2015 Added new Events: create, moveStart, moveStop, drag, dragStart, dragStop
v.4.8
— 03/10/2015 Changed Event of Pause
— 04/10/2015 Added New Templates
v.4.7
— 28/09/2015 Fixed the starting position of a long string v.4.6
— 11/20/2014 Added methods & quot; pause & quot; and & quot; play & quot; to pause / start traffic line
— 10/30/2014 Added the ability to dynamically change the speed of the line (see demo: & quot; Change speed & quot;)
— 04/27/2014 Added method & quot; destroy & quot ;, which removes all the functionality running line item and returns to the state before initializing plug
— 03/30/2014 Posted cycling short line when you drag
— 03/30/2014 Fixed bug positioning long line when you drag
v.4.5
— 03/23/2014 Added lock random event & quot; click & quot;
v.4.4
— 02/09/2014 Added parameter & quot; inverthover & quot ;, which inverts the standard response to hovering over.
— 02/09/2014 Ipravlen bug when dragging a looped line
v.4.3
— 01/21/2014 Fixed speed calculation using the method & quot; update & quot;
v.4.2
— 04/12/2013 Added method & quot; update & quot ;, which updates the initialization string after changing the internal content
v.4.1
— 02/12/2013 Added the ability to load an XML file multi
v.4.0
— 11/22/2013 Added parameter & quot; hoverstop & quot ;. If the value is & quot; true & quot; — The line stops when the mouse (the default), & quot; false & quot; — The line does not stop
— 11/22/2013 Movement short line from right to left and top to bottom now starts correctly (movement starts from the opposite end of the line)
v.3.3
— 10.12.2013 Added ability to dynamically changing traffic line
v.3.2
— 07/09/2013 Added the ability to drag and drop a line image
— 07/09/2013 Fixed a bug when you drag the line (when the mouse while holding LM went beyond the line)
— 06/09/2013 Added the example of HTML blocks
v.3.1
— 30.07.2013 Added horizontal movement the right direction: ‘right’
v.3.0
— 05/24/2013 Posted movement vertically downward direction: ‘down’
— 05/17/2013 Added ability podgruzki text from xml file
v.2.0
— 20.02.2013 Fixed bug in a continuous line, which led to an unexpected acceleration ticker
— 01/26/2013 Added the possibility of motion-controlled short-line (option: & quot; runshort & quot ;, values: & quot; true & quot; or & quot; false & quot;)
— 22.01.2013 ?2 — Fix for slow internet. In HTML, the recommended element immediately build upon the class of & quot; str_wrap & quot ;. The file itself liMarquee.css for it was little changed
— 22.01.2013 ?1 — Fix for IE9. With version jQuery 1.8 does not function $ (window) .load () — This bug is addressed in version 1.9.0, so the script is included, along with jquery version 1.9.0

Ditty News Ticker — Плагин для WordPress

Ditty News Ticker is a multi-functional data display plugin. Easily add custom news tickers to your site either through shortcodes, direct functions, or in a custom Ditty News Ticker Widget.

There are 3 default ticker modes
  • Scroll Mode — Scroll the ticker data left, right, up or down
  • Rotate Mode — Rotate through the ticker data
  • List Mode — Display your ticker data in a list

View samples of each mode.

Ditty News Ticker is built to easily be extended to add extra Ticker Types and extra Ticker Modes. We currently have the following extensions for sale:

We now also offer an extensions bundle that includes all current and future extensions!

  1. Upload ditty-news-ticker directory to the /wp-content/plugins/ directory
  2. Активируйте плагин используя меню ‘Плагины’ в WordPress
  3. Create tickers by going to News Tickers > Add New
  4. Insert your tickers by copying and pasting the provided shortcode into another post.
  5. Optionally, insert your tickers by copying and pasting the direct function code directly into your theme or plugin.

View full help documentation.

Are there any settings I need to configure?

Each individual Ticker post has multiple settings to customize.

I have added my shortcode but the ticker is not displaying

The most common cause for an unresponsive ticker (when using scroll or rotate mode) is a javascript error on your site coming from another plugin or theme. Any type of javascript error will most likely kill any other javascript that is loaded after it. You will need to resolve any javascript errors before the ticker will start running.

View full help documentation.

Very impressed with the very specific point-to-point response. Metaphor Creations is sincerely dedicated to providing good products. My best wishes to their every endeavour. (Had approached them concerning the DITTY NEWS TICKER)

great and very useful plugin. i love it. the Ditty News Ticker it can be used in many different scenarios and situations: I love the bunch of possible things and features that we have with the Ditty News Ticker. i have looked for something similar for a very long time. Finally if found the Ditty News Ticker; It fulfills my needs. It is a multi-functional data display plugin. Easily add custom news tickers to your site either through shortcodes, direct functions, or in a custom Ditty News Ticker Widget. There are 3 default ticker modes Scroll Mode – Scroll the ticker data left, right, up or down Rotate Mode – Rotate through the ticker data List Mode – Display your ticker data in a list great: the usage: This plugin does exactly what it says in the manual. — Lots of features and easily integrates with other WP features.- And what is one of the nicest thing -.. if it comes to support — The developer is very responsive in the Support section. He helps whereever he can. To sume up: This is just what I was looking for! Excellent piece of work, many thanks. Keep up the great work — and i am pretty sure that you get more and more user and friends all over the globe! It rocks!! — thanks for all you did! -< opensource rocks!!

The only feature you’ll have is you can manually insert custom static texts and their URL.

The plugin is very useful and allows different customizations. Highly recommended.

The best news ticker available, work great with great support

I love this great plugin, thanks to the developer. Highly recommended

Посмотреть все 67 отзывов

«Ditty News Ticker» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

Участники

Как сделать на сайте бегущую строку | History-of-Blog.ru

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

Здравствуйте уважаемые посетители блога history-of-blog.ru. Сегодня мы научимся делать на сайте бегущую строку при помощи html тега marquee. Так как мы не прибегнем к каким-либо скриптам или плагинам, бегущая строка совершенно не будет грузить сайт. С помощью данного приема можно не только разнообразить блог, но и эффективно провести рекламу чего-либо, ведь в бегущую строку можно вставлять не только текст, но и картинки с ссылками. В общем применение найдется.

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

Прежде чем приводить примеры и давать коды, нужно уяснить как и куда потребуется вставлять код.

Куда:

  • Бегущую строку можно вставить в статью.
  • Можно сделать бегущую строчку прямо частью шаблона, для этого нужно добавить код в нужный файл Вашего шаблона, в зависимости от того, где мы хотим видеть бегущую строку.

Как:

  • При написании статьи необходимо переключиться в HTML-редактор и именно в нем вставлять необходимый код (примеры кодов Вы можете посмотреть ниже). Внимание! При обратном переключении в визуальный редактор тег marquee обрезается, поэтому лучше сначала написать статью, а уже затем обозначить в ней бегущую строку.

  • Если Вы хотите вывести бегущую строку например в шапке, то необходимо вставить код в файл header.php, если в подвал сайта, то в footer.php и т.д. Для этого нужно переключиться в режим редактирования файлов темы (Дизайн -> Редактор) и вносить изменения в нужном файле.

Итак, с тем куда и как можно вставлять код на сайт разобрались, теперь давайте определимся как будет выглядеть бегущая строка.

Код бегущей строки для сайта

1 пример.

Самый простой код бегущей строки для сайта – это необходимые слова, заключенные в тег  marquee. То есть вот так:

<marquee>
<a title="Финстрип за Июнь’12" href="http://history-of-blog.ru/finstripy/finstrip-za-iyun12/" target="_blank">В Июне я заработал более 7'000 в интернете</a>
</marquee>

Как мы видим я вставил в бегущую строку ссылку. Вы же можете вставить как обычный текст, так и текст с ссылкой.

Вот что получилось:

В Июне я заработал более 7’000 в интернете

2 пример.

Пример:


Бегущая строка с шириной, высотой, фоном, направлением и скоростью

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

<marquee bgcolor="#f2f2f2" direction="up" scrollAmount="2">
Бегущая строка с шириной, высотой, фоном, направлением и скоростью
</marquee>
  • width – это ширина. Сейчас она фиксированная и составляет 550 пикселей. Если не прописывать этот параметр, то бегущая строка будет занимать всю возможную ширину, например если вставлять ее в статью, то она будет занимать ровно столько же, сколько и отведено для основного контента.
  • height – высота в пикселях. В данном случае 55.
  • bgcolor – фоновый цвет.
  • direction – направление движения. Возможные варианты: up – снизу вверх, down – сверху вниз, right – слева направо, left – справа налево (по-умолчанию).
  • scrollAmount – скорость бегущей строки. Чем больше цифра, тем больше скорость.

Так же стоить отметить еще один параметр, который может быть полезен:

  • behavior – задает тип движения. Возможные варианты: alternate – перемещение между левой и правой границами, slide – строчка перемещается так, как это задано атрибутом direction, однако дойдя до края останавливается.

3 пример.

Можно сделать бегущую строку с картинкой или с картинкой и текстом:


Надеюсь статья была Вам полезна!

Для этого нужно вставить html код картинки внутрь тега marquee:


<marquee>
<img title="Все о создании, продвижении и заработке на блоге. На практике" src="http://history-of-blog.ru/wp-content/themes/styler/images/logo-raskrutka-bloga.png"/>Надеюсь статья была Вам полезна!
</marquee>

Примечание: можно вставить анимированную картинку – тогда бегущая строка на сайте будет смотреться очень эффектно!

Похожие статьи:

Комментировать через ВКонтакте:

Плагин Horizontal scrolling announcement

Рекламная бегущая строка для ВордПресс с помощью плагина Horizontal scrolling announcement

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

Легкий плагин Horizontal scrolling announcement не занимает много ресурсов, легко настраивается и позволит отследить время показа для оплаченной рекламы.

управление Horizontal scrolling announcement

Самый простой способ, это разместить готовый виджет в сайдбаре. Установив и активировав плагин Horizontal scrolling announcement, нужно, конечно же, написать сами рекламные объявления.

Виджет Horizontal scrolling announcement

  • В админке ВордПресс в параметрах в меню Horizontal scrolling announcement в поле announcement пишем свое объявление.
  • В поле Enter target link прописываем, куда должна вести ссылка этого объявления
  • Статус: показывать объявление
  • Порядок показа объявлений
  • Объявления можно объединять по разным группам
  • Указать дату действия показа объявления в формате год-месяц-день
  • Принять исправления (сохранить)

настройки Horizontal scrolling announcement

Для размещения объявления на определенной странице, записи, или даже в самом шаблоне, например, в шапке сайта, предусмотрен шорткод. К сожалению, после обновления плагина такое размещение не привело к показу объявления, поэтому пока давать не буду. Но в виджете довольно просто и наглядно использовать самые разные «бегущие строчки».

Если вы практикуете платные рекламные объявления, размещение на определенное время, то с таким плагином будет удобно не только размещать, но и вовремя убирать оплаченную рекламу.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *