Добро пожаловать, друзья!

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

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

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

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

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

В Инструментах для веб-мастеров появился раздел "Удобства просмотра на мобильных устройствах", где вы можете выявить основные проблемы при просмотре со смартфонов и планшетов не одной страницы, а всего вашего сайта. Хотя, и без вашего участия Google проверит соответствует ли ваш сайт новым требованием, а если нет или существуют ошибки, то может прийти на вашу почту такое письмо - Сайт сайт.ru не оптимизирован для мобильных устройств и перечисляются проблемы. Как вы уже наверное догадались, мне такое письмо счастья пришло для одного блога. Вроде проверял, как отображается мой блог на различных устройствах и сам заходил с телефона, всё же нормально, удобно. Спорить с Google бесполезно, ему же видней и поэтому кинулся искать способы, как сделать сайт удобным для мобильных пользователей.

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

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

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

Плагин WPtouch Mobile Plugin - мобильная версия сайта WordPress
WPTouch – плагин для создания мобильной версии сайта

Самый популярный модуль WPtouch который советует использовать Google, не даром же, уже последовали рекомендациям поисковика более 6 778 799 пользователей. Круто! WPTouch – мобильный плагин, который служит для создания отдельной версии сайта, оптимизированной для мобильных устройств. Темы, используемые на сайте для обычных ПК, останутся без изменений. При отображении сайта на мобильных устройствах будет использоваться отдельная тема. На выбор доступны несколько тем. Жалко, что в бесплатной версии доступна только одна тема.

Установить плагин можно стандартным путём, то есть, через поиск по плагинам, вводите его название устанавливаете и активируете. Далее, можно перейти к настройкам WPtouch, обратите внимание, что есть русский язык, поэтому проблем у вас не будет с настройкой мобильной версии сайта.

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

WPtouch - Базовые настройки
Базовые настройки плагина WPtouch Mobile Plugin

Здесь, в принципе ни чего менять не надо, но можете сделать, как вам нужно. После не забываем нажать кнопу "Сохранить изменения". Затем, открываем страницу Темы и расширения. Тут, друзья, рассчитывать на многое не приходится. Бесплатно только одна единственная темка, вот её и нажимаем для настроек параметров:

Выбор темы в WPtouch
Темы и расширения плагина WPtouch Mobile Plugin

Отметьте в общих настройках то, что вам будет доступно и сохранитесь:

Общие настройки темы Bauhaus
WPtouch - Параметры Bauhaus

Во вкладке "Фирменная символика" можно выбрать: Цвета Темы; Стиль шрифта; загрузить эмблему для сайта и указать ссылки на социальные сети:

WPTouch – плагин, который служит для создания отдельной версии сайта, оптимизированной для мобильных устройств
Параметры Bauhaus цвет темы плагина WPtouch

Всё, здесь нам больше ловить не чего, остальные вкладки даже можно не открывать, показ рекламы на мобильной версии сайта не доступна. Блин, тем кто зарабатывает на рекламе очень хреново. Надо искать альтернативный плагин или покупать PRO версию плагина. Ладно, пока идём дальше. Открываем подраздел "Меню" и выбираем из списка (если у вас два и больше), какое меню вашего сайта отображать в мобильной версии блога:

WPtouch Mobile Plugin
Тематическое меню мобильной версии сайта- плагин WPtouch Mobile Plugin

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

Значки для меню мобильной версии сайта
Перетащите значки, чтобы связать их с пунктами меню

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

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

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

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

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

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

Ура, дорогие друзья, вот мы и сделали мобильную версию сайта. Теперь, нам остаётся проверить удалось ли оптимизировать сайт WordPress для мобильных устройств? Давайте проверим и посмотрим,  что на это скажет наш любимый Google. Заходим сюда (или в Инструментах для веб-мастеров) - https://www.google.com/webmasters/tools/mobile-friendly/ вводим URL сайта или отдельной страницы, ждём пару секунд и опля, наш результат такой: Отлично! Страница оптимизирована для мобильных устройств, а в PageSpeed Insights: 100 / 100 Удобство для пользователей:

Проверка блога в PageSpeed Insights
Удобство для пользователей - PageSpeed Insights

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

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

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

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

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

Комментарии

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

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

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

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

    • А раздел пользовательский код для статистики. 🙂

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

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

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

        • Это связано с плагином кеширования.

  • А сколько платные темы стоят?

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

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

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

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

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

  • Проблема так и не решена так и показывает на пк мобильную версию

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

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

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

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Решите задачку: *