Привіт, шановні читачі мого блогу. Сьогодні я хочу розповісти про те, як можна поставити собі на блог, в бічну колонку, динамічний ротатор банерів. Всі ми бачили статичні ротатори - це коли при завантаженні сторінки виводиться один випадковий банер, і змінюється він тільки якщо перезавантажити сторінку. Тобто, в одному місці на будь-якій сторінці відвідувач може побачити тільки один банер.
Динамічний ротатор працює по іншому. Він постійно змінює картинки, навіть якщо сторінка вже завантажена. Так відвідувачеві можна показати відразу кілька банерів. Такий підхід мені подобається більше, а причини я б назвав такі:
- Більшість відвідувачів приходить з пошукових систем, читає одну сторінку і йде. Навіть якби така людина зацікавився одним з банерів в вашому наборі, він його може просто не побачити, якщо ротатор статичний.
- Динамічно змінюються картинки привертають до себе більше уваги, ніж нерухомі. Їх важко не помітити під час ефектною зміни банерів, і зазвичай проглядається вся серія картинок - спрацьовує звичайне людське цікавість "а раптом на наступній картинці є щось цікаве". А поки відвідувач їх розглядає, час іде - це користь для сайту.
- Економиться місце, тому в одному місці можна показати відразу багато банерів, а не розтягувати їх по одному.
- Встановити такий ротатор дуже просто.
Є й недоліки, але я б не сказав. що вони дуже великі, тому що легко вирішуються:
- Завантажуються всі банери з показуваного набору, а багато графіки уповільнюють швидкість завантаження блогу в цілому. Проблему можна вирішити оптимізацією банерів в форматі JPG, перекладом з "важкого" формату PNG в формат JPG і знову-таки оптимізацією картинки. Про це я вже писав, почитайте . Вихідний банер в 150 кб легко можна зменшити до 25-40 кб без втрати якості.
- "Мерехтінням" картинок, яке може дратувати відвідувачів - насправді ця проблема може бути, якщо банери будуть змінюватися кожну секунду. Тут просто потрібно налаштувати оптимальний час зміни - 3-5 секунд цілком добре, і картинки не відволікають, і під час побіжного перегляду сторінки відвідувач помітить пару таких циклів.
Ось, про переваги і недоліки сказав, тепер можете вирішувати, треба вам такий ротатор чи ні. Якщо треба, читайте далі, розповім, як його зробити одним із способів.
Насправді динамічний ротатор банерів - це не що інше, як звичайний слайдер, які часто можна зустріти на різних сайтах. Їх зазвичай ставлять в шапці або ще десь вгорі, але ж ніхто не забороняє поставити таку штуку і в бічну колонку ... У підсумку ми просто отримаємо слайдер, який буде "крутити" наші банери по колу, і при цьому ще можна налаштувати різні ефекти , додати перемикачі та інші красивості і зручності.
Вставити слайдер на блог можна самими різними способами - підключити різні бібліотеки, скрипти та інше. Це справа складна для тих, хто погано розбирається в коді сайту. Але можна просто взяти готовий плагін для 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 - можна додавати кілька такізх віджетів зі слайдером в різні місця, наприклад - в сайдбар і підвал, або в праву і ліву колонку ... При цьому кожен віджет налаштовується індивідуально - висота, ширина, свій набір банерів ... Дуже зручно і все в одному місці. Загалом, якщо вам потрібен динамічний ротатор банерів, то тут є весь необхідний функціонал, і при цьому - нічого зайвого.
За описом здається - складно, а насправді додавання нового ротатора і банерів в нього займають всього пару хвилин.
Якщо ви користуєтеся іншими засобами для ротації банерів - прошу ділитися своїм досвідом в коментарях.
Що вони означають?