如何自制WordPress子主题 | 黑科技娃娃的博客

文章目录[隐藏]

什么是Wordpress子主题？
如何创建一个子主题

如何自制WordPress子主题

大家都知道主题一升级，个别文件一更新，就会覆盖掉之前的一些自定义代码，比如你的GA跟踪码、JS、CSS修改码等都会被覆盖掉。

你不得不每次要去重新添加，这样就很考验记忆力了，一两个代码还好，如果十几个代码甚至几十个，那就很麻烦了。

相信大部分人跟博主一样半路出家的建站人是不会自己制作主题的，所以只能看主题作者有没有贴心的出配套子主题了，一般付费的主题都是会出的，但是免费的主题就不一定了。

所以自己能懂点CSS知识，可以修改一些简单的样式制作一个子主题就很有必要了，所谓技多不压身，下面就开始介绍如何制作一个简单的子主题。

（下面这个会有些难度，成功率有些低，如果能用付费主题还是用付费主题，毕竟作者会做好配套的子主题。不过子主题也不是必须的，只对那些经常升级付费主题的人作用比较大。你也可以用一些代码插件来管理代码，让他们不会因为主题的升级而被覆盖。）

什么是Wordpress子主题？

子主题（Child Themes）也是一个主题，也跟其他主题一样，放在 wp-content/themes 目录下面的文件夹中，文件夹的名称可以自定义。

子主题可以继承主题的功能和样式，当父主题升级之后，子主题样式、功能不会被覆盖失效。所以从这个角度来说，如果你想修改一个主题，你应该用子主题这个功能，而不是直接修改原主题文件。

子主题的作用：

使父主题的修改可移植且可复制
使用子主题可以自由升级父主题，而不会影响对网站的自定义。
节省新主题开发时间，是开始学习主题开发的好方法。

如何创建一个子主题

1、创建一个子主题文件夹

首先在服务器的主题目录wp-content/themes下创建一个新的子主题文件夹。最好的做法是为子主题指定与父主题相同的名称，用-child命名子主题。

例如，如果您要创建的子主题twenty，则目录将命名为twenty-child。

2、制作子主题文件

在子主题中，一般有下面几个文件：下面文件都是以Astra主题为例

style.css (必在)
functions.php (必在)
screenshot主题图片（必在）
其他主题文件 (非必须)

style.css 主题样式表文件

这是构建子主题中唯一必须有的文件，因为 WordPress 根据主题中的 style.css 头部信息来获取主题信息。

特别是子主题，除了像一般主题一样添加头部信息之外，还需要添加父主题的名称，这样 WordPress 才能获取父主题的资源文件。

style.css文件的头部信息通常如下：此内容是一段 CSS 注释，能被WordPress 识别，必须放在文件的最顶端。

/*Theme Name: AstraChild

Description: Child theme for the astra theme

Author: CooltechDoll 中文也可以

Author URL: https://www. cooltechdoll . com 随便写

Template: astra

Version: 1.0

Text Domain: AstraChild*/

/* Write here your own personal stylesheet */

这里写自己的自定义CSS代码,这样父主题被覆盖也不怕了

这段注释里包含了主题名、主题地址、描述、作者、作者名、模板（父主题）、主题版本号。在这些参数里面只有 Theme Name 和 Template 是必写的， Template用来指定父主题，只在子主题中用。在一般的主题中，是不会有 Template 这个参数的。

新建此样式表文件并把上面的这段代码写进 style.css 文件中，你也可以再写入一些自定义的CSS代码，这样以后父主题升级的时候CSS代码就不会被覆盖了。也可以通过修改子主题的样式文件来修改父主题样式表，子主题会覆盖父主题的样式。

functions.php 文件

能实现主题各种功能的PHP文件，当主题升级之后，我们增加的功能代码就被覆盖掉了，我们还需要再复制进去，这个时候就需要子主题来避免了。

我们需要利用子主题的 functions.php 文件的引用机制，来替换父主题的相关函数等。子主题可以在父主题的 functions.php文件之前优先加载。

我们可以新建一个子主题 functions.php文件，然后把自定义功能代码放在如下所示，这样即使是父主题升级了也没有关系。

<?php
/*This file is part of AstraChild, astra child theme.

All functions of this file will be loaded before of parent theme functions.
Learn more at https://codex.wordpress.org/Child_Themes.

Note: this function loads the parent stylesheet before, then child theme stylesheet
(leave it in place unless you know what you are doing.)
*/

if ( ! function_exists( ‘suffice_child_enqueue_child_styles’ ) ) {
function AstraChild_enqueue_child_styles() {
// loading parent style
wp_register_style(
‘parente2-style’,
get_template_directory_uri() . ‘/style.css’
);

wp_enqueue_style( ‘parente2-style’ );
// loading child style
wp_register_style(
‘childe2-style’,
get_stylesheet_directory_uri() . ‘/style.css’
);
wp_enqueue_style( ‘childe2-style’);
}
}
add_action( ‘wp_enqueue_scripts’, ‘AstraChild_enqueue_child_styles’ );

/*Write here your own functions */

加入自定义功能代码