Warp 7: кастомизация

Для предоставления максимальной гибкости Warp использует специальный каскад файлов. Если вы подключите любой файл типа CSS, JS или PHP-файл макета, Warp попытается последовательно найти этот файл в определенных папках и загрузить первый найденный файл.

Каскад переопределения

Вот как выглядит переопределение для папки /layouts.

1. Папка styles

Папка /styles/STYLE-NAME/layouts вашего шаблона находится вверху иерархии, и все модификации и дополнения, сделанные здесь, переопределят файлы шаблона. Также эта папка не затрагивается при обновлениях, поэтому является самым лучшим местом для внесения модификаций.

2. Папка шаблона

Папка /layouts шаблона является местом, в котором хранятся все специфические файлы макетов шаблона.

3. Системная папка

Папка /warp/systems/joomla/layouts или /warp/systems/wordpress/layouts предоставляет собой индивидуальную системную реализацию, необходимую для интеграции с определенной CMS. Этот уровень позволяет Warp адаптироваться к определенной системе для формирования совместимого API, который необходим для разработки шаблона.

4. Папка warp

Папка /warp/layouts содержит базовые переопределения фреймворка. Каждая часть фреймворка универсальна и спроектирована для работы на любой поддерживаемой системе.

Каскады для папок /js, /css и /layouts определяются в файле config.php. Если вы хотите зарегистрировать другую папку для каскада, вы можете сделать это в этом файле.

Переопределения макетов

Для кастомизации общего макета шаблона, вам необходимо переопределить /layouts/theme.php. Для этого создайте директорию /styles/STYLE-NAME/layouts, скопируйте туда файл и начинайте добавлять свой PHP код.

Таким же образом Вы может переопределить системные файлы. Например, просто возьмите макет материала Joomla /warp/systems/joomla/layouts/com_content/article/default.php, скопируйте его в папку вашего стиля /styles/STYLE-NAME/layouts/com_content/article/default.php, и модифицируйте. Теперь будет использоваться ваш модифицированный макет вместо системного макета. Тоже самое относится и к файлам WordPress.

Добавление своего CSS

Существует несколько способов по добавлению своего CSS в шаблон Warp. Вы можете использовать Конфигуратор (Customizer) для изменения внешнего вида без написания CSS. Не забудьте, что ваш стиль будет отображен в Конфигураторе, если в папке вашего стиля есть файл style.less. Когда вы используете Конфигуратор, изменения сохраняются в файле style.less. Вместе с LESS-файлами шаблона он будет скомпилирован в файл /css/theme.css и переопределит любые изменения, которые вы сделали.

Добавление кастомного CSS

Вы можете использовать Конфигуратор и при этом добавить свой собственный CSS, создав файл custom.css в папке /css. Таким образом, ваш CSS не будет переписан, когда вы сохраняете изменения в Конфигураторе.

Добавление CSS без использования LESS и Конфигуратора

Если вы не планируете использовать Конфигуратор, просто продублируйте существующий стиль и удалите файл style.less. Теперь /css/theme.css больше не будет переписываться при компиляции LESS, и вы можете вносить ваши изменения непосредственно в этот файл.

Добавление своего JavaScript

Конфигурационный файл /layouts/theme.config.php инициализирует все PHP классы и загружает необходимый JavaScript. Если вам необходимо загрузить кастомные JavaScript файлы, то именно здесь это нужно делать. К этим файлом будет применена компрессия и DataURI.

1. Создайте новый файл /styles/STYLE-NAME/layouts/theme.config.php.
2. Подключите оригинальный файл с помощью PHP функции require.
3. Далее добавьте ваш JavaScript файл в коллекцию ассетов и он будет автоматически добавлен в head шаблона.
4. Ваши кастомные JavaScript файлы должны распологаться в папке /styles/STYLE-NAME/js.

<?php
 
require(__DIR__ . '/../../../layouts/theme.config.php');
 
// add script
$this['asset']->addFile('js', 'js:MY-JS.js');