FL.ru – фриланс сайт удаленной работы №1. Поиск удаленной работы, фрилансеры.

Плагины для создания мобильной версии WordPress блога: MobilePress VS WordPress Mobile Pack

Категории: WordPress

плагины для мобильной версии wordpressИнтернет  на месте не топчется. Развитие беспроводного интернета (Wi-Fi) позволяет подключаться практически из любого места, где есть точки доступа или хотспоты. Поэтому неудивительно, что все больше пользователей заходят в интернет с мобильных устройств.

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

Представьте себе, что вы каждый день теряете 12 человек из 100 при посещаемости вашего блога в 1000 человек. Впечатляет, не правда ли? Чтобы «вернуть» себе эту аудиторию, можно установить на свой блог один из плагинов, которые я опробовал, и причем успешно.

Такие мобильные плагины позволяют переключать ваш блог автоматически или вручную из рабочего (декстопного) варианта в мобильный и наоборот. Сразу оговорюсь, да и вы должны прекрасно это понимать, что мобильные версии выводят ваш блог в гораздо более упрощенном виде на экран дисплея телефона. Существующая масса настроек мобильных версий все-таки подразумевает, что чем меньше в мобильной версии разных «наворотов», тем быстрее будет загружаться блог. Итак, о плагинах. Опробовав несколько версий, я остановился на двух, с моей точки зрения, полярных вариантах. Один из них – плагин MobilePress.

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

MobilePress

В первоначальном виде блог, на котором я проводил эксперименты по тестированию мобильных плагинов, выглядел вот так:

MobilePress

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

MobilePress

С положительными сторонами плагина MobilePress мы разобрались – это высокая скорость загрузки (кстати, я специально засекал время для пяти загрузок, и в среднем оно составило 3 секунды), упрощенная, а значит, интуитивно понятная навигация, сохраняющая первоначальное структурирование блога, упрощенные настройки плагина, которые подразумевают только внесение названия блога, его описание и активацию одного из двух присутствующих в нем шаблонов темы. Темы можно подгрузить извне, но простота конструкции блога останется такой же. Или почти такой же, за исключением небольших изменений. Еще одна возможность, о которой я не упомянул – в этой мобильной версии можно подключать рекламные блоки, такие, как Buzzcity, Quattro, Admob, InMobi, Adsense и ZestAdz. Но, опять же, для этого необходимо зарегистрироваться в этих сервисах и получить свой API.

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

Промежуточные версии (я их так определил) рассматривать не буду. Скажу только одно – все они обладают теми или иными недостатками, и по своей функциональности находятся именно где-то посредине между плагином MobilePress, о котором я уже рассказал, и плагином WordPress Mobile Pack, о котором расскажу дальше. Это такие плагины, как: WordPress PDA & iPhone, WordPress Mobile Edition и WPtouch, которые я нашел и опробовал. Функциональные возможности у каждого из них разные, и они больше, чем у плагина MobilePress, но все-таки больше всего мне понравился WordPress Mobile Pack, и сейчас я расскажу, почему.

Начнем с дизайна. В версии WordPress Mobile Pack опционально заложено автоматическое определение вашей текущей темы, и плагин может предложить ее в качестве мобильной. При этом будет сохраняться вся структура блога, но при желании вы можете отключить какие-либо опции. На выбор можно будет отключать сайдбары, виджеты в них, или менять точку входа и так далее. Настроек очень много, поэтому я уделю внимание основным. Но продолжим разбираться с дизайном. Темы блога вы можете подгружать любые, все они будут отображаться правильно, но плагин предлагает вам на выбор и три своих мобильных темы. Выглядят они вот так (темы локализованы наполовину, и их русификацию я еще не делал):

WordPress Mobile Pack

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

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

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

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

WordPress Mobile Pack

А здесь я настроил тоже свою текущую тему, но убрал некоторые виджеты – рекламу, счетчики, виджеты популярных записей, регистрацию и авторизацию, и тому подобные опции, которые по большому счету в мобильном устройстве не очень-то и нужны. Ведь не для того же посетитель зашел на мою страницу со своего мобильного телефона, чтобы наблюдать всяких бегающих человечков в рекламном ролике или зарегистрироваться, не так ли? Но так как по ширине экрана блог все равно не влезает в дисплей мобильного телефона, прокрутка сохранилась. Кстати, можно настроить отображение и на всю ширину дисплея, но тогда блог «увеличится» в длину, то есть, прокрутка тоже сохранится, но только вниз или вверх.

WordPress Mobile Pack

Все виджеты, которые существуют на вашем блоге, будут отображены и в настройках плагина на странице «Mobile Widgets». Здесь вы можете отключать любые из них. Плагин автоматически определяет, с какого устройства вы зашли, и подстраивается именно под ваш телефон, так что корректное отображение в любых моделях вам гарантировано. Так, определив тестируемый мною телефон как Nokia c2 03, плагин сразу предложил провести дополнительную оптимизацию телефона под блог и несколько дополнительных тем для разнообразия визуализации. После проведения всех настроек можно проверить отображение блога в своем телефоне, не изменяя его отображения на экране монитора своего компьютера. Также, кроме отключения виджетов, можно ограничить количество отображаемых записей для мобильных устройств и вывод меток для записей. Принимая во внимание ограниченную функциональность некоторых моделей мобильных телефонов, можно отключить три стандартные категории – архивы блога, категории и облако тегов. Эта мера значительно ускорит загрузку блога для любой модели внешнего устройства.

В любом отображении, как в мобильном, так и в декстопном, в подвале блога будет стоять ссылка для переключения блога из одного состояния в другое. Ссылка на английском языке, поэтому я ее перевел, как «Мобильная версия блога» и «Рабочая версия блога». При переключении в мобильном телефоне на рабочую версию блог будет отображаться в своей текущей декстопной теме.

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

Но такой уж я дотошный человек – после долгих раздумий решил еще устроить плагину проверку на его нагрузочную составляющую. Для этого существует плагин P3 (Plugin Performance Profiler), который я периодически включаю, чтобы проверить очередной загруженный плагин в плане создания им нагрузки на блог. Кстати, плагин отображает и свою нагрузку, которая всегда оказывается столь незначительной, что даже отключать его не очень хочется. Так вот, после проверки оказалось, что нагрузка на блог от плагина WordPress Mobile Pack составляет 27% от общего числа всех плагинов, и это при том, что всего плагинов на тестируемом блоге было установлено 25 штук, два из них неактивные. Скорость загрузки плагина – 0,03 или 0,05 секунды (точно не рассмотрел, так как эти данные отображаются в виде графика). На суммарное время загрузки всех плагинов WordPress Mobile Pack не повлиял, как было 0.15 секунды, так и осталось.

Если вы хорошо разбираетесь в WordPress и можете сами создать мобильную тему, то определить, с какого устройства зашел на блог посетитель, для вас не составит труда. После этого вам останется только подключить пользователя к нужной теме – мобильной или рабочей, декстопной. Для определения версии внешнего устройства можно использовать вот такой функционал (mobile device detect). Файл нужно загрузить в директорию своей темы, а в файл functions.php вставить такой код:

1
2
3
4
5
[php] require_once('mobile_device_detect.php');
$mobile = mobile_device_detect();
 
if($mobile){ // здесь можно отдать мобильную или рабочую тему для посетителя
} [/php]<pre />




Параметр mobile_device_detect() может принимать несколько значений:

1
[php] mobile_device_detect($iphone, $ipad, $android, $opera, $blackberry, $palm, $windows, $mobileredirect, $desktopredirect); [/php]

По умолчанию все указанные параметры принимают значение true. Если вы хотите перенаправить посетителя на другой адрес, то необходимо указать соответствующий URL с http:// в параметрах $desktopredirect и $mobileredirect. То есть, если вы хотите перенаправить посетителя на http://site.ru, то и прописать нужно соответственно mobile_device_detect(http://site.ru). Эта функция всегда будет возвращать два элемента, один из которых будет определять, какое это устройство (декстопное или мобильное), а второй – тип устройства, например, iphone, ipod, palm или smartphone, ну и так далее по списку.

Еще немного о преимуществах плагина WordPress Mobile Pack, а точнее –  о совместимости с другими компонентами WordPress и его дружелюбности. Для кэширования своего блога я использую плагин Hyper Cache, который меня устраивает во всем, но еще, как оказалось, он предусматривает и работу с мобильными телефонами, и в его настройках можно оптимизировать блог для работы с внешними устройствами. Вот эти настройки:

api key

Кликните, чтобы увеличить изображение

Ну а для тех, кто предпочитает все-таки не лезть в дебри WordPress и заниматься кодами, я бы все-таки посоветовал установить плагин WordPress Mobile Pack. Его функционал я описал достаточно подробно, чтобы этот плагин понравился вам так же, как и мне :).




  • cpentyc

    А когда адаптивный дизайн стал мейнстримом? Без гемора и все красиво.

  • wptouch гораздо проще и лучше

  • плагин звиздец))) выставил свитчер — перестал пускать на нормальную версию. сайта

Подпишитесь на рассылку блога
max1net.com:
Уже подписались человек
Укажите свой e-mail