Are you looking to create a child theme in WordPress? Once you learn the WordPress 基础知识, you probably want to learn how to customize your WordPress site. We believe that 儿童主题 are a great starting point for anyone looking to customize WordPress themes. In this article, we will show you how to create a child theme in WordPress.
您是否要在WordPress中创建子主题？ 学习完WordPress 基础知识之后 ，您可能想学习如何自定义WordPress网站。 我们认为，对于希望自定义WordPress主题的任何人来说， 儿童主题都是一个很好的起点。 在本文中，我们将向您展示如何在WordPress中创建子主题。
视频教程： （Video Tutorial:）
不想看视频的可以继续看下面的文章。
不想看视频的可以继续看下面的文章。
为什么需要创建儿童主题？ （Why You Need to Create a Child Theme?）
子主题被认为是自定义 WordPress 主题的最佳方式。子主题继承其父主题的所有功能和外观。您可以自定义它而不影响父主题。这使您可以轻松更新父主题，而不必担心丢失更改。
子主题被认为是自定义 WordPress 主题的最佳方式。子主题继承其父主题的所有功能和外观。您可以自定义它而不影响父主题。这使您可以轻松更新父主题，而不必担心丢失更改。
You can learn more about child themes in our article 什么是 WordPress 儿童主题？优点、缺点等等.
您可以在我们的文章“ 什么是 WordPress 子主题？了解有关儿童主题的更多信息。 优点、缺点等 。
要求 （Requirements）
A basic understanding of CSS/HTML is required, so that you can make your own changes. Some knowledge of PHP would certainly help. If you are good at copying and 粘贴代码片段 from other sources, then that would work too.
需要对CSS / HTML有基本的了解，以便您可以进行自己的更改。 PHP的一些知识肯定会有所帮助。 如果您擅长从其他来源复制和粘贴代码片段 ，那么也可以使用。
We recommend you to practice on your 本地开发环境. You can 将实时 WordPress 站点移动到本地服务器 for testing purposes or use 用于主题开发的虚拟内容.
我们建议您在本地开发环境上进行练习。 您可以将实时 WordPress 网站移至本地服务器以进行测试，也可以将用于主题开发的虚拟内容 。
入门 （Getting Started）
Any good WordPress theme can be used as a parent theme. However, there are many different kind of themes and some may not be the easiest to work with. For the sake of this tutorial, we will be using 20 13, which is one of the default WordPress themes.
任何好的WordPress主题都可以用作父主题。 但是，有许多不同种类的主题，有些可能不是最容易使用的主题。 在本教程中，我们将使用20 13 ，这是默认的WordPress主题之一。
创建您的第一个孩子主题 （Creating Your First Child Theme）
First you need to open /wp-content/themes/ in your WordPress installation folder and create a new folder for your child thme. You can name this folder anything you want. For this tutorial we will be naming it wpbdemo.
首先，您需要在WordPress安装文件夹中打开/wp-content/themes/并为您的孩子thme创建一个新文件夹。 您可以根据需要为该文件夹命名。 在本教程中，我们将其命名为wpbdemo 。
打开记事本等文本编辑器并粘贴以下代码：
打开文本编辑器（例如记事本）并粘贴以下代码：
/*
Theme Name: WPB Child Theme
Theme URI: https://www.wpbeginner.com/
Description: A Twenty Thirteen child theme
Author: WPBeginner
Author URI: https://www.wpbeginner.com
Template: twentythirteen
Version: 1.0.0
*/
@import url("../twentythirteen/style.css");
Now save this file as style.css in the child theme folder you just created.
现在，将此文件另存为您刚创建的子主题文件夹中的style.css 。
Most of that stuff in this file is self explanatory. What you really want to pay attention to is the 模板：二十三.
该文件中的大多数内容都是不言自明的。 您真正要注意的是模板：二十一十三 。
这告诉 WordPress 我们的主题是一个子主题，并且我们的父主题目录名称是二十三。父文件夹名称区分大小写。如果我们为 WordPress 提供模板：TwentyThirteen，那么它将无法工作。
这告诉 WordPress 我们的主题是一个子主题，并且我们的父主题目录名称是 23。父文件夹名称区分大小写。如果我们为 WordPress 提供模板：TwentyThirteen，它将无法正常工作。
此代码中的最后一行将父主题的样式表导入到子主题中。
此代码的最后一行将父主题的样式表导入到子主题中。
This is the minimum requirement for creating a child theme. You can now go to 外观 » 主题 where you will see WPB Child Theme. You need to click on activate button to start using the child theme on your site.
这是创建子主题的最低要求。 现在，您可以转到外观 » 主题 ，您将在其中看到WPB儿童主题。 您需要单击激活按钮才能开始在您的网站上使用子主题。
由于您尚未更改子主题中的任何内容，因此您的网站将使用其父主题的所有功能和外观。
由于您没有更改子主题中的任何内容，因此您的网站将使用其父主题的所有功能和外观。
自定义您的孩子主题 （Customizing Your Child Theme）
每个 WordPress 主题的主目录中都有一个 style.css 文件。大多数情况下，这是所有 CSS 所在的主题的主样式表。但是，某些主题可能只包含主题的标题信息。此类主题通常将 CSS 文件放置在单独的目录中。
每个 WordPress 主题的主目录中都有一个 style.css 文件。通常，这是主题的主样式表，所有 CSS 都驻留在其中。然而，某些主题可能仅包含该主题的标题信息。此类主题通常将 CSS 文件放置在单独的目录中。
For this section you’ll need a bit of CSS know-how.
对于本节，您将需要一些CSS专门知识。
Google Chrome 和 Firefox 附带内置检查器工具。这些工具允许您查看网页任何元素背后的 HTML 和 CSS。
Google Chrome 和 Firefox 附带内置检查器工具。这些工具允许您查看网页任何元素背后的 HTML 和 CSS。
如果您想查看用于导航菜单的 CSS，只需将鼠标移至导航菜单并右键单击以选择“检查元素”即可。
如果您想查看导航菜单使用的 CSS，只需将鼠标移到导航菜单上并右键单击选择“检查元素”即可。
这会将您的浏览器屏幕分成两部分。在屏幕的底部，您将看到页面的 HTML 和 CSS。
这会将浏览器屏幕分成两部分。在屏幕底部，您将看到页面 HTML 和 CSS。
当您将鼠标移到不同的 HTML 行上时，Chrome 检查器会在上方窗口中突出显示它们。正如您所看到的，我们在上面的屏幕截图中选择了导航菜单。
当您将鼠标移到不同的 HTML 行上时，Chrome 浏览器检查器将在上面的窗口中突出显示它们。如您所见，我们在上面的屏幕截图中选择了导航菜单。
它还会向您显示与右侧窗口中突出显示的元素相关的 CSS 规则。
它还会在右侧窗口中向您显示与突出显示的元素相关的 CSS 规则。
You can try editing the CSS right there to see how it would look. Let’s try changing the background-color of .navbar to #e8e5ce.
您可以尝试在此处编辑CSS，以查看外观。 让我们尝试将.navbar的背景色.navbar为#e8e5ce 。
您将看到导航栏的背景颜色发生变化。如果您喜欢这个，那么您可以复制此 CSS 规则并粘贴到子主题的 style.css 文件中。
您将看到导航栏的背景颜色发生变化。如果您愿意，可以复制此 CSS 规则并将其粘贴到子主题的 style.css 文件中。
.navbar {
background-color: #e8e5ce;
}
保存对 style.css 文件所做的更改，然后预览您的网站。
保存对 style.css 文件所做的更改，然后预览您的网站。
对您想要在主题样式表中更改的任何内容重复此过程。这是我们为子主题创建的完整样式表。请随意尝试和修改它。
对主题样式表中要更改的所有内容重复此过程。这是我们为子主题创建的完整样式表。请随意尝试并修改它。
/*
Theme Name: WPB Child Theme
Theme URI: https://www.wpbeginner.com
Description: A Twenty Thirteen child theme
Author: WPBeginner
Author URI: https://www.wpbeginner.com
Template: twentythirteen
Version: 1.0.0
*/
@import url("../twentythirteen/style.css");
.site-title {
padding: 30px 0 30px;
}
.site-header .home-link {
min-height: 0px;
}
.navbar {
background-color: #e8e5ce;
}
.widget {
background-color: #e8e5ce;
}
.site-footer {
background-color: #d8cdc1;
}
.site-footer .sidebar-container {
background-color:#533F2A
}
编辑模板文件 （Editing The Template Files）
每个 WordPress 主题都有不同的布局。我们来看看《二十十三》主题的布局。您有标题、导航菜单、内容循环、页脚小部件区域、辅助小部件区域和页脚。
每个 WordPress 主题都有不同的布局。我们来看看“二十十三”主题的布局。您有标题、导航菜单、内容循环、页脚小部件区域、辅助小部件区域和页脚。
这些部分中的每一个都由二十三个文件夹中的不同文件处理。这些文件称为模板。
这些部分中的每一个都由第二十三个文件夹中的不同文件处理。这些文件称为模板。
大多数时候，这些模板都是根据它们的用途来命名的。例如，页脚部分通常由 footer.php 文件处理，页眉和导航区域由 header.php 文件处理。某些区域（例如内容区域）由称为内容模板的多个文件处理。
大多数情况下，这些模板根据使用它们的区域来命名。例如，页脚部分通常由 footer.php 文件处理，页眉和导航区域由 header.php 文件处理。某些区域（例如内容区域）由称为内容模板的多个文件处理。
首先，您需要做的是选择要修改的主题文件，然后将其复制到您的子主题中。
首先，您需要选择要修改的主题文件，然后将其复制到子主题中。
例如，您想要从页脚区域删除“由 WordPress 提供支持”链接并在其中添加版权声明。只需复制子主题中的 footer.php 文件，然后在记事本等纯文本编辑器中打开它。找出您要删除的行并将其替换为您自己的行。像这样：
例如，您想要从页脚区域删除“Powered by WordPress”链接并在其中添加版权声明。只需复制子主题中的 footer.php 文件并在纯文本编辑器（例如记事本）中打开它即可。找到您要删除的行并将其替换为您自己的行。像这样：
<?php
/**
* The template for displaying the footer
*
* Contains footer content and the closing of the #main and #page div elements.
*
* @package WordPress
* @subpackage Twenty_Thirteen
* @since Twenty Thirteen 1.0
*/
?>
</div><!-- #main -->
<footer id="colophon" class="site-footer" role="contentinfo">
<?php get_sidebar( 'main' ); ?>
<div class="site-info">
<p>© Copyright <?php echo date("Y"); ?> <?php bloginfo('name'); ?> All rights reserved.</p>
</div><!-- .site-info -->
</footer><!-- #colophon -->
</div><!-- #page -->
<?php wp_footer(); ?>
</body>
</html>
在此代码中，我们用版权声明替换了二十三个学分。
在此代码中，我们用版权声明替换了二十三个积分。
创建子主题时，故障排除要容易得多。例如，如果您不小心删除了父主题所需的某些内容，那么您只需从子主题中删除该文件并重新开始即可。
创建子主题时，故障排除更加容易。例如，如果您不小心从父主题中删除了所需的内容，您只需从子主题中删除文件并重新开始即可。
为儿童主题添加新功能 （Adding New Functionality to Child Theme）
You will find many WordPress 教程 asking you to copy and paste code snippet in your theme’s 函数.php file.
您会发现许多WordPress 教程，要求您将代码段复制并粘贴到主题的函数.php文件中。
将代码片段添加到父主题的functions.php 文件中意味着只要父主题有新的更新，您的更改就会被覆盖。这就是为什么始终建议使用子主题并将所有自定义代码片段添加到子主题的functions.php 文件中。
在父主题的functions.php 文件中添加代码片段意味着只要父主题有新的更新，您的更改就会被覆盖。这就是为什么始终建议使用子主题并将所有自定义片段添加到子主题的functions.php 文件中。
让我们在子主题的文件夹中创建一个新文件并将其命名为functions.php。在此示例中，我们将添加一些代码片段，它将默认标题图像更改为我们自己的自定义图像。
让我们在子主题文件夹中创建一个新文件并将其命名为functions.php。在此示例中，我们将添加一些代码片段，将默认标题图像更改为我们自己的自定义图像。
我们已经通过编辑“二十十三”的默认标题图像创建了标题图像和缩略图。接下来，我们将其上传到 /images/headers/ 文件夹中的子主题。
我们通过编辑《二十三十三》的默认标题图像创建了标题图像和缩略图。接下来，我们将其上传到 /images/headers/ 文件夹中的子主题。
之后，我们需要告诉 WordPress 使用此图像作为我们主题的默认标题图像。我们可以通过将此代码片段添加到子主题的functions.php 文件中来做到这一点：
之后，我们需要告诉 WordPress 使用此图像作为主题的默认标题图像。我们可以通过将以下代码片段添加到子主题的functions.php文件中来做到这一点：
<?php
function wpbdemo_custom_header_setup() {
add_theme_support( 'custom-header', array( 'default-image' => '%s/images/headers/circle-wpb.png' ) );
register_default_headers( array(
'caramel' => array(
'url' => '%2$s/images/headers/circle-wpb.png',
'thumbnail_url' => '%2$s/images/headers/circle-wpb-thumbnail.png',
'description' => __( 'Caramel', 'Caramel header', 'twentythirteen' )
),
) );
}
add_action( 'after_setup_theme', 'wpbdemo_custom_header_setup' );
?>
Now if you visit 外观 » 标题, you will be able to see the image we added as the default image.
现在，如果您访问外观»标题 ，您将能够看到我们添加为默认图像的图像。
You can add any custom code snippet you need in your child theme’s functions.php file. Check out these 25+ extremely WordPress 函数文件的有用技巧.
您可以在子主题的functions.php文件中添加所需的任何自定义代码段。 查看WordPress 功能文件这25多个极其有用的提示 。
故障排除 （Troubleshooting）
As beginners, you are expected to make mistakes when working on your first child theme. Just don’t give up too quickly. Check out our list of 最常见的 WordPress 错误 to find a fix.
作为初学者，在处理第一个孩子主题时，您会犯错。 只是不要太快放弃。 查看我们最常见的 WordPress 错误列表，以查找修复程序。
The most common error that you would see is probably the syntax error which usually occurs when you have missed something in the code. Here is a quick guide explaining how to find and 修复 WordPress 中的语法错误.
您将看到的最常见错误可能是语法错误，通常会在您错过代码中的某些内容时发生。 这是一个快速指南，解释了如何在 WordPress 中查找和修复语法错误 。
最后结果 （Final Result）
下载演示主题 （Download Demo Theme）
You can download the end result of our WordPress child theme tutorial by 点击这里. Remember this is a very basic child theme based on Twenty Thirteen.
您可以通过点击这里下载我们的WordPress子主题教程的最终结果。 请记住，这是一个非常基本的基于二十三岁的儿童主题。
其他基于二十三岁的儿童主题 （Other Child Themes Based on Twenty Thirteen）
以下是一些基于《二十十三》的其他 WordPress 子主题。看看他们，看看这些主题开发者是如何定制《二十十三》的。
这是基于《二十十三》中的一些其他 WordPress 子主题。检查一下，看看这些主题开发者是如何定制《二十十三》的。
洒红节 （洒红节）
樱花盛开 （樱花）
2013蓝色 （2013蓝色）
固定投资组合 （扁平化投资组合）
We hope this article helped you learn how to create a WordPress child theme. Remember there is plenty of 支持 available for those who need it.
我们希望本文能帮助您学习如何创建WordPress子主题。 请记住，有很多支持可以提供给需要的人。
If you liked this article, then please subscribe to our YouTube 频道 for WordPress video tutorials. You can also find us on 推特 and 谷歌+.
如果您喜欢这篇文章，请订阅我们的YouTube 频道 WordPress视频教程。 您也可以在推特和谷歌+上找到我们。
翻译自: https://www.wpbeginner.com/wp-themes/how-to-create-a-wordpress-child-theme-video/