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

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


 tcse    07.05.2015    Блог    4733    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
Местный

Serik - 8 мая 2015 17:24 -

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

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

ПафНутиЙ
Админ

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

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

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

65uvabit
Юзер

65uvabit - 8 мая 2015 20:17 -

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

tcse
Юзер

tcse - 11 мая 2015 20:52 -

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

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

coroner2012
Юзер

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

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

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

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