Создаем мобильную версию Вашего блога на WordPress



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

Смартфоны и планшеты на базе iOS и Android активно используются для выхода в интернет.

Цены на них и на доступ к мобильному интернету постепенно снижаются.

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

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

В этой заметке я расскажу как это можно сделать с блогами на базе популярной CMS WordPress.

Проще всего это сделать двумя способами:

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

Рассмотрим сначала первый вариант — использование адаптивного шаблона.

Особенностью данных шаблонов является использование так называемой адаптивной верстки.

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

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

Шрифты и картинки масштабируются.

Новая версия WordPress 3.6.1 уже включают в свой состав несколько адаптивных шаблонов:

— тема 2012 года Twenty Twelve — это первая тема по умолчанию в WordPress, являющаяся полностью адаптивной — демо;
— тема 2013 года Twenty Thirteenдемо.

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

Теперь рассмотрим второй вариант — специальные плагины.

Приведу несколько примеров применяемых плагинов.

WPtouch Mobile Plugin

MobilePress

WP Mobile Detector

WPapptouch

Каждый из плагинов устанавливается стандартным способом.

После установки необходимо выполнить необходимые настройки.

Давайте рассмотрим плагины подробнее.

WPtouch Mobile Plugin — http://wordpress.org/plugins/wptouch/

После установки плагина и активации в разделе «Параметры» появляется новый пункт «Wptouch».

Нажимаем на него и переходим на страницу настроек параметров плагина.

WPtouch Mobile Plugin - настройки

Все настройки разделены на несколько групп.

General Settings — общие настройки;

Advanced Options — дополнительные параметры;

Push Notification Options — параметры Push-уведомлений;

Style & Color Options — параметры для отображения стилей и цвета;

Advertising, Stats & Custom Code — параметы и код для рекламных модулей, статистики и пользовательского кода;

Default & Custom Icon Pool — значки по умолчанию и пользовательские;

Logo Icon // Menu Items & Pages Icons — логотип сайта, меню и иконки для станиц сайта.

Как видите настроек достаточно много.

Вот как мой сайт «Занимательная веб-картография» http://webmap-blog.ru отображается на мобильном устройстве.

Занимательная веб-картография - главная

Еще несколько скриншотов

Меню категорий

Занимательная веб-картография - Меню категорий

Меню тегов

Занимательная веб-картография - Меню тегов

Записи для тега API Яндекс.Карт v2

Занимательная веб-картография - Записи для тега API Яндекс.Карт v2

Давайте разберем основные параметры плагина подробнее.

И первая группа «General Settings».

Regionalization Settings — региональные настройки

Здесь выбирается язык для Wptouch, свои языковые файлы можно положить в папку wp-content/wptouch/lang.

Я оставил значение параметра по умолчанию — Automatically detected (определять автоматически).

Data Sharing — этот параметр позволяет отправлять данные об использовании плагина разработчикам.

Home Page Re-Direction – выбор главной страницы сайта. Если оставить значение по умолчанию, то при заходе на сайт через телефон вы будете попадать на главную страницу сайта.

Site Title – заголовок сайта. Значение берется из настроек сайта. Но можете изменить по желанию.

Excluded Categories – исключение категорий из показа по id.

Excluded Tags – исключение тегов из показа по id.

Text Justification Options – выравнивание текста.

Post Listings Options – выбор параметров оформления заголовка статьи. Если оставить по умолчанию, то слева от названия будет располагаться дата публикации с количеством комментариев.

И еще некоторые настройки параметров заголовка статьи, такие как показывать автора статьи, показывать категорию, показывать теги и т.д.

Footer Message – текст сообщения в нижней части сайта (футере).

Следующая группа парамтров Advanced Options

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

Далее есть возможность включать или выключать комментарии к постам, страницам; разрешение на показ аватара у комментатора.

Группа Style & Color Options

Отвечает за внешний вид мобильной темы.

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

Следующая группа параметров связана с отображением рекламы Google Adsense.

Logo / Home Screen Icon & Default Menu Items – выбор логотипа вашего блога, который будет отображаться в шапке сайта. Помимо нескольких десятков стандартных картинок вы можете загрузить свою.

Enable Home Menu Item – отображать или нет в меню ссылку на главную страницу.

Enable RSS Menu Item – отображать или нет в меню ссылку на RSS ленту.

Enable Email Menu Item – отображать или нет в меню ссылку на e-mail подписку.

Enable ‘Powered By WPtouch’ in mobile theme footer – отображать или нет нижней части сайта копирайты плагина.

И последний пункт настроек – выбор ссылок меню для отображения.

Просто поставьте галочки около тех пунктов, которые вы хотели бы видеть в меню.

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

С меню по английски не очень удобно работать, Вы можете скачать файл с русским языком здесь, правда для версии 1.9.34, а затем просто скопировать файлы ru_RU.mo и ru_RU.po в папку wp-content/wptouch/lang.

Большинство параметров успешно перевелось.

О других плагинах, мы поговорим в следующий раз …

P.S. — Можно ли быстро сделать свой блог, не размазывая «каши» в собственной голове? Можно, но только вот так — http://sb-new.loc/go/wordpress

Оставьте комментарий