Обзоры расширений Joomla

 

 

 

В предыдущих статьях «Ответы на вопросы по шаблонам для Джумла. Внесение изменений» и «Ответы на вопросы по шаблонам для Joomla. Установка, настройка, удаление» мы рассмотрели ответы на вопросы от установки шаблона и его демонстрационной версии «Joomla QuickStart» до его изменения и удаления. Установку QuickStart (быстрый старт) мы рассмотрели на примере шаблона JM Modern VirtueMart Store от известного разработчика Joomla-Monster. Все материалы в данных статьях подходят практически к любому шаблону. В этой статье мы поговорим, на мой взгляд, о лучшем шаблоне сайта вакансий для Joomla – JM Job Listings (от Joomla-Monster).

Безусловно, этот шаблон универсальный. Его можно применять для сайта любого типа на Joomla 3. Но так как он был разработан специально для DJ-Classifieds, лицензия на который входит в стоимость шаблона, а DJ-Classifieds – это расширение для создания каталога (или доски объявлений), то и сам шаблон больше ориентирован на создание каталогов. Помимо лицензии на DJ-Classifieds Вы ещё получите лицензии на DJ-MediaTools, DJ-MegaMenu и DJ-Tabs.

В обзоре будет участвовать последняя, на момент написания статьи (24.12.2015), стабильная версия шаблона на русском языке JM Job Listings 1.0.0 (фреймворк EF4 4.6.0) в Joomla 3.4.7 (на русском языке). Для тестирования используется QuickStart шаблона с англоязычными данными. Дополнительные расширения:

Разрешение экрана монитора, на котором проводится тестирование – 1920х1080 пикселей.

JM Job Listings

Пример самого шаблона объявлений Joomla (рисунок ниже) можно найти на официальном сайте разработчика. Там есть красивый демонстрационный пример и описание на английском.

JM Job Listings
JM Job Listings

К основным особенностям шаблона хочу отнести следующее.

  • Совместимость с Joomla 3.
  • Адаптивный (но можно отключить).
  • Поддержка Bootstrap.
  • HTML5 и CSS3.
  • Поддержка LESS.
  • Нормальное отображение во всех современных браузерах актуальной версии.
  • Плоский дизайн (от англ. Flat Design).
  • Работает на фреймворке EF4.
  • Гибкая настройка шаблона (из админки без правки кода):
    • Логотип, слоган, изображение иконки (favicon).
    • Возможность закрепить шапки сайта и верхнего меню в верхней части страницы при прокрутке.
    • Возможность отключения вывода области компонента (контента) на определённых страницах.
    • Очень гибкая настройка макетов шаблона с возможностью их разграничения для экранов устройств с различной шириной. Возможность добавления, удаления позиций шаблона, изменения ширины шаблона и позиций модулей и многое другое.
    • Настройки шрифтов. Есть возможность использования шрифтов Google и собственных файлов шрифтов.
    • Настройки цвета различных элементов шаблона.
  • Наличие «дополнений»:
    • Кнопка Вверх.
    • Боковая панель «Off-Canvas».
    • Страница «Скоро будет» (от англ. «Coming soon»).
    • Настройщик темы. Опции настройки шаблона отображаются во фронтальной части сайта.
  • Наличие четырёх «базовых» цветовых схем: голубая, зелёная, морская, тёмная. Есть возможность их изменить.
  • Возможность оптимизации скорости загрузки (сжатие CSS, JS и HTML), отложенная загрузка скриптов.
  • Возможность настройки странницы 404 путём редактирования соответствующего материала Joomla.
  • Поддержка RTL-языков (письменность справа налево).
  • Поддержка Facebook Open Graph.
  • Возможность импорта\экспорта настроек шаблона.
  • Наличие QuickStart и исходных PSD-файлов растровых изображений.
  • Проработанный дизайн для «типовых» страниц Joomla: материалы, категории, страница регистрации, контакты и так далее.
  • Улучшенная совместимость с компонентом каталога Joomla DJ-Classifieds, галерей DJ-MediaTools, меню DJ-MegaMenu и вкладок DJ-Tabs. Под улучшенной совместимостью понимается более детальная проработка дизайна\стилей шаблона под эти расширения.
  • Оперативная техническая поддержка.
  • Наличие документации.
  • Шаблон переведён на русский язык.

Шаблон Joomla 3 на русском

JM Job Listings можно настроить под свои нужды даже без правки кода. Для этого достаточно зайти в Расширения – Менеджер шаблонов – jm-job-listings. Перед этим убедитесь, что плагин «Фреймворк EF4 Joomla-Monster» установлен и активирован. Все настройки разделены на вкладки.

На вкладке Подробно (рисунок ниже) в спадающем списке По умолчанию можно указать, для какого языка применять данный стиль. Это относится только к мультиязычным сайтам. О том, как создавать и применять разные стили шаблона (не путать с CSS-стилями), Вы можете прочесть в этой статье.

У одного шаблона может быть несколько стилей. Грубо говоря, под «стилем» шаблона, в данном случае, подразумевается группа настроек. Например, можно создать несколько стилей с разными настройками и применять их к разным страницам сайта.

Подробно
Подробно

На вкладке Документация Вы найдёте ссылки на справочную информацию на официальном сайте разработчика данного шаблона объявлений Joomla. Документация на английском языке.

На вкладке Обновления есть информация о версии фрейворка EF4 и самого шаблона.

На вкладке Привязка к меню Вы можете указать, для каких пунктов меню нужно применять этот стиль шаблона.

Обратите внимание, что выше и ниже перечисленные настройки, в большинстве случаев, будут совпадать для всех шаблонов Joomla-Monster на фрейворке EF4.

Основные настройки

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

  • Логотип. Позволяет задать изображение логотипа сайта.
  • Текст логотипа. Если изображение логотипа не задано, то можно указать текст, который будет отображаться вместо него.
  • Описание сайта. Текст, отображаемый под логотипом.
  • Изображение иконки (favicon). Можно указать свою иконку сайта (формат ICO), которая, например, может отображаться во вкладке браузера и в сниппетах поисковых систем.
Шаблон Joomla 3 на русском
Шаблон Joomla 3 на русском
  • Переключатель размера шрифта. Позволяет включить\отключить отображение во фронтальной части сайта специального переключателя для изменения размера шрифта. Он появляется над контентом справа (рисунок ниже).
  • Кнопка Вверх. Позволяет включить\отключить отображение во фронтальной части сайта кнопки «Вверх» в правом нижнем углу страницы (рисунок ниже).
Переключатель размера шрифта
Переключатель размера шрифта

Боковая панель Off-Canvas. Позволяет включить или отключить отображение специальной боковой панели. В ней можно разместить нужные Вам модули, опубликовав их в специальной позиции «offcanvas». Панель появляется по нажатию на кнопку (на рисунке ниже кнопка расположена справа от формы входа на сайт в шапке сайта). Но эту кнопку можно расположить где угодно в позиции модуля. Для этого создайте модуль тип «HTML-код» и добавьте в него следующий код:

<a class="toggle-nav menu"><span class="icon-align-justify"></span></a>

Перед этим, возможно, понадобится включить редактор «Без редактора» (в менеджере плагинов). Это делается для того, чтобы Ваш текущий редактор не урезал часть кода.

  • Ширина Off-Canvas. Ширина боковой панели в пикселях.
  • Позиция Off-Canvas. Позиция боковой панели (слева или справа).
Шаблон каталога Joomla
Шаблон каталога Joomla

Скоро будет. Включив данную опцию, активируете отображение специальной страницы «Скоро будет» (рисунок ниже). Например, это может быть страница с грядущей распродажей товаров или какой-то материал (статья) о супер-акции. Нужно включить данную опцию, задать будущую дату Дата для Скоро будет, когда планируете отобразить контент страницы и настроить модуль. К сожалению, нет возможности задать время.

Модуль настраивается в менеджере модулей Joomla. Не важно, какой именно будет модуль (его тип). Главное, опубликовать его в позиции «coming-soon» и указать в его настройках, на каких страницах нужно его отображать. То есть, везде, где Вы его зададите, будет видна страница «Скоро будет» со счётчиком обратного отсчёта. Если нужно более гибкое управление модулем, чем позволяют стандартные настройки Joomla, ознакомьтесь со статьёй «Обзор Advanced Module Manager. Управление модулями Joomla». В моём примере это модуль тип «HTML-код». Но можно, например, отобразить форму предварительной подписки, сделанной, например, в RSForm Pro.

Об обновлениях в в шаблонах на базе фремворка EF4, касающихся данного вопроса, Вы можете прочесть в статье «Обзор JM Minima. Чистый шаблон Joomla».

Те, кто знакомы с PHP, могут отредактировать страницу «Скоро будет» путём правки файла «/templates/jm-template-name/tpl/comingsoon.php».

Скоро будет
Скоро будет
  • Отзывчивый макет. Включает и отключает отзывчивый (адаптивный) макет (дизайн). Если опция включена, то содержимое сайта (включая все модули) не будет подстраиваться под ширину экрана пользователя. Google и Яндекс настойчиво рекомендуют использовать отзывчивый дизайн. Плюс, пользователи, которые заходят на сайт с устройств с небольшими экранами, смогут использовать Ваш сайт с меньшими затруднениями, если активна опция отзывчивого макета.
  • Отключить компонент. Вы можете указать, на каких страницах сайта нужно отключить вывод области контента. Например, чтобы отображать там только модули.
  • Закреплённая панель. Если опция включена, при прокрутке страницы шапка сайта (верхний колонтитул) будет закреплена в верхней части страницы (рисунок ниже).
Шаблон объявлений Joomla
Шаблон объявлений Joomla
  • Фон шапки. Можно задать фоновое изображение позиции «header». На рисунке ниже это область с поиском по каталогу Joomla.
JM Job Listings
JM Job Listings

Построитель макета

На данной вкладке (рисунок ниже) Вы можете настроить макет шаблона объявлений Joomla, при этом можно настроить разные макеты под разную ширину экрана. Макет шаблона – это аналог модульной сетки. При помощи макета Вы задаёте расположение модулей шаблона и контентной (компонентной) области сайта.

Можно всё узнать путём тестирования, но для более глубокого понимания процесса макетирования и сокращения времени на итерационную настройку, рекомендую ознакомиться со статьёй «General Info - framework for Joomla 3.x» (на англ. или моим переработанном переводе данной статьи), в которой разработчики шаблона JM Job Listings объясняют особенности сетки Bootstrap, так как именно на этом наборе инструментов построен сам шаблон. Это особенно полезно для понимания расположения модулей в одном блоке по вертикали, то есть, что значат размер позиции модуля – цифры «1-12» и надпись «авто» внутри позиций модулей (на рисунке ниже).

Построитель макета
Построитель макета

На рисунке ниже:

  1. Серые области – блоки. Блоки – совокупность модулей (как правило, это строки или столбцы макета шаблона).
  2. Белые области внутри серых – позиции модулей.
  3. Надписи в левом верхнем углу белых областей – названия позиций модулей. Например, «top-menu-nav», «header-bg» и т. д. Их указывают в настройках модулей для отображения модуля в нужном месте сайта.
  4. Надписи в левом нижнем углу белых областей – стиль позиции модуля. Например, «jmmodule». Стили задаются в CSS-файлах.
  5. Цифры в центре белой области или надпись «авто». Размер позиции модуля в сетке Bootstrap.
Элементы макета
Элементы макета

Текущий макет. Для одного шаблона можно создать множество макетов. В этом списке перечислены все созданные Вами макеты и макеты, доступные по умолчанию. Под спадающим списком есть инструменты (рассмотрим слева направо), которые позволят:

  1. Скопировать текущий макет для его дальнейшей правки.
  2. Удалить макет.
  3. Назначить макетом по умолчанию для данного шаблона.
  4. Восстановить для макета настройки по умолчанию.

Ширина шаблона. Ширина шаблона сайта в пикселях или процентах.

Размер обводки. Расстояние между блоками, модулями и другими элементами сайта (в пикселях или процентах).

Далее идут три «набора опций»:

  1. Настроить структуру макета.
  2. Настроить отзывчивый макет.
  3. Назначить макет за элементами меню.

Об обновлениях в в шаблонах на базе фремворка EF4, касающихся данного вопроса, Вы можете прочесть в статье «Обзор JM Minima. Чистый шаблон Joomla».

Настроить структуру макета

В настройках структуры макета Вы можете изменить «основной» макет (для больших экранов). Доступны такие инструменты.

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

Изменить порядок следования основных блоков макета (на рисунке ниже обведено красным) (иконка с четырёх направленной стрелочкой). «Взявшись» за этот инструмент левой клавишей мыши, Вы сможете перетащить блок в нужное место макета. Для удаления блока из макета перетащите его в область «ИСКЛЮЧЁННЫЕ БЛОКИ: включить/исключить блоки путём их перетаскивания между макетом и этой областью» в нижней части построителя макета.

Инструменты
Инструменты

В «контентном» (компонентном) блоке (рисунок ниже) при помощи трёх горизонтально расположенных инструментов перемещения (на рисунке ниже цифра 1) можно менять порядок следования вертикальных столбцов сетки макета. При помощи инструментов «+» и «-» (на рисунке ниже цифра 2) под столбцами можно менять ширину столбцов (согласно сетки Bootstrap). При помощи инструментов (цифры 1-6), которые на рисунке ниже отмечены цифрой 3, можно указать, сколько позиций модулей будет отображаться в блоке (по горизонтали). Это можно делать только для блоков тип «flexiblock».

Инструмент пересчёта ширины позиций модулей (на рисунке ниже цифра 4) позволяет переключаться между двумя состояниями:

  1. Включить полный пересчёт ширины в зависимости от опубликованных или не опубликованных модулей на определённой странице. Это сделает ширину позиций модулей пропорциональной области, и модули будут занимать 100% ширины страницы. По умолчанию, активно именно это состояние. Например, если в блоке предусмотрено отображение 4-х позиций модулей, а на самом деле на сайте будет опубликовано только 3 модуля (по одному в каждой позиции), то три модуля равномерно распределятся по всей ширине области.
  2. Отключить полный пересчёт ширины. У позиций модулей будет фиксированная ширина, независимо от публикации модуля в определённой позиции. Например, если в блоке предусмотрено отображение 4-х позиций модулей, а на самом деле на сайте будет опубликовано только 3 модуля (по одному в каждой позиции), то три модуля распределятся по всей ширине области, которая для них отведена (не затрагивая ширину 4-го модуля), а вместо 4-го модуля ничего не будет отображаться.
Инструменты (2)
Инструменты (2)

Настроить отзывчивый макет

В данном шаблоне Joomla 3 на русском Вы можете настроить макет для устройств с экранами различной ширины.

  • Большой экран. Ширина 1200 пикселей и больше. Как правило, это настольный компьютер или ноутбук.
  • Нормальный экран. Ширина 980-1199 пикселей. Как правило, это планшет в горизонтальной (альбомной) ориентации или настольный компьютер.
  • Средний экран. Ширина 768-979 пикселей. Как правило, это планшет.
  • Маленький экран. Ширина 481-767 пикселей. Как правило, это планшет в вертикальной (книжной) ориентации или телефон в горизонтальной (альбомной) ориентации.
  • Очень маленький экран. Ширина 480 пикселей и меньше. Как правило, это телефон.
Настроить отзывчивый макет
Настроить отзывчивый макет

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

Назначить макет за элементами меню

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

Назначить макет за элементами меню
Назначить макет за элементами меню

На этом настройки макета шаблона каталога Joomla не заканчиваются. Для более тонкой настройки, например, для добавления блока или новой позиции модуля, Вам понадобится немного изменить код. Что именно менять, смотрите в статье «Layout Builder» (на англ.).

Русификатор JM Job Listings

Скачать русификатор JM Job Listings.

В следующей статье «Обзор JM Job Listings. Настраиваемый шаблон Joomla» рассмотрим оставшиеся опции данного шаблона. А в статье «Обзор JM Joomclassifieds. Шаблон доски объявлений Joomla 3» мы рассмотрим ещё один шаблон для DJ-Classifieds.

 

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