Как сделать мобильную версию сайта на WordPress: Bootstrap, плагин WPtouch, прочие решения
Несколько дней мы тестируем плагины и разные решения для мобильной версии сайтов.
Как и многие, я получил письмо такого содержания:
Сайт не оптимизирован для мобильных устройств… и дальше о том, что он будет хуже ранжироваться в мобильной выдаче.
Проблема есть, вот характерный пример:
Теряем многих посетителей, теряем доход. Ранее я уже добавил мобильные версии к ряду сайтов, теперь пришла пора решить вопрос с теми, что на WP. Итак, что предлагает Гугл.
Содержание:
WPtouch
Проверить, как видит гугл ваш сайт с точки зрения адаптации к мобильным устройствам : https://developers.google.com |
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. С помощью примеров (http://getbootstrap.com/getting-started/#examples) сделать простенький wp шаблон можно за час или и того меньше.
У меня на некоторых проектах достаточно «сложные» шаблоны с рядом условий, касаемых вывода информации, тем не менее за день на Bootstrap был переведён один из сайтов. Кэширование работает, на смартфонах отображается отлично.
Мой вердикт: замечательное решение, особенно для простых wp-шаблонов, однако, если у вас тема со множеством составляющих, сложным дизайном, разными типами постов и т.д., то на переработку уйдёт не мало времени. Обязательно изучите этот фреймворк, с ним очень приятно работать.
Мобильная версия на поддомене
Библиотеки для определения мобильного браузера: http://detectmobilebrowsers.com |
- На поддомене делаем копию сайта с упрощённым дизайном, увеличенным шрифтом.
- В основном сайте делаем проверку на браузер пользователя и,если это мобильный браузер, то делаем редирект на мобильную версию сайта.
Сервисы
Механика проста — сервис скачивает ваш сайт и генерирует его мобильную версию, далее ставим на сайт код который перенаправляет мобильных юзеров на соответствующий адрес.
- http://www.dudamobile.com
- http://www.mobilizetoday.ru
Адаптивный дизайн
Для реализации адаптивного дизайна обычно используются CSS3 Media Queries. Пользователь будет видеть разную картинку в зависимости от разрешения экрана:
Суть: В CSS файл сразу прописываем все данные для нескольких вариантов разрешения монитора.
@media screen and (max-width: 1280px) {
div.example {width: 1100px;}
}
@media screen and (max-width: 1024px) {
div.example {width: 980px;}
}
Указывать атрибут media
<link rel="stylesheet" href="site.css" media="screen" />
<link rel="stylesheet"href="mobile.css" media="handheld"/>
screen — обычный монитор, handheld — мобильное устройство.
Вариант, найденный на Хабре:
<link rel= «stylesheet» href=»handheld.css» media=»handheld,only screen and (max-device-width:480px)»/>
Суть: определяем расширение экрана пользователя, и если оно соответствует мобильному устройству — грузим ему в рамках текущего дизайна отдельный CSS файл, где предусмотрено компактное расположение блоков, шрифты и прочее, что советует Гугл.
Мой вердикт: это решение используемся на в рамках одного моего блога (было по дефолту в шаблоне), к сожалению Гугл решил что часть страниц всё же неудобна пользователям, решение пока отложено.
Итог: Bootstrap, прочие адаптивные решения, из плагинов — MobilePress.
И стоит помнить об аккуратности и оценивать риски, поскольку стала поступать информация о том, что Яндекс порезал трафик некоторым ресурсам, для которых сделали мобильные версии сайтов согласно советам Гугла.
Привет.
Я по поводу плагина mobilePress. Данный плагин больше не рабочий, есть ли ему замена где можно закинуть тему в папку вордперс и все работало?
автор, помоги! не отображаются плагины вордпресс в мобильном приложении при интегрировании сайта. как сделать?
Суета, имхо, от того, что у всех своя специфика и стандартные решения подходят далеко не всем.
Не пойму этой суеты с мобильной версией сайта? Уже давно установил указанный в начале данной статьи плагин и никаких проблем! Обычно Борисов так раньше раздувал из мухи слона.
Здравствуйте.
Подскажите пожалуйста, как мне сделать сайт объявлений на вордпресс. Нужно чтобы можно было настроить поддомены для регионов. (чтобы присвоить в яндексе регион). Вот нашел одну доску объявлений регионами, подскажите какой шаблон или плагин тут используется, нужно именно, чтобы поддомены работали как в указанном сайте. Я находил плагин для создания поддоменов, но там только для категорий, тоесть из категорий создаются поддомены, а мне так не нужно.
А то не хотелось брать новый хост под мобильный сайт( 3к трафика выгружает на 140-150 CP в бегетах(
Надеюсь теперь нагрузка упадет в разы! Еще раз спасибо! Единственный блог где инфу нашел стоящую, везде одна вода(((
Спасибо!!!!!!! 🙂
Попробовал так и есть — одно НО! Нужно в themes, папку с шаблоном подписывать не default, а Default, D с большой буквы, и тогда все заработает! По крайней мере у меня заработало на бегете)
Спасибо еще раз за подсказку!!!
Указал /themes в настройках в Custom Mobile Themes Directory, далее во вкладке Themes уже выбрал соответствующий шаблон. В настройках hyper-cache Мобильный — указал кэшировать отдельно и также указал соответствующую тему. Всё работает, хотя иногда бывают сбои — может спутать шаблон обычный с мобильным и неправильно закэшировать.
Адне, у меня вопрос по MobilePress, а именно
Как указывать путь???
Как не извращаюсь, не работает. В папке плагина тема пока лежит — все ок, только переносишь ее в themes, указываешь путь /themes ( как только путь не писал) — перестает работать! Или ты просто полистал плагин, но не настраивал на деле?
Поставил плагин именно из-за кеша Hyper Cache, но не идет что-то(((
Мы обычно сегментируем подобные базы, потом кейколлектором побиваем по ряду параметров, выявляем слова, которые дадут быстрый отклик при публикации, без дополнительных усилий. В базе таких хватает — нк. А то что нч, так это по вордстату посмотреть можно.
3000 показывает мегаиндекс (раздел видимость сайта).
Можно еще спросить? Вы пишете — 1 003 819 кеев, много нк нч — а как Вы НЧ\НК определили? В файле я этого не увидела, сорри…
Алекс, если не сложно, подскажите, чем Вы собирали запросы в поиске с вуменэдвайс? Чем из бесплатного посоветуете воспользоваться, чтобы собрать ключевики с сайта-конкурента?
Спасибо заранее.
Спасибо, пора ставить
Домен womanadvice.ru
Тематика сайта Дом
Размер аудитории, чел. (сутки/месяц) 270 934 / 8 128 000
Количество просмотров (сутки/месяц) 677 334 / 20 320 000
Жду когда разработчики вордпресса учтут пожелания гугла, а то и для мобильников что-то придумают. В одном из обновлений wordpress наверняка будет решение, выработанное коллективно разработчиками
Перевел все свои сайты на фреймворк uikit getuikit.com/index.html очень доволен, мне он лучше чем Bootstrap.
Т.е. соответствие требования Гугла влетит вебмастеру в копеечку?
Спасибо.
Пропадет. Поэтому стоит ставить адаптивные рекламные блоки, но от них толку, как показала моя практика, еще меньше.
что моря трафика не видать на womanadvice.ru.. согласно ли.ру 100 уников дейли..
Спасибо за обзор. А как будет вести себя реклама от Адсенса при использовании Бутстрапа? Если область отображения станет меньше, чем ширина фиксированного рекламного блока?
Спасибо.
Ну да, в принципе можно развести эти понятия, но, имхо, категория «мобильная версия» включает в себя вариант адаптивного дизайна.
Может. Вполне. Не по всему сайту, если он большой, но по трафиковым отдельным запросам — да.
Гугл советовал делать не мобильные версии сайтов, а адаптивный дизайн.
Рассылка Гугла была несколько дней назад, может Яндекс так быстро среагировать?