了解如何添加您自己的自定义和了解更多关于文件层次结构在Warp架构中.

提供尽可能多的灵活性,Warp用于一个特殊的文件显示形式。如果你包含任何文件像CSS,JS或模板PHP文件,Warp按照先后顺序在特定文件夹中加载这些文件，这允许您可以更灵活的来覆盖任何重要主题相关的文件。

我们将解释覆盖及调取文件的先后顺序。如果你只是想知道,如何覆盖主题文件,跳下到适当的例子。

OVERRIDE CASCADE

下面的例子,就是覆盖/ layouts文件夹的层次结构。

1. 样式文件夹

/styles/STYLE-NAME/layouts 文件夹，是你的主题文件夹层次结构的顶部,您在这里所做修改将覆盖所有其他主题文件。另外，在更新模板版本后，这个文件夹也将被保留下来,这是最安全的地方。

2. Theme folder 模板文件夹

模板 /layouts 文件夹存放所有的模板特定的布局。

3. Systems folder 系统文件夹

在 /warp/systems/joomla/layouts 或 /warp/systems/wordpress/layouts 文件夹中，提供CMS独立系统所需的特殊整合。这一层使Warp适应某些系统为模板发展形成一个一致的API。

4. Warp文件夹

在/warp/layouts 包括Warp核心的架构文件.核心框架是普遍存在的,并且设计的每个部分工作支持在每个系统。

The cascades for the /js, /css and /layouts 文件夹定义在config.php文件中.如果你要加载其他css文件夹可以在这里设置.

LAYOUT OVERRIDES

To customize the general theme layout, you need to override the /layouts/theme.php. To do so, create the /styles/STYLE-NAME/layoutsdirectory, copy the file in there and start adding your own PHP code.

This way you can also override system files. For example, just take the Joomla article layout/warp/systems/joomla/layouts/com_content/article/default.php and copy it to your style folder /styles/STYLE-NAME/layouts/com_content/article/default.php and modify it. Now your modified article layout file will be used instead of the default system layout. The same applies for WordPress files.

ADD YOUR OWN CSS

There are several ways of adding your own custom CSS to a Warp theme. You can use the Customizer to change most aspects of the theme without having to write any CSS. Keep in mind that your style will only be shown in the Customizer, if there is a style.less file inside the style's folder. When you use the Customizer, changes will be saved in the style.less file. Together with the theme LESS files it will be compiled into the/css/theme.css file and override any customizations you may have done.

Add custom CSS

You can use the Customizer and also add your own CSS by creating a custom.css file inside the /css folder for the related style. That way your CSS won't be overwritten when you save changes in the Customizer.

Add CSS without using LESS and the Customizer

If you are not planning to use the Customizer at all, just duplicate an existing style and delete the style.less file. Now the /css/theme.css will no longer be overwritten when compiling LESS. You can write customizations directly in the the theme.css file.

ADD CUSTOM JAVASCRIPT

The configuration file /layouts/theme.config.php initializes all PHP classes and loads the necessary JavaScript. If you need to load custom JavaScript files, this is the place to do it. Enabled compression and Data URI will be applied automatically to all files you add here.

1. Create a new file /styles/STYLE-NAME/layouts/theme.config.php.
2. Load the original file through PHP by using the require function.
3. Then add your JavaScript file to the asset collection, so it will be added automatically to the template header.
4. Put your own custom JavaScript file in the /styles/STYLE-NAME/js/MY-JS.js directory.

<?php

require(__DIR__.'/../../../layouts/theme.config.php');

// add script
$this['asset']->addFile('js','js:MY-JS.js');

CUSTOM TEMPLATE FILES FOR WORDPRESS

You can use different layouts for template files, for example pages, by creating files in your theme folder with the name prefix page- followed by the ID or page-slug.

• page-{id}.php
• page-{slug}.php

Let's say you want custom content for a page with the ID 80. Create a file in your theme folder and name it page-80.php with the following content.

<?php get_header();?>

Put your content here...

<?php get_footer();?>

在中国Joomlass专注Joomla建站与策划设计，为您的品牌发展创造动力！