Шаблон для смартфона в Joomla Mobile

Требований к сайту сегодня много, одно из них – это мобильная адаптивность ресурса, то есть, он должен корректно отображаться на смартфонах, айфонах и прочих девайсах. Если у вас Joomla версии ниже 3, то надо либо переделывать вёрстку шаблона, делая её адаптивной, либо установить Joomla Mobile. Установка JM ума не требует, а вот настроить компонент непросто, так как настойки по умолчанию не всегда отвечают ожиданиям. С этим и будет разбираться.

Настройка компонента

После установки переходите в компонент:

Компоненты – Joomla Mobile

И настраиваете его.

В первую очередь во вкладке General укажите Title сайта, который будет отображаться на мобильных устройствах. Советую также поставить:

  •  - Rescale quality – 90%,
  •  - Display component – on. 

Во вкладках мобильных устройств укажите Template девайсов. Для смартфона это будет mobile_smartphone, а для айфона mobile_iphone. В левой части настройки отображения конкретного мобильного устройства ставьте Global, в правой части всё оставляем по умолчанию.

Настройка кеша и Gzip

Во вкладке Advanced Settings укажите URL, кеширование и включите или выключите Gzip. Рекомендую:

  1.  - Server Caching – Joomla,
  2.  - Device Caching – On,
  3.  - Gzip compression – Auto. 

Остальное по умолчанию.

Настройка модулей Mobile Joomla

Модули, плагины и шаблоны

Теперь переходит в плагины и сортируем их по типу mobile. Перед нами 4 плагина:

  1.  - AMDD,
  2.  - Simple,
  3.  - Forever,
  4.  - Domians. 

В AMDD включите Enable Caching, в Simple не надо делать никаких настроек, а в Forever укажите Mobile markup, то есть мобильную разметку. Рекомендую поставить Auto. Domains также не требует настроек.

Переходим к модулю Select Markup, который позволяет пользователю быстро переключаться с мобильной версии на стандарт. В левой части модуля выберите все меню, остальные настройки в правом блоке. Обязательно поставьте «Да» в Show Mobile link и Show Desktop link, если этого не сделать, то пользователь не сможет переключаться между мобильной и стандартной версией. С остальными настройками играйте на своё усмотрение.

Основные позиции для мобильных шаблонов – это mj_all_header, mj_all_middle, mj_all_footer. В них можно выводить обычные модули сайта. Например, я хочу поставить вверху мобильной версии рекламу Google, которая у меня выводится через модуль «произвольный HTML». Для этого я копирую модуль, захожу в него. Переименовываю, чтобы не путаться, включаю и указываю позицию mj_all_header. В этом случае в обычной версии реклама будет показываться в позиции user 2, а в мобильной в mj_all_header. Подобные манипуляции проводим для всех нужных в мобильной версии модулей.

В мобильных шаблонах, например mobile_imode, поставьте напротив меню «выберите из списка», но ничего не отмечайте в самом списке меню сайта.

Стили CSS

Теперь нам надо, чтобы мобильные шаблоны отображались в стиле основного дизайна сайта. Для этого правим стили мобильных шаблонов, например для смартфонов, по адресу

Templates/mobile_smartphone/css/mj_xhtml.

Настраиваем стили мобильных шаблонов

В стилях мобильных шаблонов настраиваем цвета и шрифты, всё стандартно.

Да, следить за изменениями стилей через тот же смартфон неудобно, поэтому используйте для проверки изменений адреса:

Site.ru/?device=iphone – шаблон для айфона,
Site.ru/?device=xhtml – шаблон для смартфонов,,
Site.ru/?device=desktop – переключение на стандартную версию.

Adsense в мобильный шаблон

По умолчанию в шаблоны для мобильных устройств вшита реклама от Joomla Mobile. Заменяем её на код Google Adsense, только надо вставлять адаптированный блок. Для смартфона идём по пути templates/mobile_smartphone/index.php и находим код

<script>

Реклама JM

</script>

У меня это строки 129-138 и заменяем его на код Adsense.

Вставляем в мобильный шаблон Google Adsense

Убираем копирайт

Убрать копирайт ещё проще. В каждом мобильном шаблоне отображается внизу

Joomla! is Free Software много английских букв version by Mobile Joomla!  Оно вам надо?

Убираем так. Идём по пути

administrator/components/com_mobilejoomla/markup

И во всех четырёх файлах удаляем код

<?php echo $version->URL;  тра-ля-ля Mobile Joomla!</a>

Кто-то ставит свою ссылку, но лично я удаляю код в ноль.

Выполнив эти настройки Joomla Mobile, вы не потеряете без толку мобильный трафик, найдя новых читателей на блог или покупателей в магазин.

Комментарии   

0 #1 Алексей Колмачёв 15.06.2016 22:00
Давно пользуюсь мобильной Joomla, на 90% она решает все вопросы с мобильной адаптацией, только шаблоны вручную надо допиливать. Автором сказано всё верно, новичкам советую только меньше крутить настройки - всё работает по умолчанию, только правьте сами шаблоны для Айфона и смартов. И да, на https://developers.google.com/speed/pagespeed/insights/ сильно внимания не обращайте, лучше смотрите через мобильник сами, сервис Гоши может тормозить.
Цитировать

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


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