Создание мобильной версии сайта на CMS WordPress

19 Дек 2012 в 19:03

Создание мобильной версии сайта на WordPress

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

И иметь мобильную версию своего сайта в данный момент времени очень актуально,

И сделать мобильную версию своего сайта на CMS WordPress можно всего за 10 минут.

Рассмотрим, как это  можно сделать.

Создание мобильной версии сайта на CMS WordPress

Для создания мобильной версии сайта на CMS WordPress используется плагин WPtouch, который делает мобильную (несколько другую) версию сайта.

Установка плагина производится как и всех плагинов - через админку сайта в меню "Плагины" - "Добавить новый", через поиск находим плагин  WPtouch и делаем его установку и активацию. 

Если есть вопросы по установке плагина, то можно обратиться к статье моего сайта "Установка плагина WordPress", где расписано пошагово установка плагина на сайт WordPress.

После активации плагина необходимо произвести настройку. Для этого надо найти в меню "Настройки" - WPtouch и открыть меню настройки плагина.

Все параметры настройки плагина сведены в таблицу:

Regionalization Settings  Здесь ничего не подходит, оставляем как есть - WPtouch Language - Automatically detected
Home Page Re-Direction  Оставить как есть -WPtouch Home Page - WordPress settings
Site Title  Выводится заголовок сайта. Для мобильной версии можно изменить.
Excluded Categories  Если необходимо, то в мобильной версии можно исключить вывод категорий (на Ваше усмотрение). Как посмотреть ID категории - обратитесь к статье моего блога - "Определение ID  категории, статьи, страницы WordPress"
 Excluded Tags  При необходимости, в мобильной версии сайта можно исключить ID меток. Посмотреть ID метки - админ панель-записи - метки. Открыть список меток сайта и чтобы посмотреть ID метки, необходимо навести курсор мышки на режим "Редактирование" интересующей метки и внизу слева, где Интернет браузер показывает адрес, в адресе можно увидеть и ID метки. Где-то так.
Text Justification Options  Необходимо выбрать, как будет выравниваться текст статьи на экране планшета или мобильного. Вариантов два: left, center. Лучше сделать left.
 Post Listings Options  Выбор вида иконок между - вид календариков, почтовых миниатюр (WP 2,9 и выше) или вообще без иконокНастройка плагина WPtouch.  Post Listings Options
 Лучше выбрать вид, как указано на скриншоте.Что это такое? Если есть в статье есть картинки, то они будут в том виде, какой Вы здесь указали. Но Вы, в принципе, можете определить методом проб, какой вариант Вам больше по душе.
 Footer Message  Сообщение футера (подвала) сайта. При необходимости, можно изменить.
 Select which meta items are shown below titles on main, search, & archives pages  Далее, необходимо выбрать настройки:

  • (Усечение титулов) - оставить "галочку";
  • Show Author's Name - показывать автора статьи - На Ваше усмотрение. Я убрала, чтобы не занимать место на экране;
  • Show Categories (показывать категории статей) - На Ваше усмотрение. Я оставила;
  • Show Tags - показывать метри - зачем? На Ваше усмотрение. Я убрала "галочку";
  • Hide Excerpts - прятать выдержки - "галочку" оставить.
  (Дополнительные опции)
 Allow zooming on content style="border: 2px solid #ddd;  Разрешение на масштабирование содержания постов - По умолчанию - выключено. Включить (поставить "галочку)"
 Enable Categories tab in the header  Включение категории  - На Ваше усмотрение (По умолчанию - включено)
 Enable Tags tab in the header   Включение метки  - на ваше усмотрение (По умолчанию - включено)
 Enable Search link in the header   Включение ссылки поиска - на Ваше усмотрение (По умолчанию - включено)
  Enable Login/My Account tab in the header Включение панели входа, если Вы собираетесь логинится в админ панель сайта через мобильный. По умолчанию - выключено.
 Display Upcoming Dates link in the header (requires GigPress 2.0.3 or higher  Отображение ссылок данных в заголовке (требуется GigPress 2.0.3 и выше). По умолчанию - выключено
 Display Twitter link in the header (requires WordTwit 2.3.3 or higher)   Отображение ссылок для Твиттера  (требуется GigPress 2.0.3 и выше). По умолчанию - выключено
 Enable comments on posts  Включение комментариев в пост. По умолчанию - включено. На Ваше усмотрение, но лучше оставить
 Enable comments on pages  Включение комментариев в страницу. По умолчанию - выключено. На Ваше усотрение. Но лучше пусть так и будет
 Enable gravatars in comments  Включение граваторов в комментарии. По умолчании - включено. Пусть так и будет
 1st visit mobile users will see desktop theme   При первом посещении через мобильный, пользовательи будт видеть темы рабочего стола. По умолчанию - выключено. Так и оставить.
 Enable WPtouch Restricted Mode  Включение режима ограничения. По умолчанию - выключено. так и оставить.
  
  В этом разделе WPtouch настраивается на получения уведомлений через Prowl счет на ваш iPhone, IPod Touch и Growl с поддержкой Mac или PC
 Make sure you generate a Prowl API key to use here otherwise no notifications will be pushed to you  Для получение уведомлений необходимо создать Prowl счет, скачать + настроить Prowl приложение для iPhone. Затем, посетите веб-сайт Prowl и создать свой API ключ, который WPtouch будет использовать для отправки уведомлений. И ввести свой полученный API key
 Notify me of new comments & pingbacks/tracksbacks  Получение уведомлений о новых комментариях, пингах, трэкбэках. По умолчанию - выключено. При необходимости, поставьте "галочку", обязательно укаазать API key  в предыдущем окне
 Notify me of new account registrations  Получать уведомления о регистрации новых пользователей на сайте Allow users to send me direct messages Получение уведомления о посылке прямого сообщения для Вас
  

 В этом меню производится настройка стилей и указываются цвета для мобильной  версии сайта. По умолчанию WPtouch эмулирует родные приложений iPhone.

Я установила себе вот такие настройки:

 Настройка  цветов плагина WPtouch
  
 Advertising Service  Выбор рекламной службы. По умолчанию - Google Adsense
  Google AdSense  Укажите Ваш Google AdSense ID, если вы хотите добавить поддержку рекламы в мобильной версии сайта WPtouch сообщений. Где его посмотреть? Зайти в свою учетную запись на сайте adsense.google.com и в правом верхнем углу показывается ваш pub-ID. Не забудьте включить "pub-' в Ваш ID.
 Google AdSense Channel  Укажите канал Google AdSense. Если хотите,  создайте отдельный канал для рекламы в мобильной версии сайта
Stats & Custom Code  Отслеживание статистики посещений. Можно вставить код счетчика Google Analitics или любой другой код счетчика
  
  Раздел, в котором можно влиять на тип иконок, которые будут видны в мобильной версии сайта. Можно добавлять свои иконки, по желанию
 
  Меню, в котором привязываются иконки к мобильной версии сайта
 Logo / Home Screen Icon & Default Menu Items  Привязываем иконку к логотипу и основному меню сайта. Выбор очень большой. На Ваше усмотрение.
 Enable Flat Bookmark Icon  Добавление глянцевого эффекта к логотипу.Если вы не хотите, чтобы ваш логотип, имел глянцевый эффект, убедитесь, что вы установите флажок
 Enable Home Menu Item  Подключение основного меню в осноное меню мобильной версии сайта. По умолчанию - включено.
 Enable RSS Menu Item  Подключение RSS ленты. По умолчанию - включено.
 Enable Email Menu Item (Uses default WordPress admin e-mail)  Включение эл. адреса админа в основное меню. По умолчанию - включено.
 Enable 'Powered By WPtouch' in mobile theme footer  Реклама плагина WPtouch. Лучше "галочку" не ставить.
  Menu List Sort Order  Указать порядок вывода страниц мобильной версии сайта
 Pages + Icons  Выполняется привязка иконок из списка с каждым пунктом меню страницы.

 

И не забудьте сохранить измененные настройки плагина по кнопке "Save Options".

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

Вот как выглядит мой сайт в мобильной версии:

титульный лист мобильной версии сайта

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

мобильная версия сайта продолжение статьи

Буду благодарна за комментарии.

Буду благодарна, если Вы поделитесь этой статьей:

0

Рубрики: 2.2. Настройка WordPress

Обсуждение
Отзыв michael kors pas cher 21 декабря 2012

I have never looked straight into Sennheisers not to mention am searching for new tote.

[Ответить]

Отзыв bags longchamp 22 декабря 2012

The stars of your pool are the comments and also pictures are usually secondary.

[Ответить]

Отзыв Pevna 22 января 2013

Здравствуйте!Япросматривала озывы,а что Вы скажите о новом только запускается Wor(l)d ADKASH.

[Ответить]

Валентина Ответил(а):

От этом проекте не слышала Wor(l)d ADKASH. Вы мне ссылку на их сайт дайте, пожалуйста

[Ответить]

Отзыв Pevna 28 января 2013

http://www.youtube.com/watch?v=mB6QroSyNU8 -Вот совсем дргуой проэкт протестируйте,пожалуйста и подскажите свое мнение.

[Ответить]

Валентина Ответил(а):

Свой отзыв о проекте выложила здесь — http://vdemchenko.com/foru-2/?mingleforumaction=viewtopic&t=84.0#postid-324
А мое мнение о пирамидах Вы уже знаете 🙂

[Ответить]

Отзыв Андрей 27 февраля 2013

Здравствуйте, Валентина.

Установил, активировал, настроил.

Но на телефона сайт все равно выглядит как и прежде, т.е. в полной версии. Ведь отличия должны быть?

[Ответить]

Валентина Ответил(а):

Андрей, здравствуйте! У меня отличаются. Ведь специально скрины выложены в статье. Только что грузила на свой телефон свой сайт, отличается!
Я все делала так, как потом описала в статье.

[Ответить]

Ваш отзыв