кнопка наверх

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

нужна ли мобильная версия сайтаПривет, дорогие читатели!

За эту неделю на моем блоге произошло два замечательных события! Во-первых, наконец-то посещалка перевалила за 1000 (во вторник было 1040 уников). Во-вторых, я установила контекстную рекламу от Яндекс Директ в сайдбар. Жду ваших комментариев о внешнем виде рекламного блока. И буду крайне благодарна за клики 🙂

Тем временем Google недавно известил о том, что мой блог плохо отображается на мобильных устройствах. В интернете много шума наделало их сообщение о том, что с 21го апреля 2015 года все сайты, которые не адаптированы под мобильники, будут понижены в выдаче.

Возник вопрос: нужна ли мобильная версия сайта? Судя по статистике Google Analitics за последний месяц у меня свыше 1500 посетителей, которые пользуются при просмотре мобильниками или планшетами. Это приблизительно 50 человек в день, что не так уж и мало. А если учесть, что с каждым годом мобильные технологии внедряются все больше в нашу с вами жизнь, нужно подумать о том, чтоб идти в ногу со временем. В этой статье мы разберем, как сделать мобильную версию для WordPress-блога.

Содержание:

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

Первое, что необходимо сделать, это проверить свои ресурсы на соответствие требованиям Гугл. Каждый может проанализировать удобство просмотра сайта на мобильных устройствах вот здесь — google.com/webmasters/tools/mobile-friendly.

Вот какой результат получился у меня:

проверка мобильной версии в гугле

Вот еще один полезный сервис от Гугл для проверки скорости загрузки разных версий сайта: developers.google.com/speed/pagespeed/insights. Здесь очень подробно объясняется, что именно на вашем сайте не так, даются конкретные примеры со скриншотами вашего блога. Поэтому обладая знаниями html + css и пользуясь этой инструкцией, можно отлично доработать свой ресурс.

При проверке мобильной версии сайта в Google, вы можете проследовать по ссылке с рекомендациями по адаптации сайта на Вордпресс под мобильные устройства (третья колонка справа – «Далее»). Там приведена еще одна подробная инструкция для WordPress с указанием плагинов, ссылками на адаптивные шаблоны и прочее. Советую также изучить этот документ.

Напомню, что адаптивные шаблоны WordPress – это такие темы, которые изначально разработаны для распознавания разными типами устройств. Мы разбирали в статье про выбор шаблонов для Вордпресс основные критерии, на которые стоит обратить внимание. Среди них была и адаптивность.

Как говорит нам поддержка Гугла, в описаниях таких тем обычно встречаются слова responsive (адаптивная) или mobile (мобильная). Т.е. если вы выбрали для своего блога адаптивную тему, вам не нужно заморачиваться с тем, как сделать шаблон мобильной версии сайта. Ваш основной шаблон будет автоматически подстраиваться под размеры мобильного устройства. Ну а тем, кто создал свой блог давно, когда таких тем еще не было, и не хочет менять свой устоявшийся шаблон, мы продолжим данный обзор. И разберем, что нужно сделать, чтоб ваш сайт хорошо воспринимался на мобильниках и планшетах.

Мобильная версия для Вордпресс-блога: особенности

Нужно понимать, что все остальные варианты, кроме адаптивной темы, или непосредственной правки файлов, предполагают создание дополнительного WordPress-шаблона для мобильной версии сайта. Данный шаблон должен отличаться от основного, учитывая особенности мобильных устройств:

  • Небольшой размер экрана;
  • Более низкая скорость загрузки;
  • Отсутствие клавиатуры и мыши.

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

Для реализации данных функций есть несколько способов. Самый простой из них – воспользоваться плагинами (идеален для новичков).

Плагины для адаптации сайта

Самые распространенные плагины: WPTouch Mobile Plugin, WP Mobile Detector, MobilePress, WPSmart Mobile.

WpTouch и MobilePress – это базовые бесплатные версии плагинов, которые можно улучшить до более продвинутых версий с большим набором настроек и функций. По отзывам пользователей WpTouch Pro достаточно тяжелый и у него может возникать конфликт с плагинами кэширования (Hyper Cache). Случается, что мобильному пользователю может выдаваться страница для ПК из кэша. Такое может случаться и с другими WordPress-плагинами для мобильных версий сайтов. Базовые версии как MobilePress, так и WPTouch вполне можно использовать для блогов с простой структурой и контентом.

Но мне больше понравился плагин WPSmart Mobile. В нем сразу установлены три мобильных шаблона для WordPress на выбор.

три мобильных шаблона

Правда, все его настройки на английском, но ничего сложного там нет.

настройки плагина

Здесь можно установить лого, возможность комментирования, поиска по сайту и настроить отображение постов. Кроме того можно установить код контекстной рекламы Google Adsense или любой другой, и счетчики статистики. Также в разделе «Appearance» можно поменять шрифт и цвет записей, цвет фона и проч. Конечно, это будет уже не ваш сайт в его привычном виде, контент примет другой вид, но зато станет удобным для мобильных пользователей.

Вы можете посмотреть, как будет выглядеть сайт на мобильном устройстве, нажав «Preview»:

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

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

Просмотр мобильной версии сайта, или отображение его в любом браузере или устройстве можно осуществить с помощью специального расширения User-Agent Switcher. Вот так он выглядит в магазине Google Chrome:

User-Agent Switcher

Он позволяет переключать прямо в Хроме тип отображения страницы:

переключатель устройств

Соответственно, вы можете проверить кроссбраузерность вашего блога и его вид на разных устройствах от iPhone до  Samsung Galaxy.

Другие варианты создания мобильной версии сайта на Вордпресс

Варианты без использования плагинов:

  • с помощью специальных сервисов.
  • создание мобильной версии на поддомене;
  • создание отдельного файла стилей CSS для мобильной версии;
  • прописать данные для всех вариантов отображения в одном CSS-файле;

Вот один из сервисов, который анализируя ваш сайт, генерирует его мобильную версию — dudamobile.com. После этого на блог нужно поставить код, который будет делать редирект на мобильную версию сайта. Данный инструмент имеет массу настроек, но его функционал урезан в бесплатном режиме.

По схожему принципу используются поддомены. Их имеет смысл создавать для тяжелых, многофункциональных сайтов. Можно увидеть, как это работает на примере youtube, где осуществляется перенаправление на мобильную версию сайта. Тут основной домен youtube.com, а для мобильных устройств — m.youtube.com. Так же работает Вконтакте.

Если вы решили создать дополнительный файл стилей, сделайте копию основного и назовите ее, к примеру, style-m.css. Теперь нужно внести изменения в файл header.php, в строки, где подключаются стили.

Например, так они могут выглядеть:

<link rel="stylesheet" media="screen" href="<?php bloginfo( 'template_url' ); ?>/style.css" />

Теперь нужно создать правило, при котором будет включаться первый или второй файл стилей. Вместо предыдущего кода, прописываем такой:

1
2
<link rel="stylesheet" type="text/css" media="screen and (min-width: 641px)" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="stylesheet" media="screen and (max-width: 641px)" href="<?php bloginfo( 'template_url' ); ?>/style-m.css" />

А далее, при наличии знаний в области CSS, можно вносить правки непосредственно в файл style-m.css. Например, поменять шрифты на более контрастные, сделать отображение одноколоночным и все, что рекомендует Гугл.

Я для себя выбрала именно этот способ, набросала на скорую руку несколько стилей и гугл принял работу. Он оказался не слишком придирчивым, достаточно разместить контент в одну узенькую колонку и сервис Гугла радостно сообщает: «Отлично! Страница оптимизирована для мобильных устройств.». Пока у меня получилось не слишком красиво, но это временный вариант, сделанный за пару часов. Возможно, когда-нибудь руки дойдут сделать это качественно и хорошо.

Удачи вам в освоении мобильной версии сайта на Вордпресс, делитесь своими результатами. До новых встреч!


1 звезда2 звезды3 звезды4 звезды5 звезд (10 оценок, среднее: 4,60 из 5)
Загрузка...
like
Понравилось?
Подпишитесь на блог и получайте новые статьи!
Добавляйтесь в соц. сетях:
  1. Ростислав:

    Вот интересный момент.

    Сайт создан на Bootstrap, используя grid под адаптив. — а гугл пишет что сайт не адаптирован!!

    При том на маленьком экране проверки гугла — видно что даже не подгружаются стили (как у вас на первом скрине)

    В чем может быть причина ?

    Ответить
    • Ростислав:

      Также «инструменты вебмастера» выдают это — «Не обнаружены проблемы с просмотром сайта на мобильных устройствах».

      А developers.google.com/speed/pagespeed/insights — вообще пишет это joxi.ru/YmE1354uzG0lm6

      Где правда ?))

      Ответить
    • Анна:

      Все очень просто: у вас в robots.txt закрыта папка с темой, где стили хранятся. Вот гугл их не видит, поэтому говорит, что дизайн не адаптивный.

      Ответить
  2. Ростислав:

    и кстати по вашей рекламе от яндекса — проверил на ПК при разрешении до 400 точек, при прокрутке где то на середину сайта яндекс реклама вылазит на весь экран, затрудняя просмотр. И пролеснув еще ниже (почти до футера) она пропадает.

    Ответить
    • Анна:

      спасибо, посмотрю!

      Ответить
    • Анна:

      Ростислав, а это в каком браузере так вылазит на весь экран? Можете проверить, теперь исправилось?

      Ответить
      • Ростислав:

        Было на FF, сейчас проверил вроде все норм !

        Ответить
  3. вася:

    Сразу брать адаптивную, валидную тему и все открывать в роботсе и будет счастие.

    Ответить
    • Владимир Правдин:

      Не совсем устраивает мобильная версия сайта, что можете посоветовать?

      Ответить
  4. вася:

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

    Ответить
    • Анна:

      Вася, бесспорно, контент важнее всего. но и остальные тысяча факторов ранжирования тоже играют роль, особенно в совокупности)

      Ответить
  5. Mila:

    Хорошая тема, весьма озабочены этим многие, в том числе и я, скорее всего надо менять шаблон.

    Реклама Яндекса у меня смотрится нормально, в Хроме загружаю, не навязчиво.

    Успехов, Анна, в продвижении до новой тысячи! 🙂

    Ответить
    • Анна:

      Мила, если у вас стандартный шаблон без каких-либо изменений под себя, то проще его поменять:) Спасибо!

      Ответить
  6. Александр Викторович:

    Уже давно решил поменять тему своего блога. У меня была самая примитивная от Вордпресс, тогда знания были на нуле. В админке выбрал тему предложенную Вордпресс, она была адаптивной. Честно говоря не совсем понимал что это такое, но тема понравилась. Переустановил в админке без проблем. Оказалось не зря. Сейчас блог подходит под мобильные устройства. Так что думаю замена темы на адаптивную самый подходящий вариант.

    Ответить
  7. red-nail:

    за текст про клики яндекс может вас наказать! Убирайте к чему рисковать?

    Ответить
  8. Alex:

    Интересно, а я ничего не делал, а сайт все равно имеет мобильную версию.

    Ответить
    • Анна:

      Значит у вас установлена адаптивная тема.

      Ответить
  9. Елена:

    Отличный пост на актуальную для меня тему про адаптивный шаблон:) Анна, возможно ли вам заказать доработать блог на wordpress до адаптивной версии? Шаблон Twenty Eleven версия 4.3.1

    Ответить
  10. Антон Егоров:

    Спасибо! Полезная стать! Воспользовался одним из советов. Блог стал выглядеть велеколепно на мобильном 😉

    Ответить
  11. Михаил:

    Сколько перелопатил сайтов,все они предлагали стандартный набор такого рода плагинов,но нигде небыло плагина WPSmart Mobile на тех сайтах. Пробовал каждый устанавливать и почему-то установив какой нить плагин,то он начинал конфликтовать с другими плагинами,а в большей степени из них просто мне не нравились.

    Но когда поставил WPSmart Mobile,сразу увидел,что это то,что я искал.

    Ответить
  12. Никита:

    Спасибо автору за статью я вот тоже бился потом плюнул поставил плагин и забыл. Все работает нормально.

    Ответить
  13. АРТЕМ:

    У меня такая проблема, пользуюсь плагином WPtouch, сайт iloveplants.ru настроил мобильное меню, но у меня не отображаются страницы созданные в разделе Портфолио. все страницы, которые добавлены как страницы-отображаются в мобильном меню, а те которые добавлены из раздела порфолио не отображаются, а также если добавлять страницы «произвольная ссылка», строки меню отображаются, а при переходе-перебрасывается на раздел БЛОГ.

    Подскажите, что может быть и как исправить это, был бы очень признателен

    Ответить
  14. Константин:

    Скажите, а не страшно ставить плагин, который уже три года не обновлялся? Вдруг в нем есть уязвимости?

    Ответить
    • АРТЕМ:

      Как три года? вы о чем? он у меня регулярно обновляется, раз в 2 месяца

      Ответить
  15. Иван:

    Сергей, добрый вечер! Нужен Ваш совет! В общем такая проблема: есть сайт на WordPress, интернет-магазин, который разрабатывал! Тема с адаптивным дизайном, интернет-магазин с плагином Wookomerce! Все устраивает, только 1-на проблема, в товарах в мобильной версии не показываются картинкив товарах, есть еще один интернет-магазин, первое место в Украине в google.com.ua по запросу купить туалетную воду по низким ценам, там проблем нет с єтим, возможно сталкивались, прошу Вашего совета!

    Ответить
Ваш комментарий: