Image
    Уже завтра у вас будет установленный и настроенный сайт на CMS Joomla
    Image
    Центр обучения Joomla
    Warp Framework Joomla

    Warp 7 Framework: возможности и настройки

    Warp — популярный фреймворк для Joomla от студии YOOtheme, отличающийся наглядной системой кастомизации и применением встроенного CSS-фреймворка UIKit 2. Рассмотрим ключевые особенности и настройки данного фреймворка на примере бесплатного шаблона Master 2 от YOOtheme.

    Содержание

    1. Ключевые особенности
    2. Базовые возможности
    3. Настройки шаблона
    4. Выводы

    Ключевые особенности Warp Framework

    На момент написания данного обзора Warp, как и Helix 3, является фреймворком предыдущего поколения и не обновляется разработчиком, который активно поддерживает и продвигает свой инновационный фреймворк YOOtheme Pro. Тем не менее, на Warp Framework создано немало шаблонов и они всё еще создаются сторонними разработчиками. В этом материале мы рассмотрим ключевые особенности, возможности и настройки данного фреймворка.

    Отметим ключевые особенности:

    • Оригинальная структура файлов

      Шаблоны, созданные на базе Warp, имеют свою оригинальную структуру. Это может обескуражить неопытных администраторов, привыкших видеть разметку позиций модулей в корневом файле шаблона index.php.

    • UIkit 2

      UIkit — это CSS-фреймворк от YOOtheme, аналогичный Bootstrap. Нельзя сказать, что UIkit хуже или лучше, чем Bootstrap, но субъективно документация по нему преподносится несколько удобнее, а в отношении функционала он ничем не уступает своему куда более популярному аналогу.

    • Налядная кастомизация элементов шаблона

      Шаблоны на Warp оснащены инструментом Customizer, позволяющим гибко и наглядно кастомизировать стиль всех элементов шаблона. Этот инструмент — флагманская фишка Warp.

    • Кастомизация модулей и меню

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

    Базовые возможности Warp Framework

    Важно знать:
    Рассматривается версия Warp Framework 7.3.36.

    Изначально Warp обладает рядом опциональных возможностей:

    • Минификация кода CSS и JS-файлов.
    • Отключение мета-тега Viewport.
    • Отключение Bootstrap.
    • Социальные кнопки Tweet, Facebook Like и Google+ в постах блога Joomla.
    • Определение стилей для модулей на базе UIkit.
    • Добавление пользовательских скриптов.
    • Фиксированная навигация.
    • Предопределенные макеты.
    • Предопределённые наборы стилей.
    • Управление шириной боковых панелей в процентах.
    • Управление отображением модулей в различных позициях.
    • Кастомизация стиля, адаптивности и заголовков модулей.
    • Гибкая кастомизация пунктов меню.

    Настройки шаблона на Warp

    Рассмотрим возможности фреймворка на примере бесплатного шаблона Master 2 (скачать можно тут) от YOOtheme.

    Шаблон Master 2
    Важно знать:
    Все настройки шаблонов, предоставляемые фреймворками, находятся на странице Расширения → Шаблоны → Стили → [Нужный шаблон]

    Все настройки шаблона на Warp размещены во вкладке Настройки и имеют следующий набор вкладок:

    1. Settings
    2. Layouts
    3. Modules
    4. Menus
    5. Information
    Вкладки с настройками шаблона на фреймворке Warp

    Вкладка Settings

    Вкладка включает следующие разделы:

    1. Styles
    2. Development
    3. Compression
    4. Responsive
    5. Bootstrap
    6. Content
    7. Social Buttons
    8. Modules
    9. Additional Scripts

    Styles

    В данном разделе находится кнопка Customizer, при клике по которой откроется страница для наглядной настройки стилей всех элементов шоблона: страница сайта будет размещена справа, а опции кастомизации стилей — слева.

    Кнопка «Customizer»
    Страница кастомизатора Warp

    В верхне части под словами Select a style из выпадающего списка можно выбрать предустановленный стиль (в шаблоне Master 2 есть только стиль default), в который будут сохраняться все изменения. Текущий стиль можно скопировать, нажав кнопку Copy и введя его названия, после чего можно кастомизировать именно его:

    Выбор стиля

    По умолчанию для кастомизации открыты лишь 3 раздела:

    • General,
    • Typography,
    • Buttons, Navs & Badges.

    Каждый раздел имеет ряд опций, позволяющих тонко настраивать стили элементов шаблона, основанных на CSS-фреймворке UIkit.

    Если активировать чек-бокс Advanced Mode, то в панели кастомизации станет доступно еще несколько разделов для самых разных элементов с огромный количеством опций. Кроме того, возле названий большинства разделов в скобках имеется переключатель More, при клике по которому в разделе станут доступны дополнительные настройки.

    Важно знать:
    Настраиваемые в кастомизаторе элементы можно рассмотреть в документации к UIkit 2.

    Все изменения будут незамедлительно отображаться на представленной в правой части странице сайта, однако не забывайте жать кнопку Save, чтобы эти изменения были сохранены в выбранный стиль.

    Development

    Представленные опции пригодятся разработчикам при настройке сайта. На работающем сайте все чек-боксы в данном разделе должны быть декактивированы.

    Раздел Development

    Compression

    Из выпадающего списка можно выбрать 4 варианта для сжатия данных:

    1. None,
    2. Minify,
    3. Minify + Data URIs,
    4. Minify + Data URIs + Gzip.

    Это будет полезно, если аналогичное сжатие не осуществляется другими расширениями (например JCH Optimize).

    Раздел Compression

    Responsive

    Здесь можно активировать опцию Disable the viewport meta tag для отключения мета-тега Viewport, который делает сайт адаптивным на мобильных устройствах и планшетах. Без мета-тега Viewport на данных устройствах сайт будет выглядеть также, как и на десктопах.

    Раздел Responsive

    Bootstrap

    Здесь можно активировать опцию Disable Bootstrap. Это исключит загрузку ненужных файлов, если на сайте не применяются сторонние расширения, использующие Bootstrap.

    Раздел Bootstrap

    Content

    В этом разделе имеются следующие опции:

    • Hide To-top scroller - отключает отображение кнопки со ссылкой, ведущий в верх страницы.
    • Hide Warp branding - отключает копирайт Warp в футере.
    Раздел Content
    Кнопка «Наверх» и копирайт

    Social Buttons

    Здесь можно включить или отключить показ кнопок социальных сетей, отображаемых в материалах Joomla:

    • Show Tweet button,
    • Show Google+ button,
    • Show Facebook Like button.
    Раздел Social Buttons
    Кнопки социальных сетей

    Modules

    В этом разделе можно задать стиль всем модульным позициям шаблона.

    Раздел Modules

    Существуют следующие стили:

    • Box - блок с предопределенного цвета фоном.
    • Box Primary - блок с предопределенного pimary-цвета фоном.
    • Box Secondary - блок с предопределенного secondary-цвета фоном.
    • Header - блок без фона, но с выделенным заголовком.
    • Space - блок без фона с разделителем.

    Цвета для стилей настраиваются в кастомизаторе.

    Важно знать:
    В демоданных к шаблонам на Warp всегда имеется страница (в шаблонах от YOOtheme она называется UIkit), на которой наглядно представлены многие элементы фреймворка UIkit, в том числе перечисленные стили для модульных позиций.
    UIkit

    Additional Scripts

    В этом разделе имеется текстовая область, в которую можно вставит код Google Analytics, Яндекс.Метрики или любой другой JS-код, который будет размещен на каждой странице перед закрывающим тегом body.

    Additional Scripts

    Вкладка Layouts

    Здесь можно создавать макеты шаблона и назначать их на отдельные страницы сайта.

    Разделы:

    1. Layouts
    2. Style
    3. Content
    4. Sidebars
    5. Grid

    Layouts

    Здесь выбирается из выпадающего списка или создаётся новый макет. Все опции ниже настраиваются именно для выбранного макета. Для создания нового макета нужно нажать кнопку Add.

    Warp Layouts

    Style

    Здесь из выпадающего списка выбирается стиль (набор CSS-правил), определённый в кастомизаторе.

    Warp Layouts Style

    Content

    В этом разделе есть опция Hide system output, активация которой отключит вывод всех системных оповещений.

    Warp Layouts Content

    Sidebars

    Здесь определяется ширина (Width) и выравнивание (Alignment) боковых панелей.

    Warp Layouts Sidebars

    Grid

    Здесь определяются макеты cетки модульных позиций.

    Warp Layouts Grid

    В таблице для модулей в указанных позициях можно назначить:

    • Layout - макет, согласно которого будут выводиться модули в данной позиции.
    • Responsive - изменение сетки модулей в позиции в зависимости от устройства вывода.
    • Divider - активация разделительной черты между модулями.
    Вариации расположения модулей в позиции
    Вариации расположения модулей в позиции (Layout)

    Вкладка Modules

    В этой вкладке можно кастомизировать существующие модули, удобно представленные в табличном виде.

    Вкладка «Modules»

    Для каждой модульной позиции существует отдельная таблица модулей. Название позиции модуля указывается в первом столбце, а в последующих — настройки для модуля:

    • Class

      Здесь можно назначить модулю CSS-класс.

    • Style

      Здесь можно назначить модулю один из семи предустановленных стилей.

    • Center

      В шаблоне Master 2 данный чек-бокс не вносит изменений в модуль.

    • Title

      Здесь можно определить тег для заголовка модуля. Важно: аналогичная опция в настройках модулей Joomla для шаблонов на Warp не работает.

    • Icon

      Здесь можно выбрать иконку, отображаемую перед заголовком модуля.

    • Badge

      Здесь можно выбрать тип значка (отличается цветом фона, определяемым в кастомизаторе) и определить его текст в соседнем текстовом поле.

    • Display

      Здесь определяются типы устройств, на которых должен отображаться модуль.

    Вкладка Menus

    В этой вкладке осуществляется кастомизация пунктов меню.

    Вкладка «Menus»

    В выпадающем списке выбирается тип меню, после чего под ним в табличном виде отображаются соответствующие пункты меню. В первом столбце перечисляются названия пунктов, а в последующих — их настройки:

    • Columns

      Здесь определяется количество колонок для выпадающего списка с вложенными пунктами. Если для текущего пункта меню нет вложенных, то настройка не внесёт никаких изменений

    • Column Width

      Здесь определяется фиксированный размер колонки выпадающего списка.

    • Icon

      Здесь определяется иконка, отображаемая перед названием пункта меню. В текстовое поле можно ввести адрес изображения.

    • Subtitle

      Здесь можно ввести подзаголовок, отображаемый мелким текстом под названием пункта меню.

    Вкладка Information

    Здесь отображается информация о используемой версии Warp и дугие мета-данные.

    Вкладка «Information»

    Выводы

    Warp Framework — оригинальный и функциональный фреймворк, позволяющий наглядно кастомизировать практически все элементы на сайте. Любая кастомизация осуществляется в настройках шаблона (например, Helix 3 добавляет дополнительные настройки для пунктов меню в отдельную вкладку на странице редактирования пунктов меню).

    Почему же разработчик YOOtheme перестал обновлять Warp Framework и переключился на YOOtheme Pro? На то есть несколько причин:

    • UIkit: Warp базировался на UIkit 2, YOOtheme Pro — на UIkit 3.
    • Drag & Drop: модная и удобная технология «перетаскивания» в Warp не применялась вообще. Это не проблема для разработчиков, но пользователи, далёкие от кодирования, очень любят Drag & Drop.

    Пожалуй, другие существенные минусы у Warp отыскать сложно, поэтому на данном фреймворке продолжают создавать качественные и функциональные шаблоны.

    Обзоры других фреймворков:

    Какие шаблоны для Joomla самые лучшие?
    Helix 3 Framework: возможности и настройки
    Warp 7 Framework: возможности и настройки
    Какие шаблоны для Joomla самые быстрые?
    Шаблоны для создания Landing Page на Joomla
    YOOtheme Pro: возможности и настройки
    Helix Ultimate: возможности и настройки
    T3 Framework: возможности и настройки
    previous arrow
    next arrow
    Slider

      Как быстро разобраться в Joomla

      Joomla.center is not affiliated with or endorsed by the Joomla! Project or Open Source Matters. The Joomla! name and logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.

      Joomla!® является торговой маркой компании Open Source Matters inc в США и др. странах. Название Joomla! и его вариации используются в рамках ограниченной лицензии, определённой компанией Open Source Matters. Проект joomla.center не относится к компании Open Source Matters или проекту Joomla! Точки зрения представленные на данном сайте не являются официальными точками зрения Joomla Project или Open Source Matters. Торговая марка Joomla® и логотип используются в рамках ограниченной лицензии, предоставленной Open Source Matters.

      © Александр Куртеев. Центр обучения Joomla.
      ОГРНИП 307434525600161, ИНН 434540800305
      Все права защищены. © 2008 - 2019

      Договор оферты | Политика обработки персональных данных
      Согласие с рассылкой | Отказ от ответственности