Управление контентом joomla на мобильных устройствах

Опубликовано: 5 Декабрь, 2017
Категория: Общие вопросы
Комментариев: 9

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

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

Тип устройства можно определять на стороне клиента или на стороне сервера, но начать, конечно, нужно с медиа-запросов.

Медиа-запросы

Нужно изменить размер заголовка или ширину формы поиска на смартфоне? Для решения этих и огромного количества других задач в спецификации CSS3 были добавлены медиа-запросы.

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

Добавляются медиа-запросы обычно в конец файла стилей и имеют следующий синтаксис

Это означает, что на всех устройствах с шириной экрана до 768px включительно размер заголовка h1 будет 24px.

Важный момент - это выбор контрольных точек (breakpoints). В самом популярном css фреймфорке bootstrap 3 использовались такие

В новом bootstrap 4 по умолчанию для смартфонов используются

Для определения ориентации телефона (портретной или ландшафтной) далее будет рассмотрен более надежный инструмент.

Какую именно контрольную точку выбрать зависит от конкретной задачи, но для изменения контента на всех типах смартфонов в большинстве случаев проще всего использовать код с max-width: 768px , приведенный в начале раздела.

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

Скрипт Current Device

Для определения устройства на стороне клиента можно использовать скрипт current device. C его помощью можно определить:

  • тип устройства (компьютер, смартфон, планшет или телевизор)
  • ориентацию устройства (портретная или ландшафтная)
  • операционную систему (ios, android и т.д.)

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

Скачать

Подключить скрипт можно в index.php шаблона с помощью следующего кода

Кроме этого, с помощью current device можно добавить условия для javascript. Для этого после подключения добавим

Теперь станут доступны проверки в javascript.

Полный список доступных проверок на странице скрипта.

Скрипт Mobile Detect

Для определения устройства пользователя на стороне сервера можно использовать готовый php класс Mobile Detect.

Просто подключаем скрипт на странице и используем готовые методы для определения устройства пользователя.

С помощью Mobile Detect можно запретить загрузку части контента для мобильных пользователей, что увеличит скорость загрузки страниц.

Для скрытия контента, который выводится в модулях (например, тяжеловесных слайдеров), можно также использовать возможности Advanced Module Manager.

Плагин DSC - Device Specific Content

Чтобы не подключать скрипт вручную можно использовать готовый плагин Device Specific Content, который использует Mobile Detect.

Скачать

C помощью плагина можно управлять показом контента на смартфонах, планшетах и компьютерах не только в php шаблонах, но и в html содержимом (статьях, модулях, описаниям к товарам) .

После стандартной установки через Менеджер расширений в Менеджере плагинов активируем System - DSC - Device Specific Content.

Для настройки контента в html содержимом используется следующий синтаксис.

Смартфоны

Планшеты

Компьютеры

Для использования в php шаблонах синтаксис такой.

Смартфоны

Планшеты

Компьютеры

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

9 комментариев

    Staffbsa

    Владимир спасибо за статью

    Подскажите как отключить на смартфонах пункт меню (Верхний левый и правый в шаблоне Likeshop например) с помощью данного плагина

      admin

      admin

      Сделать можно, пожалуйста, задайте вопрос на форуме поддержки шаблона.

    big

    big

    Здравствуйте.
    Своевременная и важная статья.
    Подскажите как лучше справится с проблемой:
    Необходимо убрать, тормозящий загрузку модуль и занимающий много места на телефоне. На маленьком экране модуль не нужен, более того он мешает.
    Если возможно, подробней раскрыть решение.
    Спасибо.

      admin

      admin

      Здравствуйте!

      Чтобы ответить точно нужно смотреть на сайт, пришлите ссылку и уточните какой модуль(и в какой позиции на сайте он выводится) нужно убрать. Также пришлите код с шаблоном, в котором выводится модуль, если точно не знаете, то пришлите ссылку на архив со всей папкой /tempaltes/имя_шаблона/.

        big

        big

        Здравствуйте.
        Сайт - http://uchilka.01sh.ru/
        Шаблон - https://yadi.sk/d/UmNg5bzN3RGwZk
        1) Модуль слайдер позиция - banner
        2) Модуль HTML-код позиция - position-0
        Спасибо за участие.

          admin

          admin

          Установите и активируйте плагин DSC - Device Specific Content.
          В файле /templates/protostar/index.php замените

          на

            big

            big

            Решение хорошее, но для позиции.
            Мне показалось, что можно запретить к показу отдельно взятый модуль. В этой позиции помимо модуля "так просто", есть и нужные.

    big

    big

    Возможно не правильно - Но если добавить новую позицию и её запретить к выводу на мобильных устройствах?

      admin

      admin

      Да это правильная мысль. По аналогии создайте новую позицию в шаблоне.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*
Для вставки кода заключите его в теги [php] [/php]
*

С 15-18 июня admin в отпуске.

Ответы на все вопросы и ссылки на товары будут присланы 19 июня.

Спасибо за понимание и хороших выходных.

×