WordPress通过子主题保存主题的个性化修改

子主题允许您更改网站外观的部分细节，但仍保留主题的外观和功能。要了解子主题如何工作，首先要了解父主题和子主题之间的关系。

什么是父主题？

父主题是一个完整的主题，其中包含所有必需的WordPress模板文件和主题的资源。所有主题 – 不包括子主题 – 都被视为父主题。

什么是子主题？

如概述中所示，子主题继承了父主题及其所有功能的外观，但可用于修改主题的任何部分。通过这种方式，自定义修改与父主题的文件保持独立。使用子主题可以升级父主题，而不会影响对站点所做的自定义修改。

子主题：

使修改变得便携和可复制;
保持自定义与父主题功能分开;
允许更新父主题，而不会破坏您的修改;
允许您利用父主题的功能和测试;
节省开发时间，因为你没有重新创建轮子;
开始学习开发主题的好方法。

如果要进行大量自定义 – 超出样式和一些主题文件 – 创建父主题可能是比子主题更好的选择。创建父主题可以避免将来弃用代码的问题。这需要根据具体情况来决定。

怎么创建一个子主题？

1.创建子主题文件夹

首先，在主题目录中创建一个新文件夹，位于wp-content / themes。

该目录需要一个名称。最佳做法是为子主题提供与父主题相同的名称，在末尾附加-child。例如，如果您正在制作”twentyfifteen”的儿童主题，那么该目录将被命名为“twentyfifteen-child”。

2.创建样式表：style.css

接下来，需要创建一个名为style.css的样式表文件，该文件将包含控制主题外观的所有CSS规则和声明。样式表必须在文件的最顶部包含以下必需的标题注释。这告诉WordPress有关主题的基本信息，包括它是具有特定父级的子主题。

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twentyfifteenchild
*/

注意：Template指的是主题目录的名称，而不是显示的名称

The following information is required:

主题名称 – 您的主题必须是唯一的
模板 – 父主题目录的名称。我们示例中的父主题是“Twenty Fifteen”主题，因此模板将是“Twenty Fifteen”。您可能正在使用其他主题，因此请进行相应调整。

添加适用的剩余信息。唯一必需的子主题文件是style.css，但functions.php是正确排列样式所必需的（如下）。

3.排列样式表

最后一步是将父级和子级主题样式表进行排列。

过去，常用的方法是使用@import导入父主题样式表;这不再是推荐的做法，因为它增加了样式表加载所需的时间。此外，父样式表可能被加载两次。

目前将父主题样式表排入队列的推荐方法是添加wp_enqueue_scripts操作，并在子主题的functions.php中使用wp_enqueue_style()。因此，您需要在子主题目录中创建functions.php。您的子主题的functions.php的第一行将是一个开放的PHP标记（<？php），之后您可以将您的父主题和子主题样式表排入队列。以下示例函数仅在您的父主题仅使用一个主style.css来保存所有css时才起作用。如果您的子主题有多个.css文件（例如ie.css，style.css，main.css），那么您必须确保维护所有父主题依赖项。

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
 
}

如果您的子主题style.css包含实际的CSS代码（通常如此），您还需要将其排入队列。将“父样式”设置为依赖项将确保子主题样式表在其后加载。包括子主题版本号确保您还可以为子主题缓存缓存。完整（推荐）示例为：

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
 
    $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
 
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}

其中parent-style与父主题在注册样式表时使用的$handle相同。

激活子主题

您的子主题现在可以激活了。登录到您站点的管理屏幕，然后转到管理屏幕>外观>主题。您应该看到列出了您的子主题并准备好激活。（如果您的WordPress安装启用了多站点，那么您可能需要切换到网络管理屏幕以启用主题（在网络管理员主题屏幕选项卡中）。然后您可以切换回特定站点的WordPress管理屏幕激活你的子主题。）

激活子主题后，您可能需要从外观>菜单和主题选项（包括背景和标题图像）重新保存菜单。

添加模板文件

除了functions.php文件（如上所述）之外，您添加到子主题的任何文件都将覆盖父主题中的同一文件。

在大多数情况下，最好创建要从父主题更改的模板文件的副本，然后对复制的文件进行修改，保持父文件不变。例如，如果要更改父主题的header.php文件的代码，则可以将文件复制到子主题文件夹并在那里进行自定义修改。

有几个插件可以让您检测正在查看的页面上使用的特定模板。

有关WordPress如何确定要使用的模板的详细信息，请参阅 Template Hierarchy 构页面。

使用functions.php

与style.css不同，子主题的functions.php不会覆盖父对象的对应部分。相反，它除了父代的functions.php之外还会被加载。（具体来说，它是在父文件之前加载的。）

通过这种方式，子主题的functions.php提供了一种修改父主题功能的智能的，无故障方法。假设您要为主题添加PHP功能。最快的方法是打开其functions.php文件并将函数放在那里。但这并不聪明：下次更新主题时，您的功能将消失。但是有另一种聪明的方法：你可以创建一个子主题，在其中添加一个functions.php文件，并将你的函数添加到该文件中。该函数也将从那里完成相同的工作，其优点是它不会受到父主题的未来更新的影响。不要将父主题的functions.php的完整内容复制到子主题中的functions.php中。

functions.php的结构很简单：在顶部和下面打开PHP标签，你的PHP位。在其中，您可以根据需要添加任意数量的功能。下面的示例显示了一个基本的functions.php文件，它执行一个简单的操作：将一个favicon链接添加到HTML页面的head元素。

<?php // Opening PHP tag - nothing should be before this, not even whitespace
 
// Custom Function to Include
function my_favicon_link() {
    echo <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "\n";
}
add_action( 'wp_head', 'my_favicon_link' );

首先加载子主题的functions.php意味着您可以通过有条件地声明它们来使主题的用户功能可插入 – 即可由子主题替换。

if ( ! function_exists( 'theme_special_nav' ) ) {
    function theme_special_nav() {
        //  Do something.
    }
}

通过这种方式，子主题可以通过简单地预先声明它来替换父级的PHP函数。

有关要在子主题的functions.php文件中包含的内容的更多信息，请阅读主题功能页面。

引用或包含其他文件

当您需要包含位于子主题目录结构中的文件时，您需要使用get_stylesheet_directory（）。由于style.css位于子主题子目录的根目录中，因此get_stylesheet_directory（）指向子主题的目录（而不是父主题的目录）。要引用父主题目录，请改用get_template_directory（）。

下面是一个示例，说明如何在引用存储在子主题目录中的文件时使用get_stylesheet_directory（）：

<?php require_once( get_stylesheet_directory(). '/my_included_file.php' ); ?>

同时，此示例使用get_stylesheet_directory_uri（）显示存储在子主题目录的/ images文件夹中的图像。

<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/my_picture.png" alt="" />

与返回文件路径的get_stylesheet_directory（）不同，get_stylesheet_directory_uri（）返回一个URL，这对前端很有用。

排队样式和脚本

脚本和样式应该每个都有自己的功能，然后应该包含在一个动作中。有关更多信息，请阅读包含CSS和JavaScript的页面。

WordPress不会自动加载前端的子主题样式表。下面是使用wp_enqueue_scripts（）动作挂钩调用将子主题的样式表排入队列的函数的示例。

<?php
add_action( 'wp_enqueue_scripts', 'my_plugin_add_stylesheet' );
function my_plugin_add_stylesheet() {
    wp_enqueue_style( 'my-style', get_stylesheet_directory_uri() . '/style.css', false, '1.0', 'all' );
}

特别注意事项

Post Formats

子主题继承父主题定义的文章格式。但是在创建子主题时，请注意使用add_theme_support（’post-formats’）将覆盖父主题定义的格式，而不是添加到主题。

RTL Support

要支持RTL语言，请在子主题中添加rtl.css文件，其中包含：

/*
Theme Name: Twenty Fifteen Child
Template: twentyfifteen
*/

即使父主题没有rtl.css文件，也建议将rtl.css文件添加到子主题中。仅当is_rtl（）为true时，WordPress才会自动加载rtl.css（）文件。

Internationalization

可以使用WordPress国际化API准备子主题以便翻译成其他语言。有关子主题国际化的特殊考虑因素。

要使子主题国际化，请按照下列步骤操作：

1.添加语言目录。

For example: twentyfifteen-child/languages/

2.添加语言文件。

你的文件名必须是he_IL.po和he_IL.mo（取决于你的语言），不像 domain-he_IL.xx 的插件文件。

3.加载textdomain

Use load_child_theme_textdomain() in functions.php during the after_setup_theme action.
The text domain defined in load_child_theme_textdomain() should be used to translate all strings in the child theme.

4.使用GetText函数为字符串添加i18n支持。

Example: textdomain

<?php
/**
  * Set up My Child Theme's textdomain.
  *
  * Declare textdomain for this child theme.
  * Translations can be added to the /languages/ directory.
  */
function twentyfifteenchild_theme_setup() {
    load_child_theme_textdomain( 'twentyfifteenchild', get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'twentyfifteenchild_theme_setup' );

此时，子主题中的字符串已准备好进行翻译。为了确保它们正确地进行国际化翻译，每个字符串都需要有 twentyfifteenchild 子文本域。

Example: gettext functions

Here is an example of echoing the phrase “Code is Poetry”:

<?php
esc_html_e( 'Code is Poetry', 'twentyfifteenchild' );
?>

load_child_theme_textdomain（）中定义的文本域应该用于翻译子主题中的所有字符串。如果已包含来自父级的模板文件，则应将textdomain从父主题中定义的文本域更改为子主题定义的文本域。

打赏赞(3)