Как сделать мобильную версию сайта WordPress?

Мобильный сёрфинг
Мобильная версия сайта, зачем её делать? Заинтересовался этим вопросом буквально на днях и сделал для себя открытие. Посмотрел рейтинги различных инструментов и плагинов для решения данной задачи, остановился на WPTouch. Организовал мгновенно для одного из своих проектов мобильную версию WordPress сайта. И ликовал – версия сайта для мобильных устройств стала приносить существенную прибыль, с мобильного трафика.

Мобильную упрощённую версию должен иметь любой более-менее посещаемый сайт на WordPress. Она улучшит поведенческие факторы юзеров, заходящих с мобильных устройств + серьёзно повысит CTR рекламных объявлений. Почему?

Поведенческие – потому, что читать содержимое сайта становится удобнее мобильным юзерам в разы. Кликабельность по рекламным блокам – потому, что блоки становятся значительно заметнее и лучше вписываются в контент. Зацените скриншот рандомной статьи с мобильного устройства, как отображается реклама Яндекс Директа:

пример мобильной версии сайта

Без мобильной версии сайта, рекламные блоки казались маленькими и убогими, при заходе с того же Iphone – чтобы клацнуть по рекламе, нужно было увеличить масштаб и прокрутить страницу вниз. С мобильных юзеров я имел ранее совсем небольшой профит. Теперь же вижу, что после создания мобильной версии сайта, доход с проекта может увеличиться на 10-15% – мобильные юзеры клацают отлично как на блоки Adsense, так и на РСЯ. Проект, на котором я опробовал WPTouch, имеет львиную долю мобильного трафика – 24% от всех посетителей.

Проверяйте статистику посещений с мобильных устройств, и если процент таких пользователей превышает хотя бы 5% – имеет смысл заняться созданием мобильной версии вашего сайта. Сначала я был в замешательстве – как отнесутся поисковые системы к подмене шаблона, не будет ли негативной реакции? Ведь я не собирался выносить мобильную версию на поддомен или создавать альтернативу в папке wap. Проконсультировался с представителем Яндекса и узнал, что и Google, и Yandex – отлично относятся к сайтам, имеющим мобильную версию для посетителей, работающую по принципу WPTouch: при заходе посетителя, определяется User-agent, и если информация в нём говорит о том, что пользователь с мобильного устройства – подгружается мобильный шаблон. Если юзер зашёл с обычного компьютера – грузится стандарт.

Скачать WPTouch можно с официальной странички плагина на сайте WordPress, вот здесь. WPTouch имеет бесплатную стартовую мобильную тему, дизайн которой можно настроить самостоятельно, как угодно. Установка простая – ставим плагин, активируем – мобильная версия сайта готова. В настройках плагина, нужно включить предспросмотр только для авторизованных администраторов и заняться редактированием шаблона. Редактировать тему конечно частично можно и в настройках, с чего собвстенно и нужно начать. Но поработать придётся и ручками.

Путь к нужной теме для редактирования, находится по адресу WPTouch -> Themes -> Bauhaus -> Default. Меняем, что нужно, заливаем с заменой через FTP. Самый основной и нужный шаблон – single.php – однако для полного фэн-шуя, придётся редактировать практически каждый файл, чтобы оформить всё достойно. Лично я убрал с топового меню выдвигающееся меню страниц, поставил свои социальные кнопки, русифицировал форму комментариев + добавил несколько разных мелочей. Также, придётся редактировать много чего по адресу WPTouch -> Themes -> Foundation -> Default. Разумеется, плагин будет исправно работать и без каких-либо вмешательств в шаблоны. Но, я настоятельно рекомендую хотя бы перевести фразы шаблона с английского на русский + обязательно добавить в single.php несколько рекламных блоков.

Не забудьте поставить срезы для Яндекс Директа и создать новые рекламные блоки в Adsense, для отслеживания эффективности монетизации мобильного трафа :)

Расшарить запись
Читайте ещё статьи по теме:
- Какие плагины необходимо установить на WordPress?
- Понижение нагрузки сайтов, сделанных на WordPress, путём оптимизации запросов к базе данных.
- Внутренняя и внешняя поисковая оптимизация сайта
- SEO текста, оптимизированные статьи для сайта
- Продвинуть сайт в топ за счёт внутренних ссылок
- Оптимизация и продвижение сайта в поисковых системах Google и Yandex
- Создание WordPress сайта, внутренняя оптимизация и продвижение в поисковых системах

Что думаете?
  1. Ирина

    У меня установлен счётчик от Liveinternet, как узнать процент посетителей с мобильных устройств? Разрешения соответствующие посмотреть чтоли и всё что ниже 800х600 считать мобильными? :)

    И ещё, сейчас установила wptouch этот, всё работает, но вопрос возник. Счётчика же нет в шаблоне мобильной версии, хочу туда воткнуть LI и Метрику, как это сделать, чтоб прям в самый конец документа перед закрытием тега body?

  2. Happy Cap

    Привет, да, можно и так проверить процент :) Или посмотреть по браузерам, внимание обратить на Opera Mini, Android Browser, Nokia Browser, Opera Mobile, Chrome iOS + другие браузеры, адаптированные для работы в интернете с мобильных устройств. Либо смотреть % по операционным системам – iOS iPad, iOS iPhone, Android.

    Чтобы воткнуть счётчики в конец шаблона мобильной версии, открой файл, расположенный по адресу \wptouch\themes\foundation\default\footer.php – пролистай в конец документа и вставляй код счётчиков.

  3. Ирина

    Всё получилось, спасибище!

    У меня проценты немного отличаются по ОС и по браузерам если смотреть. Но приблизительно около 30% посетителей получается, заходят через мобильные устройства. Крутяк в общем, не ожидала)

  4. Happy.Cap

    Ирина, не за что :)

  5. trigger

    Вычислил, что около 18% моих посетителей используют не стационар. Сэнкс за инфу, опробую плагин.

  6. Валентин

    У меня старая версия Wordprecc 2.9.2 Подскажите, где можно скачать плагин WPTouch, совместимый с этой версией?

  7. Георгий

    Happy Cap
    У тебя в мобильной версии нет рекламы, т.е. плагин таки не дает ее сделать?
    Как быть с кэшированием?

  8. Happy Cap

    Георгий, конечно даёт.
    Редактируй шаблон, вставляй рекламу куда угодно – wptouch\themes\bauhaus\default\single.php – на свой вкус и цвет. Нет рекламы в моб версиях просто потому, что плагин ставил заново, а отредактированный шаблон с блоками потерялся на старом ноуте, руки не доходят пока что.

  9. Георгий

    Да, с адсенсом получилось методом тыка вставить. Осталось 2 проблемы: кэширование (но мне в принципе пока не актуально) и шорткода. Со вторым ничего нельзя сделать?
    В Foundation что поменять стоит?

    Кстати, сделал бы подписку на коменты, а то как узнать, что ты ответил?

  10. Happy Cap

    А что с кэшированием не так? Всё должно работать. Я вообще ничего не менял по настройкам кэширования для мобильной версии, PageSpeed Google показывает, что всё идеально. Да и если что не так, можно на сервера прямо настроить его, в том же .htaccess прописать параметры и забыть. По поводу шорткода, что за проблема? Так понял в файле функций есть функция шорткодов какая-то, или плагин шортов установлен, который в мобильной версии не работает? Можно конечно сделать, но повозиться прилично придётся. В про-версии WpTouch, кстати, можно подключать плагины. Можно и бесплатно самому настроить, правда утомительно.

    Теперь о последнем, на счёт подписки на комменты. У меня немного крысятнический подход, который я рекомендую использовать тоже, вот раскрываю одну из фишек опять 😀

    Опишу вкратце главные преимущества:
    1. Более чистый код + лучше соотношение навигационного стаффа к уникальному контенту.
    2. Люди делают прямые заходы по многу раз потом, когда задали вопрос, а не просто ждут письма, чтобы прочитать ответ. Это благоприятно влияет как на продвижение, так и на репутацию / траст сайта, опять-таки, метрика и браузер-кетчи от ПС всё это видят и это идёт на пользу, мол сайт интересный, что на него возвращаются.

  11. kt315b

    А зачем лезть в код плагина?Вся реклама и счетчики и так отображаются в мобильной версии,если на компьютерной версии используется плагин Header and Footer

  12. Happy Cap

    Нет, к сожалению не отображаются (в WPTouch по-крайней мере). Поскольку это – отдельный шаблон. И чтобы на мобильной версии от WPTouch работали плагины, в том числе тот о котором ты говоришь – нужна pro-версия плагина. Тогда конечно да :)

  13. Дмитрий46

    Спасибо за полезную статью! Не подскажите, как добавить свой текст внизу страницы, в то место, где находится ссылка на полною версию сайта, какой файл плагина нужно редактировать? Буду Вам очень благодарен!

  14. Ambaroff

    День добрый,

    Не подскажите ли мне, можно ли сделать с помощью WordPress сайт похожий (очень) на bash.im без глубоких знаний программирования? Я имею ввиду, с помощью шаблонов или редактора?

  15. коля

    Привет .подскажи а вот например лента или категории в них идет только заголовок без картинки.можно ли как то сделать чтоб были картинки перьвью?

  16. Елена

    Пользуюсь этим плагином. Все устаревает, только вот с блоками РСЯ беда. У меня ширина контента 500. Сделала адаптивный блок шириной 500 (увы, но нет настоящих адаптивных блоков, без заданного размера не работа). Медиареклму отключила. На мобильных сайтах блок режется.

    Попробовала потеры – половины постера нет. У вас на верхнем скрине прекрасно отображается блок РСЯ.. Как так сделать, не подскажете? Какие размеры блоков выбрать?

    Для вставки боков пользуюсь плагином WP QUADS – Quick AdSense