Создание мобильной версии сайта на WordPress с помощью плагина WPtouch
Многие вебмастера в марте этого года получили уведомления от Google Webmaster о том, что сайт некорректно отображается на экране мобильного устройства и это может ухудшить его ранжирование в мобильном поиске Google с 21 апреля. Кажется, так и стало происходить.
Я также получил много подобных уведомлений и для ряда сайтов на WordPress стал использовать простейшее решение – плагин WPtouch. Так что сейчас о нём и расскажу, но сначала кое-что о способах создания мобильных версий.
Способы адаптации сайта под мобильные устройства
Всю информацию можно взять из справки Гугла. Главное, что следует понять: существует 3 подхода к этой адаптации:
- Адаптивный дизайн – код страницы не меняется, но меняется отображение элементов в зависимости от размера экрана устройства.
- Динамический показ – код страницы меняется в зависимости от типа устройства (сервер определяет тип устройства и выдаёт разный код для разных устройств).
- Разные URL – для мобильной версии открывается страница с другим URL (например, http://m.vk.com для ВКонтакте).
Мне, как и Гуглу, больше всего нравится 1-й вариант. Это более универсальный и, если можно так сказать, основательный способ создания мобильной версии. Но каждому сайту тут будет нужен индивидуальный подход.
В то же время, для большинства простых контентных сайтов на WordPress подойдёт второй способ, тем более, что с помощью плагина WPtouch всё происходит крайне быстро и просто.
(Это я всё написал, чтоб вы понимали, нужно ли вам ставить плагины, или вы хотите позаморачиваться с переходом на адаптивный дизайн).
Мобильная версия сайта на WordPress с помощью плагина WPtouch
Прежде, чем ставить плагин, проверьте – может у вас уже всё хорошо: https://www.google.com/webmasters/tools/mobile-friendly/ . На картинке ниже пример, когда не всё хорошо:
Проверка веб-страницы в Google на мобильность
Скачать плагин можно здесь: https://wordpress.org/plugins/wptouch/. Установка обычная и сразу после неё можно проверить сайт на мобильность в Гугле:
Страница оптимизирована для мобильных устройств
В общем, всё очень просто.
Конечно, можно покопаться ещё в настройках плагина или приобрести его Pro-версию, но если вам просто нужно, чтобы Гугл был доволен – WPtouch прекрасно подойдёт.
Кстати, чтобы через десктопный браузер посмотреть, как будет выглядеть сайт с мобильного устройства, надо (для браузеров на основе Chrome) нажать F12 и в появившемся окошке перейти в режим просмотра с мобильных (красная стрелочка), а далее выбрать само устройство (белая) и обновить страницу:
Эмуляция мобильных устройств в Google Chrome
Единственное, что мне не очень нравится в этом плагине – это то, что на одних сайтах у меня отображается реклама от Google AdSense (она появляется внутри поста), а на других – нет.
Но вообще, для вставки AdSense у них предусмотрена Pro-версия.
Плагин WPtouch и кэширование на WordPress
Важный момент: в настройках кэширующего плагина следует создать два кеша – один для десктопных страниц, другой – для мобильных. В Hyper cache это делается путём установки галочки рядом с “Определять мобильные устройства”. Иначе может получиться весьма забавно – на экране компьютера отобразится мобильная версия.
Таким образом, если вам нужно получить простую мобильную версию сайта на WordPress и не терять позиций в Google, то плагин WPtouch – это то, что надо.
Похожие материалы:
- Управление и настройка постоянных сслылок в WordPress
- Яндекс запускает новую версию сервиса Вебмастер (Бета)
- Один простой трюк, который способен повысить конверсию сайта
Как адаптировать сайт под мобильные устройства?
С ростом количества мобильных устройств на рынке информационных технологий увеличивается и спрос на модернизацию сайтов под соответствующие ОС и разрешения экранов. По данным статистики, не менее 40% трафика для интернет-портала, блога, интернет-магазина или иного ресурса составляют пользователи планшетов и смартфонов.
Учитывая рост тенденции, компания Google внедрила в поисковые алгоритмы новые разделы, целью которых является анализ сайта на пригодность при просмотре с мобильного устройства. Если шаблон не адаптирован под мини-технику с учетом скорости работы процессора и разрешения экрана, поисковый робот не включает такую площадку в список выдачи для пользователя.
Поэтому для увеличения количества посещений уважающему себя сайту требуется подходящая адаптация.
Что нужно сделать для адаптации ресурса для мобильных устройств?
- Провести оптимизацию скорости загрузки страниц.
- Не использовать в структуре сайта многоступенчатое меню.
- Адаптировать шаблон под распространенные разрешения экранов.
- Исключить лишние Flash-элементы либо использовать скрипты Java.
- Удалить многоступенчатое меню, заменить на интуитивно понятное и облегченное.
Изменить стили в шаблоне сайта
Данный способ рассчитан на использование медиа-запросов в стилях файла CSS. С их помощью определяется размер окна браузера, после чего идет отображение специально прописанного в коде стиля. Таким образом меняется разметка страницы, величина картинок, размер шрифта и прочие показатели usability сайта. Минимальным набором расширений считается следующий:
- стандартный для компьютера;
- для планшетов — 992 px * 768 px;
- для смартфонов — 480 px * 320 px.
Мобильная версия сайта на поддомене
Если на страницах насчитывается до 90% графики и медиа, не имеющих отношения к основному текстовому контенту, привалирующим выбором становится создание отдельной мобильной версии сайта на поддомене, начинающемся как, например, m.ваш_сайт.ru
В таком случае основной ресурс снабжается алгоритмом, определяющим источник запроса. При получении информации о переходе со смертфона или планшета происходит автоматический переход пользователя на специальную версию на поддомене. Для корректной работы потребуется создать новую верстку страниц, подключить мини-версию к общей базе данных и снабдить ее необходимыми системными библиотеками.
Домены в популярных национальных и международных зонах со скидкой — домены России в зоне .RU, и .РФ, международные домены .COM, .NET, .BIZ, .ORG, .ME.
Использовать адаптивный дизайн
Адаптивный дизайн веб-ресурса представляет собой дизайн, направленный на правильное отображение страниц ресурса вне зависимости от типа устройства. Для небольших сайтов такое направление приоритетно, поскольку экономит средства на разработку и увеличивает посещаемость в целом, не разделяя ее на два потока — с ПК и мобильных устройств.
Определяющие отличия от мобильной версии:
- нет необходимости скачивать отдельное приложение или переходить на другую версию сайта;
- не требуется создавать разные типы мини-версий под каждую ОС;
- одна работа ресурса вместо синхронизации или автономной двойной работы структур.
Как быстро адаптировать сайт под мобильные на примере WordPress
Процесс проводится одним из двух доступных способов:
- Самостоятельная обработка для «подгонки» под смартфоны и планшеты.
- Использование специализированного плагина.
Первый вариант подразумевает, что у создателя сайта достаточно знаний для создания отдельного шаблона. Его нельзя перегружать лишними картинками и эффектами. Это увеличит скорость обработки страниц и функциональность ресурса. Требуемого эффекта помогут добиться:
- контроль масштаба страницы и ее элементов в зависимости от экрана аппарата;
- тщательная проверка кода, иначе площадку не увидят мобильные браузеры;
- использование SEO-принципов продвижения в условиях мини-формата.
Второй способ предлагает внедрение плагина в структуру интернет-сайта. Наиболее распространена платформа WordPress, для которой подойдет «WP Mobile Detect». Его активация самостоятельно оптимизирует контент и при необходимости поменяет тему.
Выбор плагина проводится с учетом имеющихся CMS, поскольку обычно плагин совместим с одной определенной CMS.
Практически все популярные современные системы управления контентом позволяют использовать адаптивные шаблоны «из коробки». Если выбранный Вами «движок» этого не позволяет – это повод задуматься о выборе другого программного решения.
Подведем итоги
Выбор способа адаптации определяется категорией и величиной сайта. Распределение решений идет примерно следующим образом:
- Адаптивный дизайн — визитки, блоги, информационные сайты, форумы, промо-страницы и прочие источники «легкого по весу» контента.
- Создание отдельного шаблона — для среднего сегмента загруженности: информационные ресурсы, форумы, интернет-магазины.
- Мобильная версия на поддомене — крупные интернет-магазины, социальные сети, порталы и каталоги.
Linux VPS SSD хостинг в Москве с KVM виртуализацией — полный доступ к виртуальному выделенному серверу, возможность установки необходимого ПО.
WordPress-плагины для адаптации сайта под мобильные устройства
На сегодняшний день трудно переоценить большую популярность мобильных устройств с возможностью доступа во Всемирную паутину. Поэтому, с ростом мобильного трафика, растет и актуальность адаптации сайтов под мобильные устройства. Так, шагая в ногу со временем, владельцы сайтов стараются сделать так, чтобы их веб-ресурсы корректно выглядели и работали не только на экране ноутбука или ПК, но и на смартфоне или планшете. Плагины, о которых будет идти речь, позволят Вашему WordPress-сайту стать доступным для мобильных пользователей и при этом сохранят его дизайн и структуру.
Плагин WPtouch
Этот плагин не тестировался с 3 последними версиями WordPress. Это нехороший звоночек. Возможно, разработчики перестали его поддерживать. Установку не рекомендую. Могут быть проблемы с совместимостью.
Данное программное решение не тестировалось с последними 3 обновлениями WordPress. Возможно, он больше не поддерживается и может быть несовместим со свежими версиями CMS.
Три последние обновления WordPress обошли плагин сторон. Это значит, что он может быть несовместим со свежими обновлениями WP, и в скором времени будет закрыт автором.
Довольно простой плагин
Плагин был закрыт по запросу самого разработчика с 9 апреля 2021 года и больше недоступен для скачивания из репозитория WP.
WP Mobile Edition — модуль, включающий все возможности предыдущего, но имеющего поддержку системы комментирования fpm_start( «true» );
Качественный адаптивный шаблон как альтернатива
Искать и настраивать адаптивные плагины в эпоху ранжирования mobile-first — вчерашний день. Берите готовый шаблон под WordPress, который можно адаптировать под любую тематику. Например, один из самых популярных в Рунете — Reboot WPShop.
Забирайте с промокодом и забудьте про глючные плагины. Бонусом — год бесплатной техподдержки от разработчика.
В качестве заключения
Если требуется выбрать простое и бесплатное решение для корректного отображения веб-сайта на мобильных устройствах, то можно смело воспользоваться WPtouch. Если же необходимо лишь активизировать для мобильных пользователей более легкую тему — Any Mobile Theme Switcher вполне достойное решение при условии, что на вашем сайте старая версия WordPress, и вы не планируете ее обновлять.
Нажмите, пожалуйста, на одну из кнопок, чтобы узнать понравилась статья или нет.
Как адаптировать сайт под мобильные устройства wordpress
После редактирования в десктопный вариант нужно добавить виджет, информирующий о том, что доступна мобильная версия, которая находится на другом домене:
Мобильная версия для ресурсов WordPress
При оптимизации сайта для мобильных устройств в WordPress самым простым решением будет изменение темы на адаптивную либо установка плагина для мобильной версии. При использовании темы с адаптивным дизайном ресурс выглядит таким образом в полной версии:
А так — в мобильной:
В адаптивном варианте изображение меняет размер с учетом ширины экрана смартфона, меню открывается с помощью клика на значок в виде трех горизонтальных линий, блоки, расположенные в правой части десктопной версии, переносятся вниз.
Чтобы выбрать тему с адаптивным дизайном для собственного проекта, перейдем в подраздел «Темы» раздела «Внешний вид» и нажмем «Добавить новую»:
В фильтрах характеристик выберем «Адаптивный дизайн» и нажмем «Применить фильтр»:
Получим список тем с адаптивным дизайном, среди которых можно выбрать наиболее подходящую для собственного проекта:
Также для WordPress можно использовать следующие плагины:
Google Accelerated Mobile Pages (AMP) — библиотека с открытым программным кодом, помогающая создавать быстро загружающиеся упрощенные версии страниц сайта, которые хорошо выглядят на смартфонах.
Принцип работы строится на том, что создается дубликат ресурса с использованием AMP HTML. При этом отключаются скрипты, которые замедляют скорость загрузки сайта, после чего средствами Google страницы сайта обрабатываются для наиболее быстрой загрузки.
Установим и активируем плагин, затем перейдем к его настройке — для этого зайдем в подраздел «Settings» раздела «AMP». Загрузим логотип и сохраним изменения, нажав «Save changes»:
Затем перейдем в раздел «Design» для работы над внешним видом мобильной версии:
Выберем тему оформления:
После выбора темы можно изменить цвета и шрифты в разделе «Global», настроить хэдер и футер, например, добавить кнопку звонка во вкладке «Header». В разделе «Social» можно добавить кнопки социальных сетей.
После завершения настройки активируем в разделе «Advance Settings» перенаправление на AMP-версию сайта для мобильных устройств:
После этого ресурс на портативных устройствах будет выглядеть таким образом:
2. WPtouch
Также в WordPress можно использовать плагин WPtouch. Перейдем в раздел «Плагины», выберем «Добавить новый», найдем WPtouch с помощью поиска и нажмем «Установить»:
После этого активируем плагин и перейдем к его настройке:
В плагине можно настроить тему:
Здесь можно отрегулировать цветовую схему сайта, добавить при необходимости иконку. Доступен предварительный просмотр внесенных изменений в эмуляторе мобильного телефона:
После внесения изменений на реальном смартфоне сайт выглядит так:
В подвале отображаются кнопки переключения мобильной и компьютерной версий:
Помимо указанных, можно использовать следующие плагины:
- PageBuilder — конструктор для создания адаптивного дизайна:
- Mobile Smart — определяет, с какого устройства зашел посетитель, и показывает десктопную либо мобильную версию ресурса:
- WP Mobile Edition — позволяет создавать мобильную версию на субдомене:
Мобильная версия проекта на субдомене
В соответствие с рекомендациями поисковых систем, мобильную версию рекомендуется создавать на поддомене. При этом обычно используется единая база данных для родительского домена и субдомена. Посетитель автоматически перенаправляется на субдомен, если он зашел на ресурс с портативного устройства.
Мобильная версия имеет облегченный вес и упрощенный дизайн, однако на ней должны быть доступны все страницы, которые есть на основной версии. Также в мобильной версии должна быть возможность перейти на основную версию.
Согласно рекомендациям Google, чтобы поисковики не считали контент на мобильной версии дублированным, необходимо в код каждой страницы полной версии добавить: