Мобильная версия WordPress — плагин WPtouch

Просмотров: 4 582

Здравствуйте, коллеги! Наша тема сегодня очень важная: Мобильная версия WordPress - как сделать сайт удобным для мобильных пользователей. Поводом для написания этого поста послужило нововведение, которое ввело поисковая система Google для веб - мастеров. А именно, Google будет помечать мобильные сайты в результатах поиска и это значит, что при поиске на мобильных устройствах наличие соответствующей оптимизации будет учитываться при ранжировании результатов выдачи.

Плагин WPtouch - Мобильная версия WordPress
WPtouch - мобильная версия сайта WordPress

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

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

Адаптировать сайт для просмотра на небольшом экране
Слева сайт не адаптирован для мобильных устройств

Я например, в последнее время сразу такой веб - ресурс покидаю и забываю к нему дорогу. К чему это я?  Если ваш сайт не оптимизирован для мобильных устройств, то прощай трафик. А вам это надо? Нет, конечно. Значит будем делать мобильную версию сайта WordPress.

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

В Инструментах для веб-мастеров появился раздел "Удобства просмотра на мобильных устройствах", где вы можете выявить основные проблемы при просмотре со смартфонов и планшетов не одной страницы, а всего вашего сайта.

Google Search Console

Чтобы узнать, какие страницы вашего сайта WordPress неудобно просматривать на мобильных устройствах, воспользуйтесь соответствующим отчетом в Search Console:

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

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

Проверка оптимизации для мобильных

Инструмент проверки оптимизации для мобильных от Google: Оптимизирована ли ваша страница для мобильных устройств? Проверьте, удобно ли просматривать страницу на мобильном устройстве. Для этого введите URL страницы и ознакомьтесь с результатами ее анализа. Инструмент от Гугл - search.google.com/test/mobile-friendly

Оптимизирована ли ваша страница WordPress для мобильных устройств?
Проверка оптимизации для мобильных

Если результат плохой:

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

То надо исправлять ошибки или что делать с сайтом WordPress.

Проверка мобильных страниц Яндекс. Вебмастер

Введите адрес страницы, чтобы проверить, оптимизирована ли она для мобильных устройств:

Проверка мобильных страниц в Яндекс. Вебмастер
Проверка мобильных страниц

Хотя, и без вашего участия Google и Яндекс проверит соответствует ли ваш сайт новым требованием, а если нет или существуют ошибки, то может прийти на вашу почту такое письмо:

От Google Search Console - Сайт сайт.ru не оптимизирован для мобильных устройств и перечисляются проблемы.

От Яндекс. Вебмастер - Сайт https://ваш_сайт.ru признан не оптимизированным для мобильных устройств.

Как вы уже наверное догадались, мне такое письмо счастья пришло для одного блога. Вроде проверял, как отображается мой блог на различных устройствах и сам заходил с телефона, всё же нормально, удобно. Спорить с Google бесполезно, ему же видней и поэтому кинулся искать способы, как сделать сайт удобным для мобильных пользователей.

Как оптимизировать сайт WordPress для мобильных устройств?

Как создать мобильную версию сайта WordPress? Как правило, это означает, что вам нужно выбрать и установить новую тему, основанную на принципе адаптивного дизайна. Тогда ваш сайт будет выглядеть одинаково хорошо как на ПК, так и на мобильных устройствах. Страницы будут подстраиваться под браузер пользователя, используя один и тот же код HTML, CSS и JavaScript.

Также можно подключить Яндекс Турбо‑страницы для WordPress и создать Google AMP-версию сайта ВордПресс. И будет вам счастье. Ну, а вдруг - не будет, тогда мобильная версия WordPress сайта вас спасёт.

Если вы не хотите менять свою любимую тему / шаблон, то используйте функции WP. Оптимизировать сайт для показа на мобильных устройствах можно с помощью специальных плагинов WordPress. По рекомендации Google существуют три хороших плагина превращающие ваш сайт в полноценную мобильную версию WordPress, с одним из них, я вас и познакомлю. Мобильная версия сайта WordPress с помощью WPtouch.

Плагин WPtouch - мобильная версия сайта WordPress

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

Как создать мобильную версию сайта WordPress?
Мобильный плагин WPtouch

Самый популярный плагин мобильной версии WordPress это - WPtouch. Который советует использовать Google, не даром же, уже последовали рекомендациям поисковика более 13 064 665  пользователей. Круто!

WPtouch Mobile Plugin - это мобильный плагин для WordPress, который автоматически добавляет простую и элегантную мобильную тему для мобильных посетителей на ваш сайт WordPress. Рекомендованный Google, он мгновенно активирует мобильную версию вашего веб-сайта, которая проходит тест Google Mobile, и гарантирует, что ваше SEO не упадет из-за отсутствия мобильного веб-сайта ВордПресс.

Панель администрирования WPtouch и настройщик WordPress Customizer (визуальные настройки) позволяют настраивать многие аспекты его внешнего вида, а также предоставлять быструю , удобную и стильную версию вашего сайта посетителям вашего мобильного устройства без изменения кода:

Визуальные настройки мобильной версии сайта WordPress
Настройки мобильной версии сайта

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

Темы WordPress, используемые на сайте для обычных ПК, останутся без изменений. При отображении сайта на мобильных устройствах будет использоваться отдельная тема. На выбор доступны несколько тем. Жалко, что в бесплатной версии доступна только одна тема.

Плагин WPtouch настройка

Установить плагин можно стандартным путём, то есть, через поиск по плагинам, вводите его название устанавливаете и активируете:

WPtouch - мобильный плагин для WordPress
Установка и активация WPtouch

Далее, можно перейти к настройкам WPtouch. Обратите внимание - есть русский язык. Поэтому проблем у вас не будет с настройкой мобильной версии сайта.

И так, появится новый раздел с одноимённым названием на боковой админ панели. Сразу переходим на страницу Настройки:

WPtouch настройка
WPtouch Mobile Plugin настройки

Настроек WPtouch в бесплатной версии мало, только лишь, самое необходимое:

Как настроить мобильную версию сайта WP
Настройки мобильной версии сайта ВордПресс

Здесь, в принципе ни чего менять не надо, но можете сделать, как вам нужно. Оставьте настройки общие по умолчанию. А нажав кнопку Previev Theme (Предварительный просмотр темы) вы увидите, как выглядит ваша мобильная версия сайта WP:

WPtouch настройка мобильной версии WP (ВордПресс)
Просмотр мобильной версии сайта

Пробежитесь по всем разделам настроек плагина WPtouch. Например, настройте мобильное меню или перейдите в настройщик мобильной темы WordPress и продолжите работу:

Настройка мобильной темы WordPress
Индивидуальная настройка темы

Интерфейс настройки позволяет просмотреть изменения на мобильном сайте перед их публикацией. Вы можете переходить на другие страницы сайта в режиме предпросмотра. Можно визуально, легко настроить мобильную версию сайта WordPress. Нажимаем каждый пункт и настраиваем нужные параметры:

Мобильная версия WordPress - плагин WPtouch 1
Настройки мобильной версии сайта WP

После не забываем нажать кнопу Опубликовать.

Да, вы можете для мобильного меню выбрать иконки/значки. По умолчанию, загружена тема значков Elegant, но если вам эти иконки не подходят, то можно загрузить свой пользовательский набор или установить дополнительные. Для этого нужно нажать вкладку "Загрузка и наборы значков" и выбрать набор из списка:

Набор значков для мобильного меню сайта WP
Набор значков для меню - плагин WPtouch Mobile

После присвоения каждому пункту своего значка нажимаем Посмотреть тему - Раскрываем меню и радуемся нашим успехам:

Мобильная версия блога Школа Bloggera
Мобильная версия блога

И наше меню с иконками:

Меню в мобильной версии сайта ВордПресс
Меню в мобильной версии сайта

Ура, дорогие друзья, вот мы и сделали мобильную версию сайта. Теперь, нам остаётся проверить удалось ли оптимизировать сайт WordPress для мобильных устройств? Давайте проверим и посмотрим,  что на это скажет наш любимый Google.

Заходим снова сюда - https://www.google.com/webmasters/tools/mobile-friendly/ вводим URL сайта или отдельной страницы, ждём пару секунд и опля, наш результат такой: 

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

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

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

Удачи, до новых встреч.

P.S.  Google с 21 апреля начнет использовать новые алгоритмы поиска

С 21 апреля Google начнет использовать новые алгоритмы поиска. В результате предпочтение будут отдавать в первую очередь мобильным версиям интернет-ресурсов вне зависимости от того, будет ли поисковик выдавать запрос пользователю для стационарного компьютера, ноутбука, планшета или смартфона.

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


25 комментариев к “Мобильная версия WordPress — плагин WPtouch”

  1. Сергей, здравствуйте! Спасибо Вам за понятную инструкцию. Сегодня попробую по ней настроить себе мобильную версию, а то совсем беда:)

    Ответить
    • Привет, Виктория! У вашей темы (моя схожа с вашей) вроде адаптивный дизайн, зачем вам ещё создавать мобильную версию. Или я ошибаюсь? 🙂

      Ответить
  2. Большая спасибо за полезную информацию все пробавал на моем сайте все прекрассно

    Ответить
  3. Ставил себе на сайт такой плагин, но не смог разобраться куда вставлять код счетчиков, так как без кодов не получается отслеживать полноценную статистику сайта…

    Ответить
      • Здравствуйте. скачал и установил плагин, всё отлично работает, только вот на пк сайт тоже показывает мобильную версию, никак не могу решить эту проблему ((с чем это может быть связано ?

        Ответить
        • Привет!
          Поищи в настройках, может где галочкой отмечено или наоборот, не отмечено.

          Ответить
          • самое, что интересно всё сделано правильно. Думал может шаблон, сменил его. Потом сменил и плагин, безтолку всё равно оба версии мобильные

  4. День добрый. Поставила плагин. Настроила все как сказано выше. На мобильнике отображается сайт как положено. Но гугл почему то все равно пишет «Не оптимизировано для мобильных устройств». Подскажите если кто знает пожалуйста.

    Ответить
    • Здравствуйте,Вика!
      У вас отображается мобильная версия сайта даже на компьютере, может в настройках ошиблись. Попробуйте другие плагины, здесь, у меня, есть их обзор. 🙂

      Ответить
  5. Отлично! Спасибо за полезную статью, очень помогли. По умолчанию моя тема не поддерживала мобильный вид, сейчас всё здорово..

    Ответить
  6. Здравствуйте. Подскажите , пожалуйста, два момента:
    1) На мобильном вместо «поиска, меню,….» отображаются иероглифы, как сделать,чтобы было как у вас http://wordpressmania.ru/wp-content/uploads/2015/03/mobilnaja-versija-sajta-shkola-bloggera.jpg ? В настройках, конечно, полазил уже.
    2) Может подскажите, с мобильного в Хроме,Сафари не отображается сайт , просто белый «лист».
    Спасибо.

    Ответить
  7. Хороший плагин но как быть с рекламой? Интересно было бы изменить тему и подогнать ее под адаптивную. Только вот как ??? Если например не хочется менять старую….
    Кстати посоветуйте хорошие адаптивные темы на ворд пресс

    Ответить
  8. Спасибо! Тоже попробовал несколько вариантов, предложенных вами и выбрал себе тот, который заработал!
    Гугл одобрил)

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

    Ответить
  10. Очень полезная инфа. Гуглу очень трудно угодить, вечно всем недоволен. Ради прикола проверил сам сайт Гугл так вообще тихий ужас. С нас требует, а сам в красной зоне находится. Вообще не оптимизирован, но с нас все равно требует. Парадокс.

    Ответить
  11. Есть один нюанс. Если мобильный сайт должен иметь ту же структуру, что и декстопный? Например расположение какой-то кнопки или, например, лендинг пейдж. Тогда только адаптивная верстка.
    Хотя, признаюсь, для блога плагин не плохой.

    Ответить
  12. Привет!
    А может подскажешь как активировать иконку в меню(три полоски). У меня они не срабатывают.
    Только по поиску работает

    Ответить
    • Привет! Не могу подсказать, так как у меня все темы адаптивные под мобильные устройства. Я плагином не пользуюсь.

      Ответить
  13. Та же самая ерунда. Шаблон адаптивный, но гугл ругается. По всей видимости, это плагин кэширования, который минимизирует js и css код. На любых другух «проверялках» адаптивность шаблона подтверждена, а вот Гуглу не угодишь. При этом если чистить кэш, то до повторного кэширования проверку проходит на ура. Буду пробовать ваш плагин.

    Ответить

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