Динамический ротатор баннеров на блог
Опубликовано: 05.09.2018
Здравствуйте, уважаемые читатели моего блога. Сегодня я хочу рассказать о том, как можно поставить себе на блог, в боковую колонку, динамичный ротатор баннеров . Все мы видели статичные ротаторы – это когда при загрузке страницы выводится один случайный баннер, и сменяется он только если перезагрузить страницу. То есть, в одном месте на любой странице посетитель может видеть только один баннер.
Динамический ротатор работает по другому. Он постоянно меняет картинки, даже если страница уже загружена. Так посетителю можно показать сразу несколько баннеров. Такой подход мне нравится больше, а причины я бы назвал такие:
Большинство посетителей приходит из поисковиков, читает одну страницу и уходит. Даже если бы такой человек заинтересовался одним из баннеров в вашем наборе, он его может просто не увидеть, если ротатор статический. Динамически меняющиеся картинки привлекают к себе больше внимания, чем неподвижные. Их трудно не заметить во время эффектной смены баннеров, и обычно просматривается вся серия картинок – срабатывает обычное человеческое любопытство “а вдруг на следующей картинке есть что-то интересное”. А пока посетитель их рассматривает, время идет – это польза для сайта. Экономится место, т.к. в одном месте можно показать сразу много баннеров, а не растягивать их по одному. Установить такой ротатор очень просто.Есть и недостатки, но я бы не сказал. что они очень большие, т.к. легко решаются:
Баннер ротатор, плагин для Wordpress
Загружаются все баннеры из показываемого набора, а много графики замедляют скорость загрузки блога в целом. Проблему можно решить оптимизацией баннеров в формате JPG, переводом из “тяжелого” формата PNG в формат JPG и опять-таки оптимизацией картинки. Про это я уже писал, почитайте . Исходный баннер в 150 кб легко можно уменьшить до 25-40 кб без потери качества. “Мельтешение” картинок, которое может раздражать посетителей – на самом деле эта проблема может быть, если баннеры будут меняться каждую секунду. Здесь просто нужно настроить оптимальное время смены – 3-5 секунд вполне хорошо, и картинки не отвлекают, и во время беглого просмотра страницы посетитель заметит пару таких циклов.
Вот, о достоинствах и недостатках сказал, теперь можете решать, надо вам такой ротатор или нет. Если надо, читайте дальше, расскажу, как его сделать одним из способов.
Установка баннера на курс Евгения Попова. Академия 3Steam
На самом деле динамический ротатор баннеров – это не что иное, как обычный слайдер, которые часто можно встретить на разных сайтах. Их обычно ставят в шапке или еще где-то вверху, но ведь никто не запрещает поставить такую штуку и в боковую колонку… В итоге мы просто получим слайдер, который будет “крутить” наши баннеры по кругу, и при этом еще можно настроить разные эффекты, добавить переключатели и прочие красивости и удобства.
Вставить слайдер на блог можно самыми разными способами – подключить разные библиотеки, скрипты и прочее. Это дело сложное для тех, кто плохо разбирается в коде сайта. Но можно просто взять готовый плагин для WordPress-а и подключить его – тогда ротатор можно получить уже через пару минут. Плагинов таких есть огромное количество, но не все они подходят именно для боковой колонки – то плохо вписываются, то имеют много лишнего или сложного в настройках. Я пробовал разные и понравились мне всего два таких плагина – Meteor Slides и Weptile Image Slider Widget. Дальше речь пойдет о втором из них, т.к. он более гибкий в использовании.
Устанавливаем плагин
Здесь все просто, долго рассказывать и нечего. идем в админку блога, в раздел “ Плагины ” – “ Установить новый ” и в поиске вписываем название плагина — Weptile Image Slider Widget . Поиск нам его услужливо находит:
Устанавливаем, активируем… Все, осталось настроить.
Устанавливаем ротатор баннеров в сайдбар
Плагин Weptile Image Slider Widget хорош тем, что он создает готовый виджет, который просто нужно добавить в сайдбар блога. Идем в админке в “ Внешний вид ” – “ Виджеты ”, и простым перемещением устанавливаем нужный виджет в то место. где мы хотим видеть ротатор баннеров.
Теперь посмотрим, какие настройки есть у нашего ротатора, а потом добавим в него сами баннеры. Просто разверните добавленный виджет и увидите там все настройки:
Самые важные места я отметил рамкой. Что они значат?
Title – заголовок, который будет вверху виджета. Width, height – высота и ширина баннеров. Желательно заранее сделать размеры картинок одинаковыми и здесь указать их. Responsive – я не выделил этот параметр, но он может пригодиться, если размеры картинок разные. Если включить эту галочку, то размер баннера будет пропорционально меняться, чтобы вписаться в указанные высоту и ширину. Directional Navigation – если включить, то при наведении курсора на баннере появятся стрелки “Вперед” и “Назад”, для перелистывания вручную. Pause on mouse over – если включить, то ротация остановится. если на баннер навести мышку. Если убрать – возобновится.Дальше, в разделе Transition, настройки самого слайдера:
Effects – тип эффекта смены баннеров. По умолчанию стоит Fade – плавный переход. Там есть еще разные эффекты. Можно поставить и Random – случайный эффект. Speed – скорость, с которой появляется новый баннер, в миллисекундах. Duration – время задержки, то есть сколько времени будет показываться каждая картинка. Указывается в миллисекундах. Например, 4000 ms – это 4 секунды, 1000 ms – 1 секунда. Кнопка Upload or Pick Image – загрузить или выбрать картинки для ротации.Поставив настройки, как на скриншоте (или на свое усмотрение), можно нажать кнопку внизу и перейти к добавлению баннеров.
Добавляем баннеры в ротатор
Для этого служит кнопка “Upload or Pick Image”. Нажмем на нее и увидим стандартное окно WordPress-а для выбора или загрузки картинок.
Думаю, с этим проблем у вас не возникнет – точно так же вы вставляете картинки в свои посты – загружаете с компьютера или выбираете среди уже загруженных картинок. Единственная разница – когда выберите нужную картинку, нужно будет нажать кнопку “Send Image to Weptile Slider Widget”:
Таким образом и добавляем все нужные баннеры по очереди. Они появляются в нашем виджете, внизу. в виде списка. Наведя мышку на любую картинку, мы увидим надпись Detail, нажав на которую можно указать ссылку дляя нашего баннера (какой же рекламный баннер без ссылки!):
Как видите, здесь можно не только указать ссылку с баннера, но есть и другие полезные вещи:
Remove Image – удалить картинку из ротатора. Link’s Target – можно указать поведение ссылки. По умолчанию – “Открывать в новой вкладке”. Link’s Rel – здесь в списке, как видно на скриншоте, можно закрыть ссылку тегом nofollow – полезная штука. Остальные два поля – подпись для картинки и альтернативное название (при наведении мышки). Их можно не указывать.Добавив все нужные баннеры и указав для каждого ссылку, можно нажать кнопку “Сохранить” и все – можно смотреть на блоге, что получилось.
Большое достоинство плагина Weptile Image Slider Widget – можно добавлять несколько такизх виджетов-слайдеров в разные места, например – в сайдбар и подвал, или в правую и левую колонку… При этом каждый виджет настраивается индивидуально – высота, ширина, свой набор баннеров… Очень удобно и все в одном месте. В общем, если вам нужен динамичный ротатор баннеров, то здесь есть весь необходимый функционал, и при этом – ничего лишнего.
По описанию кажется – сложно, а на самом деле добавление нового ротатора и баннеров в него занимают всего пару минут.
Если вы пользуетесь другими средствами для ротации баннеров – прошу делиться своим опытом в комментариях.