我们在使用 Rizhuti 或者 RiPro主题的时候是不是有时候看到有人提供子主题?所谓的子主题就是有人二次开发的借助主主题然后开发的美化或者功能话的基于主题的子主题。这里,如果我们有需要开发创建Rizhuti子主题也是官方支持的。
1、如何创建子主题
子主题也可以看做一个单独的主题,它只需要在主题目录里放一个style.css
并在文件里写上一些信息就能生效。
下边是一个清晰的目录结构:
|--wp-content
|--themes (wordpress主题目录)
| |--rizhuti-v2 (日主题V2-父主题目录)
| |--rizhuti-v2-child (日主题V2-子主题目录)
| | |--style.css (必须)
| | |--functions.php (子主题函数)
| | |--(可选部分的模板文件,会覆盖同名的父主题模板文件)
2、子主题style.css介绍
style.css
文件的内容决定了子主题的重要基本信息,下面给大家举一个例子:
/*!
Theme Name: rizhuti-v2子主题
Theme URI: https://ritheme.com/
Author: ritheme
Author URI: https://ritheme.com/
Description: rizhuti-v2子主题描述
Template:rizhuti-v2
Version: 1.1.0
代码解释:
- Theme Name(必须):子主题名字
- Theme URI(可选):子主题的页面
- Description(可选):子主题的描述
- Author(可选):子主题作者
- Author URI(可选):子主题作者的网站
- Template(必须):父主题目录名,区分大小写 (rizhuti-v2)
- Version(可选):子主题版本
这一段 CSS 注释,会被 WordPress 识别,必须放在style.css
的最顶端。很明显,这段注释里面包含了 主题名称、主题地址、描述、作者、作者名称、模板(父主题)、主题版本号。在这些参数里面,只有Theme Name
和 Template
是必须有的,其中 Template
参数的作用,就是指定父主题,是在子主题中用的,要填写父主题目录名。在一般的主题中,是不会有 Template
这个参数的。
3、新建一个目录为 rizhuti-v2-child 的子主题
新建目录(为方便理解,通过子主题的目录名为“父主题-子主题”,如本例就是rizhuti-v2-child
)并且把上面注释写进 style.css
文件中,目录中新建一个functions.php
空文件,陆 WordPress 后台,找到 主题 选项,就可以看到并且选择这个主题了。
4、常用的几个商城控制钩子apply_filters
add_filter('ri_vip_options', 'callback_function’);
初始化会员名称add_filter('ri_pay_type_options', 'callback_function‘);
初始化支付方式add_filter('is_site_shop', 'callback_function‘);
商城功能入口控制开关
假设要修改网站会员组名称,前面简单粗暴是直接通过修改代码,这里在子题的function.php中利用wordpress的add_filter方法快速修改,不用担心升级覆盖,方便快捷。
在子主题目录中/functions.php文件中添加如下代码即可完成修改:
function new_vip_options($old_opt)
{
return array(
'0' => '普通用户',
'31' => '月费VIP',
'365' => '年费VIP',
'3600' => '永久VIP',
);
}
add_filter('ri_vip_options', 'new_vip_options');
其他 apply_filters
钩子可以自行全局搜索 apply_filters开头代码查看。这里不做举例。
5、利用子主题定制父主题
- 子主题最终的用途是来定制父主题,比如要定制首页的内容,只需要把相应的模板文件放在子主题目录,WordPress 检测到就会自动优先调用。
- 这里需要着重介绍一下
functions.php
的用法,子主题比较特殊的一个文件是functions.php
,它不会被覆盖,而是按子父主题顺序同时引入。 - 利用
functions.php
这个文件就可以最大化的定制主题,不过需要父主题的配合和以及一定的 WordPress 插件 API 知识。
下边的例子在 head 标签里添加响应式网页的元信息:
function ri_add_responsive_meta()
{
echo '<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">';
}
add_action( 'wp_head', 'ri_add_responsive_meta' );
将上述代码添加至子主题的functions.php
文件中,保存刷新即可。