Warp theme framework что это

Обновлено: 03.07.2024

Не можете найти шаблон Joomla, который соответствует вашим потребностям? Хотите создать собственный шаблон, но не знаете с чего начать? Фреймворк для шаблонов именно то, что вам нужно.

Если вы не знакомы с этим термином, то фреймворк шаблона - это по сути "пустой холст" или, другими словами, основа для разработки собственной темы. Фреймворки устанавливаются как обычные шаблоны Joomla, и содержат все необходимые функции: позиции модуля, меню стилей, параметры шаблонов и т.д. Вам просто нужно добавить визуальный дизайн, который, в некоторых фреймворках может быть сделан с внутренней стороны панели управления шаблоном. С помощью всего лишь базовых знаний CSS, вы можете легко настроить стиль в соответствии с вашими потребностями.

Существуют много фреймворков Joomla и каждый обладает специфическими особенностями. Здесь будут описаны три наиболее популярные из них Gantry, Warp и Т3. Эти фреймворки вы можете скачать бесплатно, они свободно распространяются под лицензией GPL.

Gantry Framework

Gantry Framework разработан командой RocketTheme, одной из первых команд разработчиков шаблонов Joomla. Структура существовала несколько лет и недавно подверглась капитальному ремонту. Новый Gantry 4.0 был наделен свойством "отзывчивости" и теперь фреймворк интегрируется с популярным фреймворком Bootstrap Twitter.

Менеджер шаблонов имеет широкие возможности конфигурации, находящиеся в удобной панели управления. Если вы когда-либо использовали шаблоны RocketTheme, то вы должны быть знакомы с этим интерфейсом.

Особенности:

78 позиций модулей, шесть колонок

10 макетов позиций модулей

3 боковых панели

Сжатие файла шаблона

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

Ширина шаблона: отзывчивая ширина, фиксированная 960, зафиксированная 1200

Построено на LESS CSS Compiler

Использует Twitter Bootstrap

Библиотека шрифтов Google

Если вы разрабатываете большой сайт, для которого необходимо несколько вариантов макета, то обязательно выберите Gantry. Многофункциональный пульт управления в сочетании с большим количеством позиций модуля позволят вам создать макет вашей мечты. У вас также не возникнет проблем если вы не хотите лезть в код. Gantry поставляется с несколькими готовыми стилями, которые сами по себе уже прекрасно смотрятся. Вы можете настроить внешний вид в редакторе стилей, или создать свою собственную тему с нуля, для чего вам понадобятся базовые знания HTML и CSS. RockeTheme также предлагает целый ряд бесплатных и коммерческих расширений, которые хорошо интегрируются с Gantry.

Warp Framework

Warp Framework - разработка команды YooTheme. Это также основная структура на которой строятся все шаблоны клуба. В отличие от Gantry, Warp Framework не использует Twitter Bootstrap. При всех разговорах о Boostrap в Joomlaverse в последнее время, вы можно подумать, что это отрицательный момент. Но здесь есть и положительная сторона.

Warp Framework развивался на протяжении многих лет, и является мощной структурой, сравнимой с Bootstrap. Warp Framework чрезвычайно легкий, и темы могут быть легко перенесены на другие сайты Joomla и даже в WordPress.

Особенности:

40 позиций модуля, шесть колонок

3 макета позиций модуля: Double, Equal, Stack

2 боковых панели

Для мобильного: отзывчивый дизайн

Ширина шаблона: отзывчивая или фиксированный до определенного размера (определяете вы)

Создание пользовательских дочерних стилей

Сжатие файла шаблона

Пользовательский Аjax поиск

Модули в выпадающем меню

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

Warp работает лучше, когда вы создаете свою собственную "child" тему, создать ее также просто как создать новую папку и файл CSS. Ваша новая тема автоматически появится в качестве опции стиля в бэкенде шаблона. Вы можете создать столько стилей темы, сколько хотите.

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

В дополнение к встроенным функциям, Warp прекрасно интегрируется с бесплатными компонентами YOOtheme: WidgetKit Lite и Zoo. WidgetKit Lite представляет собой набор модулей, который включает функцию отзывчивости контента, лайтбоксы, и модуль Twitter. Zoo является динамическим компонентом для управления контентом, который больше всего подходит для блогов и каталогов.

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

T3 Framework

T3 Framework доступен для свободного использования от разработчиков клуба шаблонов JoomlArt. Установите T3 Blank Edition, или используйте бесплатный шаблон Purity. T3 по умолчанию не обладает свойством отзывчивости, но имеет встроенные мобильные темы, которые могут быть настроены в зависимости от устройства.

Особенности:

2 боковых панели

Мобильные устройства: пользовательские темы

5 различных основных систем меню

Google Font API

Создание различных цветовых тем и макетов

Сжатие файла шаблона

T3 имеет несколько вариантов конфигурации в панели управления шаблоном. В этом плане он уступает предыдущим фреймворкам, но в зависимости от уровня вашего мастерства, T3 является довольно простым в настройке с помощью HTML и CSS. Одной из уникальных особенностей является настраиваемая система блоков. Используя XML, вы можете повторно расположить блоки (раздел, которые удерживают позиции модулей), а также сохранить их в виде макетов. Ваши собственные макеты могут быть отнесены к теме профилей или предназначены для мобильных устройств. XML макеты можно редактировать с помощью панели управления шаблоном, где вы также можете загружать новые.

Для того, чтобы получить отзывчивый шаблон на фреймворке T3 от JoomlArt, установите шаблон под названием JA Elastica, это их первый отзывчивая тема построенная на T3 Framework.

Итог

Хотя многие из этих фреймворков имеют обширные панели управления и десятки позиций модулей, не позволяйте только этим причинам быть решающим фактором для вашего сайта. Вам, вероятно, никогда не придется использовать все доступные позиции модулей, и вы потратите немного времени на управление сайтом. Установите один из фреймворков и потратьте несколько минут на изучение особенностей. Затем установите другую и сравните два. Большинство из этих фреймворков имеют подробную документацию.

Давайте начнем серию сногсшибательных постов про Warp6, это новый фреймворк от компании YooTheme, в них мы рассмотрим все возможности данного инструмента и разберемся в них вместе. В этой статье мы рассмотрим основную концепцию шаблонов на Warp и как мы сможем его использовать в повседневной работе. Если вы не знаете, что такое Warp6 вам следует немедленно обратиться в знания, прочитав анонс данного шаблонизатора. После того как вы обратились в слух мы наконец сможем начать знакомство!

Фреймворк

Warp6 это следующая ступень эволюции предыдущего фреймворк студии YooTheme Warp5.5, после того как дань капитану очевидности отдана преступим к особенностям. Как и его предшественник, данный шаблонизатор создан для решения повторяющихся задач возникающих при создании шаблона для сайта. Warp6 содержит в себе содружество HTML, JS и PHP классов помогающих и убыстряющих разработку. Фреймворк действительно портативен т.к. все необходимые файлы находятся в одной директории под названием warp, эта папка находится в каждом шаблоне. Это исключает зависимость от плагинов или компонентов (как например в JA T3 (плагин) или Gantry (компонент + библиотека)). Ненужно нечего устанавливать и соответственно поддерживать, все на благо разработчика!

Warp6 можно разделить на три слоя. Первый слой назовем «ядром», оно содержит в себе основные стили и js скрипты, а так же в нем скрываются php хелперы (helpers). Ядро является универсальным и будет работать на всех поддерживаемых системах. Второй слой имеет название «зависимый слой», он необходим для бесшовной интеграции в CMS. Эта часть адаптируется к определенной системе, сформировывая определенное API для работы шаблона. Третьим слоем называется «слоем шаблона», он содержит индивидуальные стили для темы оформления. Это место где хранятся все пользовательские стили, скрипты и изображения.

Каскад

Что бы обеспечить максимальную гибкость мы внедрили специальный каскад файлов в фреймворк. Если вы внедрите CSS, JS или php файл шаблона в специальную папку, то Warp последовательно подключить их.

Вот как выглядит каскад:

Папка шаблона
Специальная директория, например warp/systems/joomla
Директория warp

Это дает вам большую свободу действий для переопределения любой части фреймворка. Теперь мы рассмотрим наиболее важные для шаблона файлы.

Файлы шаблона

Основной файл шаблонизатора это /layouts/template.php это сердце каждого шаблона, он обеспечивает HTML разметку сайта. Это отличается от стандартных шаблонов для Joomla и WordPress, в которых основная разметка находится в файле <iindex.php . Второй важный файл это /layouts/template.config.php , включающий в себя несколько формулы расчета ширина макета, подгружает и определяет правила для CSS стилей JavaScript.

Модули

Модули или виджеты могут быть отображены в различных стилях, с дополнительными иконками или бейджами. Файл /layouts/module.php отвечает за дизайн всех вариации модулейРЕЬ. В зависимости от выбранного стиля для модуля, module.php загружает необходимую HTML разметку. Так же фреймворк дает возможность выбрать три самые используемые разметки расположения модулей, такие как equal (все модули в позиции располагаются рядом друг с другом и имеют равную ширину), double (первый модуль в ряду имеет двойную ширину) и stacked (модули располагаются друг под другом). Кроме того вы можете расширить это многообразие своим собственным стилем или разметкой.

CSS файлы делятся на три слоя и располагаются в различных местах фреймворка, файлы шаблона располагаются в папке /css , системные в /warp/systems/joomla/css и фреймворка в папке /warp/css . Подключить файлы очень просто, потому что Warp6 автоматически находит их в этих папках. Все файлы являются блочными и хорошо структурированными, каждый из них имеет название, показывающее за какую часть он отвечает.

JavaScript

Warp6 так же дает вам библиотеку эффектов JavaScript отвечающих за выпадающее и аккордеон меню, живой поиск, а так же за мобильную версию сайта. Скрипты также структурированы и хранится в советующих папках, скрипты шаблона хранятся в папке /js , системные файлы в /warp/systems/joomla.1.6/js , a файлы фреймворка в директории /warp/js . Все конфигурационные скрипты сосредоточены в файле /js/template.js . Этот файл используется для включения или отключения эффектов, которые будут загружаться вместе с шаблоном.

Система Разметки

Каждая система имеет множество шаблонов, которые определяют HTML-разметку для вывода и отображения информации из CMS. Для Joomla шаблоны, как правило, используют HTML переопределение, для оформления компонентов или модулей, такие как, модуль входа или поиска. Эти файлы находятся в папке warp/systems/joomla/layouts . Для WordPress шаблоны имеют возможность переопределять вывод определенных страниц, таких как блог, главная страница, одиночный материал, архив. Для этой CMS файлы находятся в warp/systems/wordpress.3.0/layouts . Что бы не усложнять разработку шаблона для разных CMS Warp 6 используют в основном одинаковую HTML разметку. Не важно, что вы читаете категорию Joomla или категорию в WorpPress, вы видите одинаковую разметку. Это позволяет создавать универсальные правила CSS, которые применяются для обеих платформ.

Заключение

В данном обзоре мы рассмотрели основные моменты Warp6 такие как Каскад, CSS, JS и Разметку. Как вы можете видеть, Warp 6 представляет собой блочную, гибкую и расширяемую основу для создания шаблонов, которая обеспечивает богатый набор инструментов для разработки под Joomla 1.5/2.5 и Wordpress 3.x. Все зависит от разработчика, какие функции он использует, выбирая только те инструменты, которые ему необходимы в данный момент времени. В нашей следующей статье мы будем говорить о "Стилях" Warp6. Оставайтесь с нами!

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

Содержание

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вкладка Settings

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

Styles

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

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

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

General,
Typography,
Buttons, Navs & Badges.

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

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

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

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

Development

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

Compression

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

None,
Minify,
Minify + Data URIs,
Minify + Data URIs + Gzip.

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

Responsive

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

Bootstrap

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

Чтобы самостоятельно создать Landing Page на Joomla, не обязательно искать готовый одностраничный шаблон. Можно собрать уникальный шаблон, воспользовавшись одним из существующих Фреймворков для Joomla. После создания сайтов, используя шаблоны и дополнительные расширения для Landing Page можно создать свою уникальную посадочную страницу на Joomla.

Кратко о Фреймворке

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

Кроме этого можно легко выбрать нужную сетку расположения модулей в 1-2-3-…12 колонок. Всё это Фреймворк позволяет делать без внедрения в код шаблона, в визуальном режиме, чаще методом перетаскивания Drag and Drop.

11 Фреймворков для Landing Page на Joomla

Bootstrap 4

Самый популярный Фреймворк HTML, CSS и JavaScript для разработки интерактивных мобильных проектов в Интернет.

Данный Фреймворк нельзя назвать потребительским. Это базовый набор инструментов разработчиков для создания своих веб-проектов с помощью HTML, CSS и JS. Распространяется Bootstrap 4 свободно, открытый исходный код.

Helix3

Это стабильный Фреймворк для создания любого сайта на Joomla 3+. Helix3 прост в управлении, легко интегрируется в систему, хотя требует привыкания и иногда «глючит» при обновлении Joomla.

Я использую Helix 3 на этом сайте, и последние проблемы были после обновления до Joomla 3.8. Длились проблемы недолго, до обновления Фреймворка. На работу фроненд сайта проблемы не отразились.

Это частности, в общем, Helix3 отличный инструмент для верстки Landing Page на Joomla.

Более подробную информацию можно почитать в статье Шаблон Helix3.

Helix Ultimate

Это расширенная и по мнению авторов, более современная версия Helix 3. По представлению авторов это функциональный и готовый к использованию Фреймворк Joomla для создания уникальных шаблонов Joomla. В том числе Landing Page на Joomla.

Однако, по мнению разработчиков и моей пробе, Helix Ultimate еще «сыроват» и дает реальные сбои.

Gantry 5

Легендарный конструктор шаблонов в последней версии «Gantry 5». Включает Фреймворк Gantry 5 и связанные с ним библиотеки, компонент и плагины.

По заверению авторов новая версия Gantry 5 была построена с нуля, чтобы улучшить текущую версию. Фреймворк имеет функции перетаскивания Drag and Drop, мощные административные панели, включая диспетчер компоновки и редактор меню.

YT Framework

Этот Фреймворк свободного распространения для всех, кто заинтересован в создании собственных шаблонов веб-сайтов и веб-страниц. С ним легко работать без знаний программирования, всё на визуальном редактировании, как и на других Фреймворках.

Несомненно, YT Framework упростит вам разработку и настройку собственного Landing Page на Joomla. Это простой и чистый остов HTML/CSS.

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

ZO2 Framework

Это бесплатный Фреймворк, с открытым исходным кодом оптимизированный для поисковых систем. ZO2 включает в себя массу функций, как для разработчиков, так и для веб-мастеров, и может быть настроен, без знания кодов.

ZO2 Framework поставляется с компоновщиком Drag & Drop, который позволяет создавать любое количество потрясающих и уникальных макетов в 5 раз быстрее, чем традиционный способ. Это цитата от автора.

SPARKY framework

Это framework Joomla, созданный студией «HotThemes» для создания сайтов без навыков программирования через простой в использовании интерфейс «drag'n'drop».

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

Warp 7 (Warp 6)

Загадочные Фреймворки Warp 7 и Warp 6, которые нельзя скачать отдельно от тем. По функциям это очень легкий и очень сокращенный, почти пустой, конструктор для самостоятельной верстки шаблонов Joomla.

Используются новейшие веб-технологии, такие как HTML5, CSS3, LESS и jQuery. Полностью лицензирован GPL.

Plazart framework

Эта платформа Plazart позиционируется авторами, как гибкая, современная и настраиваемая Template Framework для Joomla. Базируется на Bootstrap 3.

Вывод

В статье я показал источники и кратко представил 11 Фреймворков для создания Landing Page. Создание сайтов на Joomla с фреймворка более удобна и облегчена. Самый сложный из них Bootstrap 4, который я не рекомендую для быстрого использования. Остальные Фреймворки работают как конструкторы сайта и с их помощью можно создать уникальный лейдинг пейдж на Joomla. Просто ставите и настраиваете как шаблон.

Читайте также: