Практические решения

Делаем мобильную версию сайта с Mobile Joomla – часть III

Joomla
Добавление в избранное
Сохранить

Делаем мобильную версию сайта с Mobile Joomla

Это завершающая 3-я статья из цикла материалов делаем мобильную версию сайта с Mobile Joomla. Компонент Mobile Joomla – мощное расширение для создания мобильной версии сайта на Joomla. В первой части статьи рассматривалась установка и настройка Mobile Joomla! в ракурсе шаблона  Elegance. Вторая часть посвящена управлению шаблоном через менеджер шаблонов, а также рассказано, как изменить логотип, как использовать цветовые гаммы и настраивать модули. В завершающей статье я расскажу о продвинутых настройках Mobile Joomla.

В качестве примера можете открыть на смартфоне сайты GoozerNation.com и FSCgroup.com. В первой статье мы рассматриваем стандартную версию сайта, просматриваемую посредством Amazon Fire. Во второй части я установил мобильную версию для отображенияи просмотра на сайте FSCgroup.com посредством Fire, в то время как Goozernation.com по-прежнему отображается как стандартная версия при просмотре через Fire. Должен заметить, что у обоих сайтов отображается мобильная версия через Fire. Не уверен, чем вызвана разница, но оба сайта смотрятся довольно неплохо. Поскольку плохого ничего не обнаружено, то  проблемы нет. Возможно, это как-то было связано с кэшированием.

Продвинутые настройки

Перед тем, как начать, должен рассказать как вглядит фронтальная часть страницы сайта. Это блог, в котором отображается вступительный текст к нескольким статьям с ссылками «Читать далее» и «Комментарии». В  мобильной версии эти ссылки перенесены. Ссылка «Читать далее» работает отлично. А вот ссылка на комментарии работает некорректно. Для того, чтобы исправить ошибку, необходимо залезть в CSS.

Удаление ссылок «Читать далее» и «Комментарии»

Для внесения изменений в CSS мобильной версии, идем в Менеджер  шаблонов и выбираем шаблон Elegance. И теперь открываем на редактирование. В конце CSS файла находим:

JComments div.jcomments-links { text-align: right; }

Эта строка отвечает за отображение ссылки «Комментарии». Для того, чтобы эта ссылка не отображалась, закомментируем исходную строку со стилями и добавляем новую:

/* JComments div.jcomments-links { text-align: right; } */ .jcomments-links{display:none;}

В результате ссылки «Комментарии» и «Читать далее» перестанут отображаться во фронтальной части; на мой взгляд, теперь вид мобильной версии сайта более аккуратен. Посетители сайта по-прежнему могут перейти в полную версию статьи, нажав на заголовок материала.

Если комментарии к статье были написаны в обычном режиме сайта (не мобильном), комментарии будут видны в нижней части материала. В следующей статье я расскажу о расширении Kunena forum для Mobile Joomla!, работающее как часы  и которое я сейчас использую вместо расширения JComments.

Удаление двойных заголовков

Осталось сделать последнее усилие, благодаря которому сайт на базе шаблона Elegance полностью нас устроит  – это устранить дубли заголовков. Проблема заключается в появлении заголовков материалов дважды если посетители переходят в режим полной статьи. Это вызвано настройками материалов и глобальной конфигурацией. Я выставил показ заголовков в меню и в материалах. Это и приводит к показу двойных заголовков в мобильной версии. Поскольку я не хочу отключать отображение заголовков в обычной версии сайта, придется залезть в HTML/PHP разметку шаблона Elegance. Для решения данного вопроса нужно открыть:
templates/mobile_elegance/html/com_content/article/default.php

После чего я удаляю следующий кусок кода:

И буууум! Дубли исчезли в мобильной версии сайта. Можно почувствовать облегчение.

Форум поддержки Mobile Joomla!

С одной стороны, расширение Mobile Joomla! легко установить и настроить, но с другой, как и следовало ожидать, Joomla  - это не универсальный комбайн и не панацея. Существует масса расширений и не все из них работают хорошо друг с другом. Это важно помнить и хорошо представлять себе перед приобретением шаблона Elegance. Будьте готовы потратить своё время на разбор проблем и решение вопросов с кодом и приятно знать, что разработчики Mobile Joomla! готовы оказать помощь на форуме расширения Mobile Joomla.

Не знаю, чтобы я делал без помощи разработчиков Mobile Joomla! Они всегда отвечали на мои посты в течение 24 часов, и если даже не удавалось решить вопрос с первого раза, они продолжали отвечать на вопросы, пока не удавалось полностью решить вопрос. Я весьма доволен полученным результатом и надеюсь, вам удастся значительно улучшить и расширить сайт мобильной версией при помощи Mobile Joomla!

Оригинальная статья: Mike Rohde
Eugene Sivokon
Предприниматель, менеджер проектов, Joomla-энтузиаст. Занимаюсь созданием сайтов с 2002 года. Координатор нескольких Joomla проектов. Обожаю путешествовать, интересуюсь историей и изучаю иностранные языки.

Подпишитесь на рассылку новостей CMScafe