Как сделать мобильную версию сайта на 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
  1. На поддомене делаем копию сайта с упрощённым дизайном, увеличенным шрифтом.
  2. В основном сайте делаем проверку на браузер пользователя и,если это мобильный браузер, то делаем редирект на мобильную версию сайта.

Сервисы

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

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

Для реализации адаптивного дизайна обычно используются CSS3 Media Queries. Пользователь будет видеть разную картинку в зависимости от разрешения экрана:

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

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

Указывать атрибут media

<link rel="stylesheet" href="site.css" media="screen" />
<link rel="stylesheet" href="mobile.css" media="handheld"/>

screen — обычный монитор, handheld — мобильное устройство.

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

<link rel= "stylesheet" href= "mobile.css" media= "only screen and (max-device width:480px)"/>

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

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

Итог: Bootstrap, прочие адаптивные решения, из плагинов — MobilePress.

И стоит помнить об аккуратности и оценивать риски, поскольку стала поступать информация о том, что Яндекс порезал трафик некоторым ресурсам, для которых сделали мобильные версии сайтов согласно советам Гугла.

Бонус!

В качестве бонуса под соц.замок: огромная база ключей, по которым идёт море трафика из Яндекса на womanadvice.ru (1 003 819 кеев, много нк нч) + небольшая подборка сервисов, где можно купить мобильный трафик — для сайта, для арбитража и т.д. И через эти же сервисы можно выгодно монетизировать свой мобильный трафик.

Этот пост был вам полезен? Подпишитесь на нашу рассылку и получайте то, что не вошло в блог, анонсы и тематические подборки + несколько руководств (сбор подписчиков и продажа информации).
Имя: Email:
  1. Димон:

    Рассылка Гугла была несколько дней назад, может Яндекс так быстро среагировать?

    • Alex Hodinar:

      Может. Вполне. Не по всему сайту, если он большой, но по трафиковым отдельным запросам — да.

  2. Гугл советовал делать не мобильные версии сайтов, а адаптивный дизайн.

    • Alex Hodinar:

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

  3. Дмитрий:

    Спасибо за обзор. А как будет вести себя реклама от Адсенса при использовании Бутстрапа? Если область отображения станет меньше, чем ширина фиксированного рекламного блока?

    Спасибо.

    • Alex:

      Пропадет. Поэтому стоит ставить адаптивные рекламные блоки, но от них толку, как показала моя практика, еще меньше.

  4. сергей:

    что моря трафика не видать на womanadvice.ru.. согласно ли.ру 100 уников дейли..

    • Татьяна:

      Домен womanadvice.ru
      Тематика сайта Дом
      Размер аудитории, чел. (сутки/месяц) 270 934 / 8 128 000
      Количество просмотров (сутки/месяц) 677 334 / 20 320 000

  5. Перевел все свои сайты на фреймворк uikit ( http://getuikit.com/index.html )очень доволен, мне он лучше чем Bootstrap.

  6. Жду когда разработчики вордпресса учтут пожелания гугла, а то и для мобильников что-то придумают. В одном из обновлений wordpress наверняка будет решение, выработанное коллективно разработчиками

    • zmoe:

      Зачем они будут что-то мудрить, это на уровне шаблона все решается или установкой плагина. Я тоже протестировал несколько плагинов http://zmoe.ru/kak-sozdat-mobilnuyu-versiyu-sajta/ и выбрал уже давно и установил самый на мой взгляд оптимальный. Google в целом доволен 🙂

  7. Спасибо, пора ставить

  8. Татьяна:

    Алекс, если не сложно, подскажите, чем Вы собирали запросы в поиске с вуменэдвайс? Чем из бесплатного посоветуете воспользоваться, чтобы собрать ключевики с сайта-конкурента?
    Спасибо заранее.

    • Alex Hodinar:

      Спайвордс, бесплатных решений не знаю, хотя чуть слов показывает сервис http://www.cy-pr.com

      • Татьяна:

        3000 показывает мегаиндекс (раздел видимость сайта).
        Можно еще спросить? Вы пишете — 1 003 819 кеев, много нк нч — а как Вы НЧ\НК определили? В файле я этого не увидела, сорри…

        • Alex Hodinar:

          Мы обычно сегментируем подобные базы, потом кейколлектором побиваем по ряду параметров, выявляем слова, которые дадут быстрый отклик при публикации, без дополнительных усилий. В базе таких хватает — нк. А то что нч, так это по вордстату посмотреть можно.

  9. MAX:

    Адне, у меня вопрос по MobilePress, а именно
    Как указывать путь???
    Как не извращаюсь, не работает. В папке плагина тема пока лежит — все ок, только переносишь ее в themes, указываешь путь /themes ( как только путь не писал) — перестает работать! Или ты просто полистал плагин, но не настраивал на деле?
    Поставил плагин именно из-за кеша Hyper Cache, но не идет что-то(((

    • Alex Hodinar:

      Указал /themes в настройках в Custom Mobile Themes Directory, далее во вкладке Themes уже выбрал соответствующий шаблон. В настройках hyper-cache Мобильный — указал кэшировать отдельно и также указал соответствующую тему. Всё работает, хотя иногда бывают сбои — может спутать шаблон обычный с мобильным и неправильно закэшировать.

      • MAX:

        Спасибо!!!!!!! 🙂
        Попробовал так и есть — одно НО! Нужно в themes, папку с шаблоном подписывать не default, а Default, D с большой буквы, и тогда все заработает! По крайней мере у меня заработало на бегете)
        Спасибо еще раз за подсказку!!!

        • MAX:

          А то не хотелось брать новый хост под мобильный сайт( 3к трафика выгружает на 140-150 CP в бегетах(
          Надеюсь теперь нагрузка упадет в разы! Еще раз спасибо! Единственный блог где инфу нашел стоящую, везде одна вода(((

  10. Андрей:

    Здравствуйте.
    Подскажите пожалуйста, как мне сделать сайт объявлений на вордпресс. Нужно чтобы можно было настроить поддомены для регионов. (чтобы присвоить в яндексе регион). Вот нашел одну доску объявлений http://moskva.biglus.com/ с регионами, подскажите какой шаблон или плагин тут используется, нужно именно, чтобы поддомены работали как в указанном сайте. Я находил плагин для создания поддоменов, но там только для категорий, тоесть из категорий создаются поддомены, а мне так не нужно.

  11. Не пойму этой суеты с мобильной версией сайта? Уже давно установил указанный в начале данной статьи плагин и никаких проблем! Обычно Борисов так раньше раздувал из мухи слона.

    • Alex Hodinar:

      Суета, имхо, от того, что у всех своя специфика и стандартные решения подходят далеко не всем.

  12. дом:

    автор, помоги! не отображаются плагины вордпресс в мобильном приложении при интегрировании сайта. как сделать?

Оставить комментарий



Раздел: Ведение блогов, Софт, скрипты, сервисы, Автор: Alex Hodinar
|