ГлавнаяJoomlaПлагин мобильной версии joomla

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


Joomla для мобильных устройств. Responsivizer

 

 

Responsivizer – это функциональный компонент для адаптации сайта Joomla 1.5-3.х под мобильные устройства без изменений основного шаблона. В предыдущей статье «Обзор Responsivizer. Мобильный сайт Joomla» мы рассмотрели основные «глобальные» настройки компонента и плагинов. В этой части поговорим о других разделах расширения и посмотрим, как можно управлять модулями мобильной версии сайта.

Настройки слайд-шоу

У Responsivizer есть свой собственный слайд-шоу модуль. Его настройки собраны в одноимённом разделе (рисунок ниже). Если Вас интересует вопрос слайд-шоу, галерей, слайдеров и так далее, предлагаю ознакомиться с такими расширениями: RSMediaGallery, Simple Image Gallery, Phoca Gallery, sigplus, DJ-MediaTools и Layer Slideshow.

При помощи опций на вкладке Настройки слайд-шоу (рисунок ниже) Вы можете настроить внешний вид и «поведение» слайд-шоу.

Responsivizer

На вкладке Изображения слайд-шоу (рисунок ниже) Вы сможете добавить изображения, назначить им замещающий текст (поле Text alt), добавить описание (поле Caption) и вставить URL-адрес, по которому перейдёт пользователь, нажав на картинку (поле Image link). Замещающий текст будет показываться в том случае, если у пользователя отключён показ картинок или картинка по какой-то причине не загрузилась. А описание показывается поверх изображения в качестве поясняющей подписи. Картинки можно перетаскивать мышью для изменения их порядка следования.

Изображение слайд-шоу

На рисунке ниже показан пример слайдера.

Мобильная версия сайта Joomla

Менеджер модулей

Чтобы адаптировать Joomla для мобильных устройств в Responsivizer предусмотрен свой менеджер модулей (рисунок ниже). Тут Вы сможете: опубликовать\снять с публикации модуль, добавить или убрать его с мобильной версии сайта, показать\скрыть заголовок или фон модуля, а также включить\отключить сворачивание данного модуля аккордеоном.

Joomla для мобильных устройств

Нажав на кнопку Ассоциация позиций (такой же раздел есть на главной странице панели управления компонентом) в левом верхнем углу, Вы перейдёте на страницу, где можно предварительно настроить взаимосвязь позиций модулей обычного шаблона и мобильного (рисунок ниже). То есть, для каждой позиции мобильного шаблона Responsivizer Вы можете указать одну или несколько позиций обычного шаблона. Как узнать, какие у Вас есть позиции в шаблоне, можно прочесть в статье «Ответы на вопросы по шаблонам для Joomla. Установка, настройка, удаление».

Joomla под мобильные устройства

На рисунке ниже показана «карта» позиций модулей шаблона Responsivizer.

Позиции модулей мобильного шаблона Joomla

Если на странице менеджера модулей Responsivizer нажать на надпись Сделать мобильным в столбце Доступно на мобильном, Вы перейдёте на страницу, где сможете назначить выбранный Вами модуль к одной из позиций мобильного шаблона Responsivizer (рисунок ниже). Вам будет достаточно указать одну из двадцати одной позиций мобильного шаблона в спадающем списке Выберите позицию модуля Responsivizer.

Адаптивный сайт Joomla

Перемещение модулей

Если Вас не устраивает расположение модулей шаблона мобильной версии сайта Joomla, в разделе Перемещение модулей (рисунок ниже) можно взять мышью модуль за иконку 4-векторной стрелки и перетащить его туда, куда нужно.

Перемещение модулей мобильного шаблона

Эмуляция устройства

При тестировании Joomla для мобильных устройств может оказаться, что под рукой не будет самого устройства. Безусловно, лучше тестировать сайт на физических устройствах, а не в эмуляторах. Но если такой возможности нет, можно воспользоваться или инструментами браузера, или разделом Эмуляция устройства (рисунок ниже). По умолчанию тут доступно 12 моделей телефонов (от таких производителей: Motorola, Blackberry, Apple, LG, Sumsung) и 6 моделей планшетов (от таких производителей: Kindle, Sumsung, Google, Apple). Также можно указать свои собственные размеры ширины и высоты экрана устройства. Устройство можно переводить в портретное и ландшафтное положение.

Эмуляция устройства

Редактор файлов шаблона

Несмотря на то, что Responsivizer позволяет достаточно легко адаптировать Joomla под мобильные устройства, без необходимости правки кода, в отдельных случаях может понадобиться изменить файлы шаблона. То есть, отредактировать HTML, CSS, PHP код. Например, такая необходимость может возникнуть в случае с добавлением кода Яндекс.Метрики. Для этого можно отредактировать файлы через панель управления хостингом, путём их «правки по FTP», или воспользоваться разделом Редактор файлов шаблона (рисунок ниже).

Редактор файлов шаблона

Перенаправления

Responsivizer позволяет создавать адаптивный сайт Joomla с минимальными правками страницы. Но иногда возникают ситуации, когда приходится существенно изменить содержимое на той или иной странице. Например, если на сайте есть калькулятор расчёта стоимости товара, он потребует значительных правок. В таком случае может пригодиться раздел Перенаправления (рисунок ниже).

Перенаправления

По сути, Вы просто указываете, какой пункт меню обычной версии сайта будет соответствовать пункту меню мобильной версии сайта (рисунок ниже).

Создание перенаправления

Offline кэш

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

Для включения функциональности offline кэша в Настройки плагинов на одноимённой вкладке включите опцию Активация offline кэша. После этого в разделе Offline кэш Вы сможете настроить кэширование отдельных страниц (рисунок ниже).

Offline кэш

Обратите внимание, что Вы сможете выбрать те «ресурсы» (CSS, JS, изображения), которые должны кэшироваться на клиенте. HTML исключить из кэша нельзя.

Как видим, создавать мобильную версию сайта Joomla при помощи Responsivizer достаточно легко. Без сомнений, легче, чем сделать адаптивную вёрстку своими руками. Помимо кэширования стоит присмотреться к такому расширению от этого же разработчика как JAmp, которое позволяет реализовать Google Accelerated Mobile Pages (AMP) для ускорения загрузки именно мобильных страниц сайта.

 

Полезные ссылки:

aleksius.com

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

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

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

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

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

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

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

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

@media (max-width: 768px) {

    h2{

        font-size: 24px;  

    }

}

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

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

/* Small Devices, Tablets */

@media only screen and (max-width : 768px) {

...

}

 

/* Extra Small Devices, Phones */

@media only screen and (max-width : 480px) {

...

}

 

/* Custom, iPhone Retina */

@media only screen and (max-width : 320px) {

...

}

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

// Extra small devices (portrait phones, less than 576px)

@media (max-width: 575px) { ... }

 

// Small devices (landscape phones, less than 768px)

@media (max-width: 767px) { ... }

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

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

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

Скрипт Current Device

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

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

Скачать

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

$document = JFactory::getDocument();

$document->addScript('/templates/имя_шаблона/js/current-device.js'); // путь к скрипту

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

$document->addScriptDeclaration('

    var device = device.default;

');

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

if(device.mobile()){ // код сработает только на смартфонах

    alert('Это смартфон');

}

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

Скрипт Mobile Detect

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

<?php

// Подключение и создание экземпляра класса

require_once '/Mobile_Detect.php';

$detect = new Mobile_Detect;

// Любое мобильное устройство (смартфон или планшет).

if ( $detect->isMobile() ) {

    

}

// Любой планшет

if( $detect->isTablet() ){

  

}

// Любой смартфон

if( $detect->isMobile() && !$detect->isTablet() ){

    

}

 

// Определение ОС устройства

if( $detect->isiOS() ){

    

}

if( $detect->isAndroidOS() ){

    

}

?>

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

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

Плагин DSC - Device Specific Content

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

Скачать

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

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

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

Смартфоны

{mobile}показать только на смартфонах{/mobile}

{!mobile}скрыть на смартфонах{/mobile}

Планшеты

{tablet}показать только на планшетах{/tablet}

{!tablet}скрыть на планшетах{/tablet}

Компьютеры

{desktop}показать только на компьютерах{/desktop}

{!desktop}скрыть на компьютерах{/desktop}

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

Смартфоны

if(PlgSystemDeviceSpecificContent::isMobile()) {...} // если смартфон

if(PlgSystemDeviceSpecificContent::isNotMobile()) {...} // если не смартфон

Планшеты

if(PlgSystemDeviceSpecificContent::isTablet()) {...} // если планшет

if(PlgSystemDeviceSpecificContent::isNotTablet()) {...} // если не планшет

Компьютеры

if(PlgSystemDeviceSpecificContent::isDesktop()) {...} // если компьютер

if(PlgSystemDeviceSpecificContent::isNotDesktop()) {...} // если не компьютер

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

Похожие статьи :

virtuemart.su

Responsivizer – настройка внешнего вида joomla-сайта на мобильных устройствах.

Responsivizer это наиболее дешевое, полное и легкое решение для внесения изменений в Ваш сайт, без необходимости его полной перестройки.

Сделайте Ваш сайт Joomla способным прекрасно выглядеть визуально на любых мобильных устройствах под управлением IOS (Iphone, IPad), Android (как современный модельный ряд, обладающий широкими диагоналями дисплеев, так и модели прошлых поколений), мобильных устройствах Windows и на любых других переносных устройствах, включая даже Samsung S5!

Добавлены новые дополнительные свойства в расширение:

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

Responsivizer позволяет:

joomla3x.ru

Prostoy-Site | Все права защищены © 2018 | Карта сайта