Различные мобильные устройства все активнее входят в нашу жизнь.
Смартфоны и планшеты на базе iOS и Android активно используются для выхода в интернет.
Цены на них и на доступ к мобильному интернету постепенно снижаются.
На некоторые ресурсы в рунете уже около 25% пользователей постоянно заходят с мобильных устройств, это число будет только расти.
Вот поэтому и всем владельцам своих сайтов необходимо позаботиться о том, чтобы с их ресурсами было удобно работать с мобильных устройств.
В этой заметке я расскажу как это можно сделать с блогами на базе популярной CMS WordPress.
Проще всего это сделать двумя способами:
— использовать специальную адаптивную тему (шаблон) для Вашего блога;
— установить специальный плагин, который формирует отображение блога удобное для использования на мобильных устройствах.
Рассмотрим сначала первый вариант — использование адаптивного шаблона.
Особенностью данных шаблонов является использование так называемой адаптивной верстки.
В зависимости от размера экрана на котором просматривается Ваш сайт, содержимое перестраивается соответствующим образом.
Как правило для блогов, ширина основной колонки контента уменьшается, меню становится в виде выпадающего списка, а содержимое слайдбара идет после основного контента страницы или просто прячется.
Шрифты и картинки масштабируются.
Новая версия WordPress 3.6.1 уже включают в свой состав несколько адаптивных шаблонов:
— тема 2012 года Twenty Twelve — это первая тема по умолчанию в WordPress, являющаяся полностью адаптивной — демо;
— тема 2013 года Twenty Thirteen — демо.
Другие адаптивные темы оформления, как платные, так и бесплатные, Вы можете найти через популярные поисковики.
Теперь рассмотрим второй вариант — специальные плагины.
Приведу несколько примеров применяемых плагинов.
Каждый из плагинов устанавливается стандартным способом.
После установки необходимо выполнить необходимые настройки.
Давайте рассмотрим плагины подробнее.
WPtouch Mobile Plugin — http://wordpress.org/plugins/wptouch/
После установки плагина и активации в разделе «Параметры» появляется новый пункт «Wptouch».
Нажимаем на него и переходим на страницу настроек параметров плагина.
Все настройки разделены на несколько групп.
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
Давайте разберем основные параметры плагина подробнее.
И первая группа «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