Мобильная версия - автосмена шаблона при заходе с мобильного
Добавлено: 17.09.2016, 20:37
Инструкция для 2-й версии OkayCMS на следующей странице
Задумался над отображением шаблона на мобильных устройствах и понял, что меня не устраивают ограничения, которые накладывает адаптивная верстка. Решил пойти в сторону автосмены шаблона при заходе с мобильного устройства и возможности переключать шаблон в клиентской части.
Выкладываю решение.
1) Подключаем библиотеку для определения устройства, с которого пользователь зашел на сайт.
Создайте в корне сайта папку classes и поместите в нее из архива файл Mobile_Detect.php или скачайте с сайта разработчиков mobiledetect[точка]net
2) В файле api/Settings.php
2.1) Указываем названия шаблонов
После строк
добавляем
тут mobile и desktop - это названия Вашего мобильного и соответственно десктопного шаблона в админке.
2.2) подменяем название шаблона, если браузер принадлежит к мобильным устройствам.
После
добавляем
3) В файле index.php
3.1) Проверяем GET-запрос, запоминаем через сессию версию шаблона и делаем редирект, чтобы очистить адресную строку от параметров GET-запроса
после
добавляем
3.2) Добавим HTTP-заголовок Vary, чтобы сообщить поисковым системам о динамическом показе кода HTML и CSS.
после
добавим
4) Для принудительного переключения на мобильный шаблон, в десктопном шаблоне в файле design/ваш_десктопный_шаблон/html/index.tpl в коде футера вместо
добавляем
5) Соответственно в мобильном шаблоне в том же месте меняем на следующее:
Update. Исправлено сохранение результата определения браузера в куки.
Update2. Добавлено возможность принудительно переключать шаблоны в футере сайта.
Update3. Что нового:
- полностью переписана логика работы дополнения.
- при принудительном переключении шаблона, пользователь остается на текущей странице.
- добавлен HTTP-заголовок Vary
- в текущем исполнении дополнение можно удобно расширить так, чтобы из админки назначать мобильный и десктопный шаблон.
Update4. Заменена функция is_mobile на сторонний постоянно обновляемый PHP класс mobiledetect, актуальную версию которого всегда можно скачать на сайте разработчиков (mobiledetect[точка]net)
Спасибо за помощь всем в этой ветке и не только :)
Задумался над отображением шаблона на мобильных устройствах и понял, что меня не устраивают ограничения, которые накладывает адаптивная верстка. Решил пойти в сторону автосмены шаблона при заходе с мобильного устройства и возможности переключать шаблон в клиентской части.
Выкладываю решение.
1) Подключаем библиотеку для определения устройства, с которого пользователь зашел на сайт.
Создайте в корне сайта папку classes и поместите в нее из архива файл Mobile_Detect.php или скачайте с сайта разработчиков mobiledetect[точка]net
2) В файле api/Settings.php
2.1) Указываем названия шаблонов
После строк
Код: Выделить всё
class Settings extends Okay {
private $vars = array();
добавляем
Код: Выделить всё
private $mobile_theme = 'mobile';
private $desktop_theme = 'desktop';
тут mobile и desktop - это названия Вашего мобильного и соответственно десктопного шаблона в админке.
2.2) подменяем название шаблона, если браузер принадлежит к мобильным устройствам.
После
Код: Выделить всё
foreach($this->db->results() as $result) {
-------
}
добавляем
Код: Выделить всё
if (isset($_SESSION['site_version'])) {
if ($_SESSION['site_version'] == 'mobile') {
$this->vars['theme'] = $this->mobile_theme;
} else {
$this->vars['theme'] = $this->desktop_theme;
}
} elseif (empty($_SESSION['site_version'])) {
require_once 'classes/Mobile_Detect.php';
$detect = new Mobile_Detect;
if ($detect->isMobile()) {
$this->vars['theme'] = $this->mobile_theme;
} else {
$this->vars['theme'] = $this->desktop_theme;
}
}
3) В файле index.php
3.1) Проверяем GET-запрос, запоминаем через сессию версию шаблона и делаем редирект, чтобы очистить адресную строку от параметров GET-запроса
после
Код: Выделить всё
$view = new IndexView();
добавляем
Код: Выделить всё
if (isset($_GET['v'])) {
$_SESSION['site_version'] = $_GET['v'] == 'mobile' ? 'mobile' : 'desktop';
header('Location:' . $view->request->url(array('v'=>null)));
exit;
}
3.2) Добавим HTTP-заголовок Vary, чтобы сообщить поисковым системам о динамическом показе кода HTML и CSS.
после
Код: Выделить всё
header("Content-type: text/html; charset=UTF-8");
добавим
Код: Выделить всё
header("Vary: Accept-Encoding, User-Agent");
4) Для принудительного переключения на мобильный шаблон, в десктопном шаблоне в файле design/ваш_десктопный_шаблон/html/index.tpl в коде футера вместо
Код: Выделить всё
{* Копирайт *}
<div class="container p-y-1">
© {$smarty.now|date_format:"%Y"}. <a class="link-black" href="http://okay-cms.com" target="_blank"><span data-language="{$translate_id['index_copyright']}">{$lang->index_copyright}</span></a>
</div>
добавляем
Код: Выделить всё
{* Копирайт *}
<div class="container p-y-1">
<div class="pull-xs-left">© {$smarty.now|date_format:"%Y"}. <a class="link-black" href="http://okay-cms.com" target="_blank"><span data-language="{$translate_id['index_copyright']}">{$lang->index_copyright}</span></a></div>
<div class="pull-xs-right"><a class="link-black" href="/?v=mobile">Мобильная версия сайта</a></div>
</div>
5) Соответственно в мобильном шаблоне в том же месте меняем на следующее:
Код: Выделить всё
{* Копирайт *}
<div class="container p-y-1">
<div class="pull-xs-left">© {$smarty.now|date_format:"%Y"}. <a class="link-black" href="http://okay-cms.com" target="_blank"><span data-language="{$translate_id['index_copyright']}">{$lang->index_copyright}</span></a></div>
<div class="pull-xs-right"><a class="link-black" href="/?v=desktop">Полная версия сайта</a></div>
</div>
Update. Исправлено сохранение результата определения браузера в куки.
Update2. Добавлено возможность принудительно переключать шаблоны в футере сайта.
Update3. Что нового:
- полностью переписана логика работы дополнения.
- при принудительном переключении шаблона, пользователь остается на текущей странице.
- добавлен HTTP-заголовок Vary
- в текущем исполнении дополнение можно удобно расширить так, чтобы из админки назначать мобильный и десктопный шаблон.
Update4. Заменена функция is_mobile на сторонний постоянно обновляемый PHP класс mobiledetect, актуальную версию которого всегда можно скачать на сайте разработчиков (mobiledetect[точка]net)
Спасибо за помощь всем в этой ветке и не только :)