如何创建WordPress主题的子主题?

很多使用WordPress建站的朋友可能都对正在使用的主题不是很满意,想对某些外观进行一些自定义的设置。但是一旦主题更新升级后,我们先前所做的所有的自定义都会消失。

如何创建WordPress主题的子主题?
创建WordPress主题子主题

遇到这样的情况我们需要怎么处理呢?其实只要创建一个子主题,那么上面遇到的难题就迎刃而解了。

什么是WordPress子主题?

WordPress子主题就是继承某一父主题的全部外观及功能,并可以在父主题的基础上进行个性化的开发设置的主题。

创建子主题非常简单,只需要在/theme文件夹下创建一个xxx-child的子主题文件件,同时创建一个style.css文件,那么这个子主题就算是创建成功了。这里以创建Twenty Twelve主题的子主题为例,我们只需要创建一个style.css文件,并将下面的内容复制到文件内就可以了。

/* 
Theme Name: Twenty Twenty Child 
Theme URL: http://yourdomain.com
Description: My first child theme, I'm so proud.
Theme Author: John Doe
Author URL: http://yourdomain.com
Template: twentytwenty 
Version: 1.0.0 
Text Domain: twentytwenty-child 
*/

开发一款WordPress主题,对大多数人来说都不是一件容易的事,但是在现有的主题基础上进行更改那么只要有一点儿html和css的基础就可以了。如果我们要对现在使用的主题进行个性化的设计,只需要将更改的css代码保存到子主题的style.css文件中,那么我们就完成了个性化的设计工作。如果以后需要对我们的父主题进行升级更新,我们也不用担心我们的个性化更改会失效,因为我们已经将所有的变更都保存在了子主题中。

目录结构

子主题需要放在wp-content/themes目录下子主题的文件夹内。子主题内至少需要创建一个style.css文件:

  1. style.css (必需)
  2. functions.php (可选)
  3. Template files (可选)
  4. Other files (可选)

必需的style.css文件

style.css是WordPress主题唯一必须的文件,其他的文件可以有也可以没有,可根据自身的需求来创建。在创建了style.css文件后,我们需要在文件最前面的位置包含主题的相关信息。

下面是一个子主题的style.css文件的主题信息示例:

/* 
Theme Name: Twenty Twenty Child 
Theme URL: http://yourdomain.com
Description: My first child theme, I'm so proud.
Theme Author: John Doe
Author URL: http://yourdomain.com
Template: twentytwenty 
Version: 1.0.0 
Text Domain: twentytwenty-child 
*/

/* import default parent styles */
@import url("../twentytwenty/style.css");

名词解释:

  • Theme Name. (必需) 子主题名称。
  • Theme URI. (可选) 子主题的网址。
  • Description. (可选) 子主题的介绍。
  • Author URI. (可选) 作者主页。
  • Author. (optional) 作者名字。
  • Template. (必需) 父主题。
  • Version. (可选) 子主题的版本编号。

接下来我们需要用@import导入父主题的样式表,到这里我们就完成了基本的子主题的创建工作。我们就可以根据自己的需求,对css样式进行更改了。这里需要注意的一点是,@import 规则导入父主题样式表之前,不能添加其他的CSS样式规则,否则样式表的样式规则无效。

子主题的functions.php

与子主题的style.css文件不同,子主题的functions.php不会覆盖父主题中对应功能,而是将新的功能加入到父主题的functions.php中。

创建子主题functions.php文件也非常的简单,只需要将PHP起始标签置于顶部,将自定义函数置于php起始标签内即可。下面我们举一个创建functions.php文件的例子,我们希望去除文章分类url中的category,那么我们需要如下创建代码:

<?php
function fix_slash( $string, $type )
{
    global $wp_rewrite;
    if ( $wp_rewrite->use_trailing_slashes == false )
    {
        if ( $type != 'single' && $type != 'category' )
            return trailingslashit( $string );

        if ( $type == 'single' && ( strpos( $string, '.html/' ) !== false ) )
            return trailingslashit( $string );

        if ( $type == 'category' && ( strpos( $string, 'category' ) !== false ) )
        {
            $aa_g = str_replace( "/category/", "/", $string );
            return trailingslashit( $aa_g );
        }
        if ( $type == 'category' )
            return trailingslashit( $string );
    }
    return $string;
}

add_filter( 'user_trailingslashit', 'fix_slash', 55, 2 );

模板文件

除了functions.php文件之外,我们创建的任何子主题模板文件,都会覆盖父主题相对应的文件。如果直接对父主题的模板文件进行自定义的更改,会存在风险,在主题文件升级后会被重置。我们在创建子主题后,只需要将父主题的模板文件复制到子主题中,并对子主题中的文件进行更改即可。例如,我们想更改父主题的header.php文件的代码,则可以将该文件复制到子主题文件夹并在其中进行自定义的修改。

我们还可以在子主题中创建父主题中并不存在的文件。 例如,我们可能想创建一个比您的父主题中找到的模板更具体的模板,例如特定页面或类别归档的模板(例如,page-3.php将被ID为3的页面加载)。

原创文章,作者:牛奇网,如若转载,请注明出处:https://www.niuqi360.com/wordpress/how-to-create-wordpress-child-theme/

发表评论

登录后才能评论