WordPress主题制作:子主题(Child Theme)(未完待续)

时间:2021-12-07 07:10:57

什么是子主题,为什么要什么是子主题

WordPress子主题继承了你所对应的父主题的所有功能。并在父主题的基础上定制新的功能和样式。

在如下情况建议使用子主题:

1、一般情况下,如果想修改主题,最好的建议是保留原主题(父主题),创建子主题,在子主题上进行修改,不会把原主题破环。

2、父主题升级修改,修改的内容不会丢失,可以继续用。

3、另外可以使用框架模式,使用框架时要求创建子主题,可以重复使用样式和代码放在父主题,个性化的设置放在子主题,并可以生成不同的主题。

建议:

1、如果在原主题的基础上添加功能等,以插件的形式实现;

2、如果在原主题的基础上修改显示形式,以子主题的形式实现。

创建子主题的方法

有两种创建子主题的方法:

1、手动创建

2、通过插件创建 

一、手工创建:

1、创建子主题目录,如twentynineteen-child-theme

2、创建style.css文件:该文件必须的,因为 WordPress 根据主题中的 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
*/

 关键信息:

Theme Name: Twenty Nineteen Child theme of twentynineteen:名称

Template: twentynineteen:其中“twentynineteen”是父主题的“目录名”。

 子主题的style.css 文件会把原先的样式覆盖掉。(???见FAQ)

 

4、创建functions.php(不是必须,但一般都会包括)

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

 

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

注意,你不需要把父主题的 functions.php 文件内容,全部复制到子主题的 functions.php 中(直接覆盖或函数重名会出现一些问题,见FAQ)。

 

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

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”主题

WordPress主题制作:子主题(Child Theme)(未完待续)

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

 

WordPress主题制作:子主题(Child Theme)(未完待续)

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

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

WordPress主题制作:子主题(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文件和脚本文件路径不对,导致显示出错。 

常见问题(FAQ)

分清覆盖和增加:

style.css 和functions.php应该都不算是覆盖,而是增加。

 

 

3、导入父主题的style.css

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

如果父主题不仅仅有 style.css 文件,还有其他的 CSS 文件等,那就多写几行 @import 导入进来

????

注意CSS语句的执行优先级。

 

子主题的funxtions.php增加重复函数导致的报错

子主题中,子主题的函数名一般不要和父主题的一样,否则为报错,如下:

Fatal error: Cannot redeclare twentyseventeen_colors_css_wrap() (previously declared in XXX\wordpress\wp-content\themes\twentyseventeen-child\functions.php:29) in XXX\wordpress\wp-content\themes\twentyseventeen\functions.php on line 405

处理方案:

1、建议父主题创建函数时使用如下格式

if ( ! function_exists( 'twentynineteen_setup' ) ) :
function twentynineteen_setup() {
…… }
endif;

这样在子主题的funxtions.php增加重复函数时,就不会报错,同时父主题的函数“失效”。

2、如果父主题 funxtions.php不是按照这种格式编写的,则需要避免子主题的函数名重复。如果必须要覆盖的话,就要按照如上格式修改父主题的代码。

style.css的处理

 

 

如何引用子主题中的其他文件?

如果在子主题目录中还有一些其他的文件要引入,你可以使用 get_stylesheet_directory() 这个函数来获取当前子主题的目录位置。因为父主题的 style.css 文件被你的子主题的 style.css 文件替换了,但是你的子主题 style.css 文件却在子主题目录中,使用 get_stylesheet_directory() 函数可以指向你的子主题目录位置,这样就可以引用子主题目录里面的文件啦。

这个例子使用 require_once 引入一个存放在你子主题目录中的文件。

require_once( get_stylesheet_directory(). '/my_included_file.php' );

比如父主题的functions.php如下代码,

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

对应HTML如下,说明get_stylesheet_uri()指的是子主题路径: 

<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' />

 

 

 

使用文章格式(Post Formats)

子主题会继承父主题的文章格式(如果父主题有的话),如果你在子主题中使用 add_theme_support(‘post-formats’) 函数来定义文章类型,会覆盖掉父主题原有的设置。

如何修改替换父主题的模板文件

如果子主题只能替换一下 CSS 或者 functions.php 的功能,那简直弱爆了。假如觉得父主题的文章页面(single.php)的 HTML 结构已经满足不了我强大的样式定义需求了,那么我可以通过在子主题中增加一个同名的模板文件(single.php)直接覆盖掉父主题对应的模板文件,注意一定要和父主题的模板文件同名才可以覆盖。需要注意一点,在 WordPress 3.0 之后的版本,子主题的 index.php 才能去覆盖父主题的 index.php。

再唠叨一遍,你在子主题中所做的一切,都不会影响到原来的父主题,所以即使是父主题升级了,模板文件变动了,你的子主题的相关代码仍然会起作用。

这个功能通常用在下面几个场景:

添加一个父主题原来没有的模板文件
增加一个比父模板更加具体的模板文件 点击这里查看模板层次
替换父主题的某个模板文件

 

 

引用父主题的 functions.php 文件functions.php 文件是一个主题中的功能文件,可以包含主题的各种功能,通常是一个主题必不可少的文件。在子主题中引用父主题的 functions.php 文件不像是引用 style.css 文件会把原先的样式覆盖掉,而是把子主题的 functions.php 的内容追加到父主题的 functions.php 文件的前面,优先加载。

如何引用其他文件

子主题实质上就是一个独立的主题,不仅仅可以使用 style.css、functions.php 等文件,还可以增加其他的主题必备的文件和资源,例如:图片、样式、Javascript 等。当然,你要通过正确的链接地址引用到它们。