WordPress主题制作

  2. 主页
  4. 文档
  6. WordPress主题制作
  8. 子主题（Child Theme）制作
  10. 手动创建子主题

手动创建子主题

目录 隐藏
1 子主题的目录结构
2 手工创建子主题步骤
3 2、创建style.css文件（必须的）
4 3、创建functions.php
5 如何导入父主题的style.css
6 4、创建其他文件及文件夹

子主题的目录结构

子主题也是一个主题，也跟其他主题一样，放在 wp-content/themes 目录下面的文件夹中。

文件夹的名称可以随便定义，为了形象一点，建议如下：当父主题是“ twentytwelve ”、子主题则“twentytwelve-child ” 因为子主题要基于父主题，所以主题目录肯定要有父主题。

在 子主题中，一般有下面几个文件：

  • style.css (必须有)
  • functions.php ( 不是必须的，推荐包括)
  • 其他模板文件

手工创建子主题步骤

1、创建子主题目录

如twentynineteen-child

基本上没有什么特别要求，建议如上所示

2、创建style.css文件（必须的）

该文件必须的，因为 WordPress 根据主题中的 style.css 头部信息来获取主题信息：

/*
Theme Name: Twenty Twenty Child theme of twentytwenty
Theme URI: 
Description: Child theme of twentytwenty theme for the Twenty Twenty theme
Author: <a href="https://cn.wordpress.org/">WordPress团队</a>
Author URI: 
Template: twentytwenty
Version: 1.2
*/

说明：

  • Theme Name（必填）：子主题名字，一般规则：父主题 Child Theme
  • Theme URI（可选）：子主题的页面
  • Description（可选）：子主题的描述
  • Author（可选）：子主题作者
  • Author URI（可选）：子主题作者的网站
  • Template（必填）：父主题目录名，区分大小写
  • Version（可选）：主题版本

注意：

子主题的style.css 文件并不会把原先的样式覆盖掉。（详情见FAQ章节）

第一行，添加如下：

/* 引入父主题样式 */
@import url("../父主题名/style.css"); 
@import url("../父主题名/css/theme-style.css");

将父主题（Xxxx）的样式表（style.css）调入；然后便可以在这之后自定义样式，添加的样式若与父主题重复，会自动替换父主题的样式。

修改样式

css样式可以直接加到上一步新建的style.css文件里面，加到@import引用父主题样式那一行的后面即可。

3、创建functions.php

子主题的functions.php不会覆盖父主题的 functions.php 文件，而是把子主题的 functions.php 的内容追加到父主题的 functions.php 文件的“前面”，优先加载。

我们有时候想要增加功能到一个主题上面，但是当主题升级之后，我们增加的功能就被覆盖掉了，我们还需要再复制进去。比较聪明的办法就是利用子主题的这个特性，想要增加父主题的功能，我们可以新建一个子主题，然后把功能放在 functions.php 中，这样即使是父主题升级了也没有关系。

这就是我们利用子主题的原因

注意，把父主题的 functions.php 文件内容，全部复制到子主题的 functions.php 中。

如何导入父主题的style.css

方法1（不推荐）：

@import url("../twentynineteen/style.css");

方法2：子主题functions.php中，建议增加如下代码，即：

加载父主题和子主题的style.css文件。顺序是主题的style.css -> 子主题的 style.css 

/**
 * Loads parent and child themes' style.css
 */
function wpmaker_twentytwenty_child_theme_child_theme_enqueue_styles() {
    $parent_style = 'wpmaker_twentytwenty_child_theme_parent_style';
    $parent_base_dir = 'twentytwenty';

    wp_enqueue_style( $parent_style,
        get_template_directory_uri() . '/style.css',
        array(),
        wp_get_theme( $parent_base_dir ) ? wp_get_theme( $parent_base_dir )->get('Version') : ''
    );

    wp_enqueue_style( $parent_style . '_child_style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}

4、创建其他文件及文件夹

1）screenshot.png（子主题封面）

2）建议都添加这文件header.php、footer.php。可以从父主题直接复制过来。防止CSS和JS文件导入不正确。

2）创建template-parts或页面模版等文件

二、插件创建
如使用插件“Child Theme Creator by Orbisius”。

Child Theme Creator by Orbisius：https://wordpress.org/plugins/orbisius-child-theme-creator/

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

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

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

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

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

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

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

看一下都是什么内容：

style.css：

/*
Theme Name: Twenty Nineteen Child theme of twentynineteen
Theme URI:
Description: Child theme of twentynineteen theme for the Twenty Nineteen theme
Author: <a href=”https://cn.wordpress.org/”>WordPress团队</a>
Author URI:
Template: twentynineteen
Version: 1.0
*/

/* Generated by Orbisius Child Theme Creator (http://orbisius.com/products/wordpress-plugins/orbisius-child-theme-creator/) on Sat, 19 Jan 2019 14:24:50 +0000 */
/* The plugin now uses the recommended approach for loading the css files.*/
关键信息是“Template: twentynineteen”，其中“twentynineteen”是父主题的“目录名”。

functions.php：

/**
* Loads parent and child themes’ style.css
*/
function orbisius_ct_twentynineteen_child_theme_child_theme_enqueue_styles() {
$parent_style = ‘orbisius_ct_twentynineteen_child_theme_parent_style’;
$parent_base_dir = ‘twentynineteen’;

wp_enqueue_style( $parent_style,
get_template_directory_uri() . ‘/style.css’,
array(),
wp_get_theme( $parent_base_dir ) ? wp_get_theme( $parent_base_dir )->get(‘Version’) : ”
);

wp_enqueue_style( $parent_style . ‘_child_style’,
get_stylesheet_directory_uri() . ‘/style.css’,
array( $parent_style ),
wp_get_theme()->get(‘Version’)
);
}

add_action( ‘wp_enqueue_scripts’, ‘orbisius_ct_twentynineteen_child_theme_child_theme_enqueue_styles’ );
代码的作用是先加载了父主题的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。

wp_enqueue_style( ‘twentynineteen-style’, get_stylesheet_uri(), array(), wp_get_theme()->get( ‘Version’ ) );
header.php和footer.php：

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

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

这篇文章对您有用吗？ 是 否

我们要如何帮助您？