A- A A+
Расширение для Joomla! - MobileDetector

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

Карточка расширения MobileDetector:

Скачать

Дополнительная информация

Тип расширения: Плагин
Версия: 1.2.0
Совместимость: 2.5

Шаг 1. Установка плагина MobileDetector

Обычная установка - РАСШИРЕНИЯ => МЕНЕДЖЕР РАСШИРЕНИЙ => Загрузить файл пакета.

Переходим в РАСШИРЕНИЯ => МЕНЕДЖЕР ПЛАГИНОВ.

Здесь находим строку - Mobile Detector with mobileESP и заходим в настройки.

Установка MobileDetector

Шаг 2. Включение плагина

В разделе Подробно включаем плагин.

Включение MobileDetector

Шаг 3. Настройки расширения

В правой части окна модуля находится раздел Option:

  • Enable Template Switcher – Включение переключателя шаблонов.
  • Switch to Template – Выбираем шаблон, который будет запускаться на мобильном устройстве.
  • Includes Tablets – Здесь отказываемся от использования мобильных шаблонов на планшетах, так как размер их экрана позволяет комфортно пользоваться сайтом и с обычным шаблоном.

Настройки MobileDetector

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

Предлагаем установить пакет JTouch Mobile, который в комплексе решит эту проблему.

Карточка расширения JTouch Mobile:

Дополнительная информация

Тип расширения: Шаблон, Плагин
Версия: 2.5.29
Совместимость: 2.5

Текстовое описание урока

Шаг 1. Установка JTouch Mobile

РАСШИРЕНИЯ => МЕНЕДЖЕР РАСШИРЕНИЙ => Загрузить файл пакета. После установки видим две ссылки (1 и 2).

Установка Jtouch Mobile

Шаг 2. Настройка плагина JTouch Mobile Controller

В обновившемся после установке окне, кликаем по ссылке (1) и переходим в "Менеджер плагинов" к плагину System - JTouch Mobile Controller.

Включение плагина Jtouch Mobile

Включаем плагин и смотрим настройки раздела - Mobile Detection.

Enable Template Switcher, Switch to Template, Includes Tablets – оставляем настройки по умолчанию.

Mobile Home Page - Указывается, куда будет перенаправлен посетитель, если он зашел с мобильного телефона. Можете выбрать нужную страницу.

Mobile Detection Jtouch Mobile

Настройки следующего раздела Mobile Template пока не трогаем, если что-то пойдет криво, тогда попробуйте поменять поочередно в этих строках "No" на "Yes".

Mobile Template Jtouch Mobile

Шаг 3. Настройка шаблона (раздел Look and Feel)

Теперь переходим по второй ссылке (2) и оказываемся в "Менеджере шаблонов". Открываем шаблон JTouch25.

Шаблон Jtouch25

Переходим в раздел настроек шаблона - Look and Feel. При раскрытии которого видим внизу кнопку Preview Mobile Version, предназначенную для предварительного просмотра мобильной версии сайта.

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

Естественно представленный мобильный вид нас не устраивает, поэтому займемся настройками:

  • Page Theme - Выбираем цвет темы.
  • Header Theme - Расцветка для хедера (верх шаблона).
  • Header Button - Кнопка хедера (варианты с текстом и картинкой).
  • Footer Theme - Тема для футера (низ шаблона).

Настройки Jtouch25

Шаг 4. Настройка шаблона (раздел Advanced Parameters)

В разделе Advanced Parameters в строке Show Powered By отмечаем "No" и отключаем внизу шаблона ссылку на сайт производителя.

Отключаем футер

Ниже находятся модульные позиции шаблона "JTouch25".

Модульные позиции

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

Смотрим в каких модульных позициях находятся меню, контакты, контент, хедер, футер, то есть те элементы, которые необходимо вывести в мобильном версии сайта.

Заменяем названия мобильных позиций модулей на названия модулей сайта, и получаем следующее:

Модульные позиции

Успешного Вам применения полученных знаний на практике.

 

Комментарии  

#6 0 Александр 30.03.2016 13:13
Цитирую Александр:
http://prntscr.com/alzttk Виталий помогите что не так делаю??? сайт www.shop-baby-area.ru :cry:

Открывается мобильная версия с компа, и ни чего не показывает только такой экран
Цитировать
#5 0 Александр 30.03.2016 13:11
http://prntscr.com/alzttk Виталий помогите что не так делаю??? сайт www.shop-baby-area.ru :cry:
Цитировать
#4 -1 АннаСм 03.03.2016 13:55
Здравствуйте. Спасибо за статью. Сделала для сайта мобильную версию, но теперь сайт по ссылке с www.lepota-club.ru отображается как мобильный, а без www выглядит как нормальный сайт lepota-club.ru В чем проблема? Спасибо.
Цитировать
#3 0 alexei 29.08.2015 18:23
Подскажите пожалуйста: что у вас за приложение для РС которое имитирует просмотр сайта с экрана мобильного телефона?
Цитировать
#2 0 Айша 15.07.2015 07:07
Виталий, а как можно поменять логотип на свой?
Цитировать
#1 0 Айша 14.07.2015 09:54
Спасибо!!! У нас в офисе я Вас называю своим гуру))
Цитировать

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

Защитный код Обновить

Если заметили ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

МОЙ TELEGRAM-КАНАЛ

ПОДПИСАТЬСЯ!


Перенос на хостинг

Перенос на хостинг

Бесплатный видео-курс по переносу готового сайта на одну из лучших хостинг-площадок РУнета.

Смотреть (бесплатно)

Бессмертный сайт

Бессмертный сайт

2 урока, 16 минут, и Ваш сайт - БЕССМЕРТНЫЙ!

Узнать подробности!