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

Всем здравствуйте!

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

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

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

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

Если этого не сделать сейчас, то в недалеком будущем ваш ресурс будет терять значительную часть своих посетителей и возможно даже потенциальных клиентов. Если у вас установлен счетчик от Яндекс.Метрики вы можете посмотреть, какой процент посетителей посещает ваш сайт, используя мобильное устройство. Если в качестве примера взять мой блог, то количество мобильных посещений/в месяц, варьируется в диапазоне 5% и эта цифра постоянно растет:

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

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

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

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

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

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

Мы же с вами поступим немного иначе и для адаптации блога под мобильники воспользуемся профессиональным для этих целей плагином WPtouch, который богат разнообразием функций и подходит под большинство распространенных девайсов.

Единственный минус плагина в том, что его нынешняя версия не имеет русскоязычный перевод, поэтому без знаний английского языка разобраться будет сложновато. Но в данной статье я расскажу об его основных функциях и настройках, поэтому не переживайте, разберетесь!

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

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

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

Скачать плагин можно с этой страницы. Установка и активация плагина стандартные, но если вы сталкиваетесь с установкой впервые, эта статья будет вам в помощь. В ней описаны все способы установки плагинов.

После того, как плагин будет активирован, в административной панели блога появится дополнительная вкладка WPtouch, которая содержит в себе еще несколько вкладок с настройками:

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

1. What's New

Данная вкладка несет информативный характер. В ней описаны все привилегии новой версии плагина, основными из которых являются более гибкие, удобные и функциональные настройки, красивый дизайн и совместимость со всеми основными девайсами, имеющими платформы IOS, Android, Blackberry и WindowsPhone.

2. Core Settings/General

• Site Title & Byline — впишите название сайта.
• Regionalization — язык плагина. Хоть среди списка и можно найти русский язык, но поддержка его полностью отсутствует, поэтому оставляйте все как есть.
• Display Mode — режим отображения. Если выбрать первый вариант (Normal), мобильная версия сайта будет доступна всем посетителям. Второй вариант предназначен только для администратора ресурса, и третий — устанавливает запрет для мобильных версий.
• остальные пункты этой вкладки оставьте по умолчанию. Если вы вносите какие-либо изменения, не забывайте нажимать кнопку «Save Changes» для сохранения настроек.

3. Core Settings/Compatibility

Поля данной вкладки предназначены для исключения не желаемых URL — адресов и страниц, не нуждающихся в адаптации под девайсы.

4. Themes & Extensions

В этой вкладке описаны различные виды дизайнов, каждый из которых по своему интересен и выбор зависит от предназначения и функциональности сайтов. По умолчанию установлен самый первый вариант и судя по описанию, он подходит под большинство типов сайтов. К тому же остальные виды дизайнов доступны для профессиональных версий (PRO) и чтобы ими воспользоваться придется заплатить.

5. Theme Settings/General

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

6. Theme Settings/Branding

Эта вкладка предлагает нам настроить цветовую гамму сайта. Можно задать цвет ссылок, заголовков постов и страниц или же полностью поменять цвет фона. Вместо названия блога можно загрузить логотип, а в поле «Theme Footer» прописать копирайт (авторское право). Поэкспериментируйте, может получиться довольно не плохой дизайн.

7. Menu/Menu Setup

Данная вкладка позволяет выбрать страницы для отображения в основном меню блога, а так же для каждой из страниц подобрать подходящую иконку, путем перетаскивания ее в соответствующее поле:

8. Apgrade to Pro

И последняя вкладка, которую мы сегодня рассмотрим, аналогична первой... В ней описаны все преимущества профессионального аккаунта по сравнению со стандартным. Но еще раз повторюсь, аккаунт Pro — платный!

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

-->Подписаться на обновления блога<--

Как вам статья? А вы адаптировали свой блог для мобильных устройств? Возможно, вам известен другой способ? Поделитесь им в комментариях к данному посту.

С уважением, Николай Коротков