Как сделать iPhone/iPad-версию сайта

4

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

А задача проста — реализовать легкую и удобную для просмотра версию сайта на iPhone/iPad и подобных устройствах.

У плагина есть бесплатная версия, но она не была мне интересна по причине отсутствия самых интересных функций по настройке и персонализации (с их отличиями вы можете ознакомиться на официальном сайте). Поскольку обзоров в сети не нашлось, мне пришлось обратиться к разработчикам, которые предоставили мне 7-дневный тест-драйв как потенциальному клиенту.

Установка

Установка WPtouch происходит также, как и любой другой темы. Просто загружаем его в папку Plugins на вашем FTP, или делаем то же самое через адимн-панель WordPress и активируем его. Вот собственно и все, ваша мобильная версия сайта готова к работе и автоматически будет активироваться, если вы зайдете на сайт при помощи устройства под управлением iOS, Android, Bada или Blackberry.

Для того, чтобы проектировать тему при помощи обычного компьютера и браузера Safri, нужно сделать следующее.

  1. Зайдите в настройки Safari (cmd+,), а затем во вкладке Дополнительно включите Меню разработчика.
  2. В меню Разработка→Пользовательский Агент выберите Mobile Safari.
  3. Теперь вы можете проверить, как работает тема нашего сайта.

Настройка

Стандартная тема оформления и вид сайта похожа на бесплатную тему и называется Classic 2.0, но в отличие от бесплатной, она быстро настраивается под себя:

Во вкладке General →General Options можно:

  • выбрать название сайта
  • отключить логотип «Powered by WPtouch Pro» в подвале блога
  • выбрать язык интерфейса (Русского пока нет)

Safari.png

  • указать домашнюю страницу мобильной темы
  • изменить сообщение 404, а также добавить собственный код в футер

Все остальные настройки доступны уже через вкладку Classic 2.0→Menu, Posts and Pages:

  • включение AJAX для темы
  • подробная настройка верхнего меню
  • настройка анонсов статей (показывать/не показывать автора/категории/теги/дату, а также способ отображения текста анонса)
  • аналогичные настойки для единичной записи

Safari.png

  • отображение комментариев в постах, а также на главной странице

Во вкладке Classic 2.0→Style/Appearance:

  • настраивается логотип (можно загрузить изображение с разрешением вплоть до 540×88 пикселей для iPhone 4). Я же остановился на маленьком логотипе в виде иконки + обычный текстовый заголовок

Safari.png

  • доступны настройки по оформлению всего текста (шрифт/цвет/размер)
  • настройки по изменению фона
  • и, пожалуй, самое интересное — настройка изображений превью. В моем случае, они автоматически подтягиваются из поля thumbnails блога. Выглядит очень симпатично:

Safari.png

Safari.png

При нажатии на стрелочку в правом верхнем углу мы получаем краткую информацию о статье:

Safari.png

Обратите внимание на информацию в Classic 2.0→Style/User Agents. Здесь указана все клиенты, для которых будет автоматически активироваться тема WPtouch:

Safari.png

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

Теперь перейдем во вкладку Menu+Icons. Как понятно из названия, здесь сосредоточены настройки верхнего меню и их иконок. Вся работа выполнена по принципу драг-н-дроп, просто перетягиванием одну из доступных иконок (или загруженную вами) на элемент меню. Для создания своей иконки можно воспользоваться psd-шаблонами, которые доступны для загрузки прямо из этой вкладки. На основе этого шаблона я и переработал логотип нашего сайта для мобильной темы:

Safari.png

Кроме всего этого, нужно отметить и следующие особенности WPtouch:

  • возможность добавить до 3х уникальных элементов меню, которые будут видны только с мобильных устройств
  • возможность размещения рекламного блока с заголовке или фетере темы (Adsense, Admob Ads или собственная реклама)
  • возможность работы в режиме Веб-приложения
  • полная поддержка как экранов обычных iPhone, так и Retina-экранов

Если и этого вам мало, то никто не мешает вам модифицировать код темы самостоятельно, благо, он хорошо документирован.

В итоге получилось следующее:

Для того, чтобы оценить работу WPtouch наглядно, рекомендую зайти на сайт c iPhone.

Поделиться
Сохранить
  • Alexei

    Судя по данному сайту плагин глючный и требует доработки

  • плагин очень удобный, все отлично работает. Использую wptouch pro 2.6

  • Вот при просмотре блога с шаблоном Wp Touch есть кнопка «Переключить на обычную тему». Как сделать на обычной теме кнопку «Переключить на мобильную тему»?