Як зробити мобільну версію сайту на wordpress: bootstrap, плагін wptouch, інші рішення

Кілька днів ми тестуємо плагіни і різні рішення для мобільної версії сайтів.

Як і багато, я отримав лист такого змісту:

Веб-сайт не оптимізований для мобільних пристроїв... і далі про те, що він буде гірше ранжируватися в мобільній видачі.

Відео: Модулі для створення мобільної версії сайту на WordPress | HOSTiQ

Проблема є, ось характерний приклад:

Втрачаємо багатьох відвідувачів, втрачаємо дохід. Раніше я вже додав мобільні версії до ряду сайтів, тепер прийшла пора вирішити питання з тими, що на WP. Отже, що пропонує Гугл.

WPtouch

Google запропонував чудовий плагін WPtouch - прекрасне рішення, прекрасне своїми можливостями, настройками, наявністю просто шикарною про-версії (100 баксів за установку на 5 сайтів), де ще більше налаштувань і інтеграції з iOS і Android.

Окрилені, починаємо тестувати, ставимо на один з хостингів, де живуть скромні 3 сайта із загальною відвідуваністю щось близько 20k на добу (спочатку потрібно протестувати, перш ніж ставити на життєво важливі ресурси). Кілька налаштувань і мобільна версія в справі.

Мінус - довелося відключити кешування для мобільних користувачів, оскільки інакше їм підсовувала звичайна версія з кешу. Результатом стало зростання навантаження на сервер (графік з Бегета):

Спробували різні варіанти налаштувань. Результату немає. Треба організовувати кешування іншими засобами, Hyper Cache працює з мобільними шаблонами (можна поставити, щоб для відповідних користувачів був окремий кеш, але Wptouch НЕ створює окремих шаблонів, які можна запропонувати Hyper Cache).

Мій вердикт: красиво, але важко, у фрі версії юзабельно на невеликих сайтах. У платній вказується що є окреме кешування, поки не пробував, є сумніви.

Інші плагіни

Суть роботи: перевіряємо ні з мобільного чи зайшов відвідувач і якщо «так», то вантажимо йому сайт в окремому шаблоні. Можна зробити вручну, нам знадобиться код для визначення пристрою користувача, код зміни шаблону і сам шаблон. Мобільні light шаблони без плагіна Mobius iPhonsta jQuery Mobile Carrington Mobile

WordPress Mobile Pack, WP Mobile Detector, WPSmart Mobile, WP Tap News Press, WPmob Lite, WordPress Mobile Edition, WordPress PDA / Iphone.

Мій вибір: MobilePress - вельми компактне рішення, але разом з тим просте і ефективне. Головне: є можливість скопіювати мобільні шаблони в папку з іншими шаблонами і налаштувати відповідний шлях в плагіні. Це вирішує вище описану проблему з кешуванням через Hyper Cache, однак взаємодія плагінів не завжди без глюків, іноді замість звичайної версії сторінки видає мобільний.

Bootstrap

Наступним рішенням став JS фреймворк Bootstrap.

О, це класна штука: кілька місяців тому ми робили сервіс, в якому переважна більшість користувачів працюють з мобільників. Дизайн зробили на Bootstrap. Дуже просто, дуже доступно і ефективно.

Цього разу стояла задача зробити нову адаптивну тему під WordPress на основі Bootstrap. За допомогою прикладів (https://getbootstrap.com/getting-started/#examples) зробити простенький wp шаблон можна за годину або й того менше.

У мене на деяких проектах досить «складні» шаблони з рядом умов, що стосуються виведення інформації, проте за день на Bootstrap був переведений один із сайтів. Кешування працює, на смартфонах відображається відмінно.

Мій вердикт: чудове рішення, особливо для простих wp-шаблонів, проте, якщо у вас тема з безліччю складових, складним дизайном, різними типами посад і т.д., то на переробку піде не мало часу. Обов`язково вивчіть цей фреймворк, з ним дуже приємно працювати.

Мобільна версія на піддомені

1. На піддомені робимо копію сайту зі спрощеним дизайном, збільшеним шрифтом.
2. В основному сайті робимо перевірку на браузер користувача і, якщо це мобільний браузер, то робимо редирект на мобільну версію сайту.

сервіси

Механіка проста - сервіс викачує ваш сайт і генерує його мобільну версію, далі ставимо на сайт код який перенаправляє мобільних користувачів на відповідну адресу.

• https://dudamobile.com
• https://mobilizetoday.ru

адаптивний дизайн

Для реалізації адаптивного дизайну зазвичай використовуються CSS3 Media Queries. Користувач буде бачити різну картинку в залежності від дозволу екрану:

@media screen and (max-width: 1280px) {div.example {width: 1100px-}}@media screen and (max-width: 1024px) {div.example {width: 980px-}}

Суть: У CSS файл відразу прописуємо всі дані для декількох варіантів вирішення монітора.

Відео: Мобільна версія сайту для WordPress

Вказувати атрибут media

screen - звичайний монітор, handheld - мобільний пристрій.

Варіант, знайдений на Хабре:

Суть: визначаємо розширення екрану користувача, і якщо воно відповідає мобільного пристрою - вантажимо йому в рамках поточного дизайну окремий CSS файл, де передбачено компактне розташування блоків, шрифти і інше, що радить Гугл.

Мій вердикт: це рішення використовуємося на в рамках одного мого блогу (було по дефолту в шаблоні), на жаль Гугл вирішив що частина сторінок все ж незручна користувачам, рішення поки відкладено.

Підсумок: Bootstrap, інші адаптивні рішення, з плагінів - MobilePress.

І варто пам`ятати про акуратність і оцінювати ризики, оскільки стала надходити інформація про те, що Яндекс порізав трафік деяких ресурсів, для яких зробили мобільні версії сайтів відповідно до рекомендацій Гугла.

Бонус!

Як бонус під соц.замок: величезна база ключів, за якими йде море трафіку з Яндекса на womanadvice.ru (1 003 819 кеев, багато нк нч) + невелика добірка сервісів, де можна купити мобільний трафік - для сайту, для арбітражу і т.д. І через ці ж сервіси можна вигідно монетизувати свій мобільний трафік.