定制
了解如何添加您自己的自定义和了解更多关于文件层次结构在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/layouts
directory, 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.
- Create a new file
/styles/STYLE-NAME/layouts/theme.config.php
. - Load the original file through PHP by using the require function.
- Then add your JavaScript file to the asset collection, so it will be added automatically to the template header.
- 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();?>
在中国六艺专注Joomla建站与策划设计,为您的品牌发展创造动力!