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

Скрипты и советы | 17 апреля 2015 36 962

шаблон, HTML, уроки, мы рекомендуем, переключение шаблонов

Разберем этот пример по шагам.


В качестве шаблона для мобильных устройств будем использовать BS3-TCSE
Нам необходимо папку шаблона переименовать в smartphone так как только с таким именем движок DLE воспринимает шаблон для смартфонов.

Далее в любом удобном месте шаблона размещаем кнопку на ОТКЛЮЧЕНИЕ мобильного шаблона.

<a href="/index.php?action=mobiledisable" class="btn btn-warning btn-block" >Открыть полную версию сайта</a>


Мы обычно в мобильном шаблоне устанавливаем такую ссылку в самом конце страницы.
Переключение шаблонов мобильной и настольной версии сайта в DLE

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



Далее нам необходимо поставить обратную ссылку для ВКЛЮЧЕНИЯ мобильного шаблона при просмотре настольной версии сайта.

Для этого используется ссылка

<a href="/index.php?action=mobile">Перейти на мобильную версию</a>


Ее в отличии от смартфон-шаблона лучше ставить ближе к шапке сайта.

Но так как отображать ее имеет смысл только на мобильных устройств то в основном шаблоне сайта ссылку дополнительно необходимо обернуть спец-тегами


[not-desktop]
<div class="mobile-templates">
	<a href="/index.php?action=mobile" class="btn btn-warning btn-block" >Перейти на мобильную версию</a>
</div>
[/not-desktop]


После этого согласно документации к движку DLE
[not-desktop] текст [/not-desktop]
будет выводить текст заключенный в теги, если посетитель просматривает ваш сайт не со стационарного компьютера или ноутбука.


проверяем с компьютера

ссылка отсутствует.

проверяем с телефона

ссылка отображается там где и следует.

содержимое CSS класса mobile-templates

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

В нашем случае он выглядит так
в файле {THEME}/style/styles.css

добавить:

.mobile-templates {
	width: 300px;
	position: absolute;
	left: 10%;
	top: 100px;
	text-align: center;
	background-color: transparent;
	border: 4px solid #fff; 
	padding: 10px;
	font-size: 16px;
	z-index: 20;
}


В шаблон main.tpl после тегов


<body>
{AJAX}


добавить наш блок с кнопкой переключения


[not-desktop]
<div class="mobile-templates">
	<a href="/index.php?action=mobile" class="btn btn-warning btn-block" >Перейти на мобильную версию</a>
</div>
[/not-desktop]



Это все.

В качестве дополнения короткое видео на 15 секунд о том как работает такое переключение шаблонов на android смартфоне

Виталий Чуяков

Виталий Чуяков

Технологический прагматик

Веб-разработчик с 20-летним стажем, основатель веб-студии TCSE. Специализация: DLE «под ключ», Webasyst, Parts-Soft.ru, технический аудит.

🧠 20 лет 🚀 120+ проектов 📄 45+ статей
📚 Все статьи GitHub Telegram
Плагин AMTS Pro (платная версия с админкой)

Добавлена совместимость с DLE 15.3, но только для php 7.3 или ниже :( Специальная версия бесплатного плагина AMTS с...

Подробнее
Плагин AMTS-tcse - расширенный переключатель мобильных шаблонов

Представляем вашему внимание: Advanced Mobile Templates Switch (AMTS-tcse) расширенный переключатель мобильных шаблонов...

Подробнее
Хак MobTPL для DLE (TCSE_MobTPL) - бесплатно

Обновления хака для DLE 10.3 Хак мобильной версии вместо стандартного шаблона smartphone подключает 3 дополнительных...

Подробнее
Добавить на главный экран - скрипт для DLE: add-to-homescreen

Для устройств работающих на Android в веб-браузере Chrome можно добавить опцию которая будет помогать сохранять ярлык...

Подробнее
AMP версия DLE на основе страницы для печати - плагин DLE-print-page4amp

Исправление для DLE 15.1 Еще один плагин генерации AMP страниц для DLE, теперь на основе версии для печати. Перед тем...

Подробнее
Шаблон для сайта Nomini.ru

Разработка оригинального шаблона для сайта автомобильной тематики. Шаблон сверстан под CMS DataLifeEngine версии 7.5...

Подробнее

💬 Комментарии

В связи с новыми требованиями законодательства РФ (ФЗ-152, ФЗ «О рекламе») и ужесточением контроля со стороны РКН, мы отключили систему комментариев на сайте.

🔒 Важно Теперь мы не собираем и не храним ваши персональные данные — даже если очень захотим.

💡 Хотите обсудить материал?

Присоединяйтесь к нашему Telegram-каналу:

https://t.me/tcsecms

Нажмите кнопку ниже — и вы сразу попадёте в чат с комментариями

  1. вариант отличный, но нет возможности для кодировки windows, показывает иероглифы, есть какое-то решение?
    1. ваш нужно сменить кодировку файлов шаблона с utf-8 на windows cp-1251

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