Создание мобильной версии сайта на WordPress с помощью плагина WPtouch

Мобильная версия сайта на WordPress

  Делаем Вордпресс-сайт мобильным

Многие вебмастера в марте этого года получили уведомления от Google Webmaster о том, что сайт некорректно отображается на экране мобильного устройства и это может ухудшить его ранжирование в мобильном поиске Google с 21 апреля. Кажется, так и стало происходить.

Я также получил много подобных уведомлений и для ряда сайтов на WordPress стал использовать простейшее решение – плагин WPtouch. Так что сейчас о нём и расскажу, но сначала кое-что о способах создания мобильных версий.

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

Всю информацию можно взять из справки Гугла. Главное, что следует понять: существует 3 подхода к этой адаптации:

  1. Адаптивный дизайн – код страницы не меняется, но меняется отображение элементов в зависимости от размера экрана устройства.
  2. Динамический показ – код страницы меняется в зависимости от типа устройства (сервер определяет тип устройства и выдаёт разный код для разных устройств).
  3. Разные URL – для мобильной версии открывается страница с другим URL (например, http://m.vk.com для ВКонтакте).

Мне, как и Гуглу, больше всего нравится 1-й вариант. Так что большую часть своих сайтов буду переводить на адаптивный дизайн, как и web-ru.net. Это более универсальный и, если можно так сказать, основательный способ создания мобильной версии. Но каждому сайту тут будет нужен индивидуальный подход.

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

(Это я всё написал, чтоб вы понимали, нужно ли вам ставить плагины, или вы хотите позаморачиваться с переходом на адаптивный дизайн).

Мобильная версия сайта на WordPress с помощью плагина WPtouch

Прежде, чем ставить плагин, проверьте – может у вас уже всё хорошо: https://www.google.com/webmasters/tools/mobile-friendly/ . На картинке ниже пример, когда не всё хорошо:

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

  Проверка веб-страницы в Google на мобильность

Скачать плагин можно здесь: https://wordpress.org/plugins/wptouch/. Установка обычная и сразу после неё можно проверить сайт на мобильность в Гугле:

Страница оптимизирована для мобильных устройств

  Страница оптимизирована для мобильных устройств

В общем, всё очень просто.

Конечно, можно покопаться ещё в настройках плагина или приобрести его Pro-версию, но если вам просто нужно, чтобы Гугл был доволен – WPtouch прекрасно подойдёт.

Кстати, чтобы через десктопный браузер посмотреть, как будет выглядеть сайт с мобильного устройства, надо (для браузеров на основе Chrome) нажать F12 и в появившемся окошке перейти в режим просмотра с мобильных (красная стрелочка), а далее выбрать само устройство (белая) и обновить страницу:

Просмотр с мобильных устройств в Chrome

  Эмуляция мобильных устройств в Google Chrome

Единственное, что мне не очень нравится в этом плагине – это то, что на одних сайтах у меня отображается реклама от Google AdSense (она появляется внутри поста), а на других – нет :). Но вообще, для вставки AdSense у них предусмотрена Pro-версия.

Плагин WPtouch и кэширование на WordPress

Важный момент: в настройках кэширующего плагина следует создать два кеша – один для десктопных страниц, другой – для мобильных. В Hyper cache это делается путём установки галочки рядом с “Определять мобильные устройства”. Иначе может получиться весьма забавно – на экране компьютера отобразится мобильная версия.

Таким образом, если вам нужно получить простую мобильную версию сайта на WordPress и не терять позиций в Google, то плагин WPtouch – это то, что надо.

web-ru.net - всё о продвижении сайтов
Случайные публикации:
  • SEO-аудит сео-блога Grande-life.ru. ВидеоSEO-аудит сео-блога Grande-life.ru. Видео...- качественный сайт, с хорошим контентом и дизайном. Но с некоторыми техническими
  • Как скачать Гугл диск для ПК? Обзор программы Google drive и увеличение свободного местаКак скачать Гугл диск для ПК? Обзор программы Google drive и увеличение свободного местаУже давненько описывал я этот сервис облачного хранения данных Гугла, но с...
  • Какие счётчики ставить на сайт?Какие счётчики ставить на сайт?Как оказалось, у многих начинающих сайтовладельцев возникают вопросы с выбором...
  • Проверка бэклинков сайта сервисами MajesticSEO.com и Ahrefs.comПроверка бэклинков сайта сервисами MajesticSEO.com и Ahrefs.com...ь, что для не зарегистрированных на сервисе пользователей возможно сделать лишь 5 запросов
  • Смайлы в комментариях WordPress - плагин Qip Smiles. УстановкаСмайлы в комментариях WordPress - плагин Qip Smiles. УстановкаВ продолжение предыдущей темы украшения WordPress комментариев (WP...
Оставьте комментарий:
Отзывов всего: 10
Через сайт Через ВКонтакте Через Facebook
  1. Егор пишет:

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

    Ответить
  2. Ирина пишет:

    Может я что-то не поняла. А Ваш сайт никак не выглядит в моем мобильном адаптивно…

    Ответить
  3. Николай пишет:

    Не знаю почему, может дизайн у меня такой или руки кривые, но плагин не помог. Жаль! Придет что-то другое химичить.

    Ответить
    • Пётр пишет:

      Всё же лучше адаптивный дизайн сделать, без плагина.

      Ответить
  4. Дмитрий пишет:

    А у меня стоит WP SUPER Cash и после предпоследнего обновления WPtocch вылетело окошко, что плагины не настроены для нормальной работы друг с другом. Никак ничего поделать не могу.

    Ответить
  5. seoonly.ru пишет:

    8) сделал и себе, спасибо!

    Ответить
  6. Андрей пишет:

    Вечная проблема с этими разрешениями, под ПК, под мобилу, под планшет, под всех не подстроишся

    Ответить
  7. Znet пишет:

    Интересный вариант. Мне пока что для создания мобильных версий WP Responsive Menu очень помогал.

    Ответить
  8. Znet пишет:

    А кстати, что за плагин комментариев у вас стоит?

    Ответить
сайт web-ru.net
Я не спамлю...