Февраль
1
2012

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

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

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

Но как бы далеко не шагнули мобильные технологии, до стационарного компьютера они не дотягиваются и требуют адаптации. В этой статье я расскажу как сделать различный вид сайта на WordPress в зависимости от устройства пользователя, при этом сохранив статическое кеширование средствами nginx.

WPMS Mobile Edition

Начнем с плагина для WordPress, который при использовании мобильных браузеров использует оформление Carrington Mobile. Тему нужно вручную добавить в папку /wp-content/themes/ но не активировать. Ну и не забыть добавить в файлы Carrington Mobile скрипты статистики.

Окно настроек состоит из двух окошек, куда можно вписывать соответственно мобильные браузеры без сенсорного экрана и с сенсорным экраном.

Кроме того этот плагин работает совместно с WP Super Cache.

Кроме того поведением плагина можно управлять модифицируя cookie wpms_mobile.

Настройка WP Super Cache

Прежде всего необходимо зайти в настройки WP Super Cache и включить там поддержку мобильных устройств. В таком режиме при заходе с мобильных устройств будет создаваться отдельный файл кеша index-mobile.html

Настройка nginx

Моя настройка nginx предполагает, что nginx берет статические файлы прямо из кеша, если они есть, теперь нужно его научить выдавать обычным пользователям index.html, а мобильным index-mobile.html. Кроме того пользователи, у которых есть кука wpms_mobile=false должны получать полную версию.

Добавляем проверку мобильных устройств в предыдущий конфиг nginx

set $index_file 'index.html';</p>
if ($http_user_agent ~* "(Googlebot-Mobile)"){
set $index_file 'index-mobile.html';
}
if ($http_user_agent ~* "(acer\ s100|android|archos5|blackberry9500|blackberry9530|blackberry9550|blackberry\ 9800|cupcake|docomo\ ht\-03a|dream|htc\ hero|htc\ magic|htc_dream|htc_magic|incognito|ipad|iphone|ipod|kindle|lg\-gw620|liquid\ build|maemo|mot\-mb200|mot\-mb300|nexus\ one|nokia|opera\ mini|samsung\-s8000|series60.*webkit|series60/5\.0|sonyericssone10|sonyericssonu20|sonyericssonx10|t\-mobile\ mytouch\ 3g|t\-mobile\ opal|tattoo|webmate|webos)") {
set $index_file 'index-mobile.html';
}
if ($http_cookie ~ "wpms_mobile=false"){
set $index_file 'index.html';
}
if ($http_cookie ~ "wpms_mobile=true"){
set $index_file 'index-mobile.html';
}
# Specify the cache file
if ($supercache_uri ~ ^(.+)$) {
set $supercache_file /wp-content/cache/supercache/$http_host/$1$index_file;
}

Хитрый хак, который заставляет считать пользователя с кукой wpms_mobile=true мобильным

    location ~ \.php$ {
include fastcgi_params;
set $ua $http_user_agent;
if ($http_cookie ~ "wpms_mobile=true"){
set $ua   'android';
}
fastcgi_param  HTTP_USER_AGENT $ua;

Ну и дальше по тексту

Переключатель мобильной/полной версии

Если пользователь зашел с мобильного устройства, но хочет перейти на полную версию сайта, то нужно выставить cookie wpms_mobile=false. Для этого в шапку мобильной темы (header-default.php) в раздел <header> добавляем код

<script type="text/javascript">
function goDesktop()
{
document.cookie="wpms_mobile=false;path=/;expires=Tue, 01-01-2030 00:00:00 GMT";
_gaq.push(['_trackEvent', 'GoDestop', 'From mobile'])
location.reload(true);
}</p>
</script>

А в  секцию <body> добавляем ссылку

<div style="background-color: RGB(249, 201, 16);">
<a href="#" onclick="goDesktop()">Go to Full verion</a>
</div>

Когда пользователь нажимает ссылку, то устанавливается значение куки wpms_mobile в false, отправляется событие в Google Analytics, а сама страница перезагружается.

Для переключения на мобильную версию делаем похожий скрипт

<script type="text/javascript">
function goMobile()
{
document.cookie="wpms_mobile=true;path=/;expires=Tue, 01-01-2030 00:00:00 GMT";
_gaq.push(['_trackEvent', 'GoMobile', 'From desktop'])
location.reload(true);
}
</script>

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

<a href="#" onclick="goMobile()">Mobile Version</a>

Чего не хватает

Нет поддержки для мобильного поиска Yandex. У них просто нет отдельного паука для мобильных сайтов, такого как Googlebot-Mobile у известной компании.

Неправильная раскладка: цщквзкуыы vj,bkmyfz dthcbz

Понравилась статья? Посоветуйте друзьям!

nginx WP Plugin WP Super Cache Скорость сайта


Понравилась статья? Подпишись на рассылку по E-Mail или в RSS.
  • Охринеть плагин, столько сайтов на ворд пресе собрала , никогда не интересовалась, раз так просто то всегда буду еще и мобильную версию делать