Расширения

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

  • Тип – расширение, позволяющее создать адаптивный сайт Joomla.

 

 

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

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

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

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

Responsivizer
Responsivizer

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

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

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

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

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

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

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

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

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

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

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

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

Адаптивный сайт Joomla
Адаптивный сайт 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 кэш
Offline кэш

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

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

 

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