Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru Блог Переключение шаблонов мобильной и настольной версии сайта в DLE

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


 tcse    07.05.2015    Блог    3439    5

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


Хотя сейчас в моде исключительно адаптивные сайты, но они не всегда позволяют максимально эффективно решить задачу по адаптации контента под мобильные устройства. Зачастую проще сделать мобильную версию (например использовать наш шаблон BS3-TCSE ) и в соответствии с правилами хорошего тона разместить ссылку на переключение шаблона в настольную версию.

Но кроме этого, нужно дать возможность переключать шаблон и обратно - с версии для компьютеров в smartphone вариант.

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


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

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

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


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


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

Переключение шаблонов мобильной и настольной версии сайта в 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]
будет выводить текст заключенный в теги, если посетитель просматривает ваш сайт не со стационарного компьютера или ноутбука.


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

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

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

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

содержимое 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 смартфоне

Комментарии пользователей (5)

Serik
4

408 | 191

Serik - 8 мая 2015 17:24 - Местный

К чему этот рекламный пост?

СПАСИБО надо тыкать в кнопку!

ПафНутиЙ
1065

3396 | 2434

ПафНутиЙ - 8 мая 2015 18:57 - Админ

Почему рекламный?

Каков вопрос - таков и ответ. Просто помните об этом.

65uvabit
2

41 | 2

65uvabit - 8 мая 2015 20:17 - Юзер

Для некоторых новичков это бесценна информация, так как нам это кажется простым .

tcse
1

39 | 22

tcse - 11 мая 2015 20:52 - Юзер

Serik,
Вы действительно думаете, что нам нужна реклама? Тем более на площадке куда приходят люди за ответами на свои вопросы по DLE?

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

coroner2012
1

coroner2012 - 3 декабря 2015 11:04 - Юзер

1. Подскажите, пожалуйста, куда именно добавить .mobile-templates { итд, ?

2. Как иконки соцсетей установить?

Чтобы комментировать - войдите или зарегистрируйтесь на сайте