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

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

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

WPTouch Pro — это платный плагин для WordPress, который может превратить ваш сайт на WordPress в «родной» для современных мобильных браузеров. Он быстр, поддерживает множество языков, интегрируется на главный экран iOS и предоставляет множество способов улучшить юзабилити для пользователей мобильных платформ.

После того, как вы приобретете WPTouch Pro, вы получите лицензионный ключ, а затем скачаете сам файл плагина. Его необходимо установить на ваш блог, а затем активировать из консоли.

После активации плагин отобразит уведомление о том, что необходимо ввести код лицензии. Его нужно ввести для того, чтобы получать обновления плагина, скачивать темы и дополнения. Кликните на ссылку ‘activate your License’ для того, чтобы ввести ваш лицензионный ключ.

На следующей странице просто введите электронный адрес вашего аккаунта (тот, на который вы приобрели плагин) и ваш ключ продукта, а затем нажмите кнопку активации. WPTouch проверит вашу лицензию и выведет уведомление об успешном выполнении.

После активации плагин добавляет меню WPTouch Pro menu в админ.бар WordPress. Для настройки плагина вам необходимо перейти в раздел WPTouch Pro » Core Settings административной панели сайта.

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

Следующая настройка на этом экране — Regionalization (Региональность). WPTouch Pro автоматически определяет язык вашего сайта из вашей установки WordPress, однако вы также можете самостоятельно выбрать язык, используя эту опцию.

Настройка Display на странице основных опций позволит вам вручную отключить мобильную версию, без деактивации плагина. Значение по-умолчанию — Normal, которое включает отображение мобильной темы для всех посетителей, заходящих на сайт с помощью мобильных устройств. Вы можете изменить это значение на Preview, и в этом случаем мобильная тема будет отображаться только для администраторов сайта, когда они залогинены под свой учетной записью. Также можно выбрать значение Disabled для того, чтобы полностью отключить мобильную тему.

Также доступны некоторые продвинутые настройки на странице конфигурации. Например, вы можете выбрать собственную landing page для мобильной версии вашего сайта. Вы также можете добавить произвольный код, который появится в футере темы. Еще можно сделать резервную копию всех настроек WPTouch Pro, а затем импортировать их на другом сайте на WordPress site с WP Touch Pro. Это полезная опция, если у вас есть тестовый сайт или локальная копия блога.

После того, как вы закончите с настройками, можно осуществить предпросмотр мобильной версии, кликнув для этого на кнопку Preview Theme внизу этой страницы. Как только вы будете удовлетворены результатом, кликните на кнопку Save Changes для того, чтобы сохранить ваши изменения.

Изменяем мобильную тему в WPTouch Pro 3

По-умолчанию, в WPTouch Pro 3 присутствует одна предустановленная тема. Но вы можете скачать и установить дополнительные темы из WPTouch Pro » Themes & Extensions. Bauhaus, CMS, Classic Redux, и Simple — это темы, доступные во всех версиях лицензии. Для того, чтобы установить тему, просто кликните на кнопку Install под темой. WPTouch Pro скачает тему из облака и установит ее. После того, как тема будет установлена, вы можете кликнуть на кнопку активации для того, чтобы начать ею пользоваться.

Настраиваем вашу мобильную тему в WPTouch Pro3

После того, как вы выберете тему для вашего мобильного сайта, вероятно вы захотите ее настроить под свои нужды. Для этого вам необходимо перейти в WPTouch Pro » Theme Settings. Мобильные темы WPTouch Pro очень хорошо настраиваются. Можно оттюнинговать любой элемент вашего мобильного сайта из настроек темы. Мы пройдемся по каждому из этих разделов настроек тем.

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

После того, как вы проделаете изменения в вашей теме, вы можете осуществить их предпросмотр с помощью кнопки Preview Theme внизу страницы. Как только вы достигните желаемого результата, кликните на кнопку Save Changes для того, чтобы сохранить ваши изменения. Также предусмотрена кнопка сброса настроек, если в этом возникнет потребность.

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

Превращаем ваш сайт в мобильное веб-приложение

WPTouch Pro позволяет вам воспользоваться всеми возможностями мобильных устройств превратив ваш сайт в веб-приложение. Для этого необходимо кликнуть на вкладку Bookmark Icons на странице настроек. Вам нужно загрузить две иконки: одну для устройств на Android, другую же — для iOS (iPhone, iPod, и iPad).

После этого кликните на вкладку Web-App Mode в настройках темы. Просто отметьте галочку для того, чтобы включить режим iOS web-app, и это действие включит расширенные настройки для режима web-app. Вы также можете выбрать либо стандартные настройки, либо загрузить ваши собственные приветственные страницы.

Монетизация вашего сайта с WPTouch Pro

Темы WPTouch Pro также позволяют с легкостью выводить блоки рекламы на вашем мобильном сайте. Необходимо перейти на вкладку Advertising под настройками темы и выбрать Google Adsense либо другой рекламный сервис.

Для Google Adsense вам необходимо ввести ваш Google Adsense publisher ID и slot ID, которые можно получить в вашем аккаунте Google Adsense. После этого необходимо выбрать место, где выводить эти блоки. Сохраните изменения и ваш сайт готов отображать рекламу.

Настраиваем меню навигации для мобильного сайта в WPTouch Pro

WPTouch Pro использует стандартный функционал меню WordPress, однако позволяет вам модифицировать или выбрать способ отображения меню на вашем мобильном сайте. Для настройки меню вам необходимо перейти в WPTouch Pro » Menus. Для начала выберите меню. Можно задать вывод страниц WordPress в меню либо же выбрать существующее меню.

На вкладке Menu Setup вы можете продолжить настройку вашего меню WordPress. Можно задать иконки каждому элементу путем простого перетягивания иконки на элемент.

По-умолчанию в WPTouch Pro идет набор иконок Elegant, разработанный Elegant Themes. Можно установить другие наборы, кликнув на кнопку Install рядом с ними или же загрузить собственный набор.

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

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

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