WordPress主题制作

  1. 主页
  2. 文档
  3. WordPress主题制作
  4. 子主题(Child Theme)制作
  5. 通过插件创建子主题

通过插件创建子主题

推荐插件:Child Theme Creator by Orbisius

Child Theme Creator by Orbisius:

我们给2019主题创建一个子主题:

1、搜索插件“Child Theme Creator by Orbisius”,安装并启用。

2、在后台“设置”和“外观”下都有相关菜单,打开“外观”->Orbisius Child Theme Creator

3、找到相应的主题,如“Twenty Nineteen”主题

点开第二个,可以对相关内容进行编辑

假设不做任何修改,创建子主题。

在 themes下生成一个 twentynineteen-child-theme 目录,该目录下包括如下文件:

看一下都是什么内容:

代码的作用是先加载了父主题的style.css文件,再加载了子主题的style.css文件。(一点点问题,子主题的加载了两遍,另外涉及到一些路径问题,见FAQ)。

对应如下

<link rel='stylesheet' id='orbisius_ct_twentynineteen_child_theme_parent_style-css' href='http://127.0.0.1/wordpress/wp-content/themes/twentynineteen/style.css?ver=1.0' type='text/css' media='all' />
<link rel='stylesheet' id='orbisius_ct_twentynineteen_child_theme_parent_style_child_style-css' href='http://127.0.0.1/wordpress/wp-content/themes/twentynineteen-child-theme/style.css?ver=1.0' type='text/css' media='all' />
<link rel='stylesheet' id='twentynineteen-style-css' href='http://127.0.0.1/wordpress/wp-content/themes/twentynineteen-child-theme/style.css?ver=1.0' type='text/css' media='all' />

这里可以验证执行顺序:先执行子主题的functions.php,然后执行父主题的functions.php。

所以导入


其他文件

header.php和footer.php:

这两个个文件直接从父主题拷贝过来。

主要目的是为了防止一些CSS文件和脚本文件路径不对,导致显示出错。

style.css的处理

父主题的functions.php中

wp_enqueue_style( 'twentynineteen-style', get_stylesheet_uri(), array(), wp_get_theme()-&gt;get( 'Version' ) );

对应:

<link rel="stylesheet" id="twentynineteen-style-css" href="http://127.0.0.1/latest/wp-content/themes/twentynineteen-child-theme/style.css?ver=1.4" type="text/css" media="all">


如果取消子主题:

<link rel="stylesheet" id="twentynineteen-style-css" href="http://127.0.0.1/latest/wp-content/themes/twentynineteen/style.css?ver=1.4" type="text/css" media="all">


因为”get_stylesheet_uri()”可以保证用的当前使用的主题所在的目录,所以如果是用了子主题,即使是父主题的function.php中的代码,对应的还是子主题的目录。

子主题的主题函数模板 functions.php 中不能使用父主题函数,可以移除父主题不需要的功能函数。因为子主题和父主题都存在 functions.php 函数模板,那么会按

先子主题后父主题的顺序

同时引入。
记得是同时引入,所以不要让两个主题的 functions.php 文件出现同一段代码,否则会冲突。

子主题替换父主题函数模板的某些功能用法如下:

if (!function_exists('theme_new_function')) {
function theme_new_function() {
// 函数内容.
}
}
这篇文章对您有用吗?

我们要如何帮助您?