Are you looking to create a child theme in WordPress? Once you learn the WordPress basics, you probably want to learn how to customize your WordPress site. We believe that child themes 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:)
For those who don’t want to watch the video, you can continue reading the article below.
对于那些不想观看视频的人，您可以继续阅读下面的文章。
为什么需要创建儿童主题？ (Why You Need to Create a Child Theme?)
Child themes are considered the best way to customize your WordPress themes. A child theme inherits all the features and appearance of its parent theme. You can customize it without affecting the parent theme. This allows you to easily update parent theme without worrying about losing your changes.
子主题被认为是自定义WordPress主题的最佳方法。 子主题继承了其父主题的所有功能和外观。 您可以自定义它而不影响父主题。 这使您可以轻松更新父主题，而不必担心丢失更改。
You can learn more about child themes in our article What is a WordPress Child Theme? Pros, Cons, and More.
您可以在我们的文章“ 什么是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 pasting code snippets from other sources, then that would work too.
需要对CSS / HTML有基本的了解，以便您可以进行自己的更改。 PHP的一些知识肯定会有所帮助。 如果您擅长从其他来源复制和粘贴代码段 ，那么也可以使用。
We recommend you to practice on your local development environment. You can move a live WordPress site to local server for testing purposes or use dummy content for theme development.
我们建议您在本地开发环境上进行练习。 您可以将实时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 Twenty Thirteen, which is one of the default WordPress themes.
任何好的WordPress主题都可以用作父主题。 但是，有许多不同种类的主题，有些可能不是最容易使用的主题。 在本教程中，我们将使用Twenty Thirteen ，这是默认的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 。
Open a text editor like Notepad and paste this code:
打开文本编辑器(如记事本)并粘贴以下代码：
/*
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 Template: twentythirteen.
该文件中的大多数内容都是不言自明的。 您真正要注意的是Template：二十一十三 。
This tells WordPress that our theme is a child theme and that our parent theme directory name is twentythirteen. The parent folder name is case-sensitive. If we provide WordPress with Template: TwentyThirteen, then it will not work.
这告诉WordPress我们的主题是一个子主题，而我们的父主题目录名称是二十三个。 父文件夹名称区分大小写。 如果我们为WordPress提供模板：TwentyThirteen，则它将无法正常工作。
The last line in this code imports our parent theme’s stylesheet to the child theme.
此代码的最后一行将我们父主题的样式表导入子主题。
This is the minimum requirement for creating a child theme. You can now go to Appearance » Themes where you will see WPB Child Theme. You need to click on activate button to start using the child theme on your site.
这是创建子主题的最低要求。 现在，您可以转到外观»主题 ，您将在其中看到WPB儿童主题。 您需要单击激活按钮才能开始在您的网站上使用子主题。
Since you haven’t changed anything in your child theme yet, your site will use all functionality and appearance of its parent theme.
由于您尚未更改子主题的任何内容，因此您的网站将使用其父主题的所有功能和外观。
自定义您的孩子主题 (Customizing Your Child Theme)
Each WordPress theme has a style.css file in their main directory. Mostly this is your theme’s main stylesheet where all the CSS goes. However, some themes may only have theme’s header information in it. Such themes usually have CSS files located in a separate directory.
每个WordPress主题在其主目录中都有一个style.css文件。 通常，这是主题的主要样式表，所有CSS都在其中。 但是，某些主题可能只包含主题的标题信息。 这样的主题通常具有位于单独目录中CSS文件。
For this section you’ll need a bit of CSS know-how.
对于本节，您将需要一些CSS专门知识。
Google Chrome and Firefox come with built-in inspector tools. These tools allow you to look at the HTML and CSS behind any element of a web page.
Google Chrome和Firefox带有内置的检查器工具。 这些工具使您可以查看网页任何元素后面HTML和CSS。
If you want to see the CSS used for navigation menu, then simply take your mouse over to the navigation menu and right-click to select Inspect Element.
如果要查看用于导航菜单CSS，则只需将鼠标移到导航菜单上，然后右键单击以选择“检查元素”。
This will split your browser screen in two parts. In the bottom part of the screen, you will see the HTML and CSS for the page.
这会将浏览器屏幕分为两个部分。 在屏幕的底部，您将看到页面HTML和CSS。
As you move your mouse on different HTML lines, Chrome inspector will highlight them in the upper window. As you can see that we have navigation menu selected in the screenshot above.
在不同HTML行上移动鼠标时，Chrome浏览器检查器会在上方窗口中突出显示它们。 如您所见，我们在上面的屏幕快照中选择了导航菜单。
It will also show you the CSS rules related to the highlighted element in the window on the right.
它还将在右侧窗口中向您显示与突出显示的元素相关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 。
You will see that the background color of navigation bar will change. If you like this, then you can copy this CSS rule and paste in your Child Theme’s style.css file.
您会看到导航栏的背景颜色将会改变。 如果您喜欢这样，则可以复制此CSS规则并粘贴到您的子主题的style.css文件中。
.navbar {
background-color: #e8e5ce;
}
Save the changes you made to style.css file and then preview your site.
保存对style.css文件所做的更改，然后预览您的站点。
Repeat the process for anything that you would want to change in your theme’s stylesheet. Here is the complete stylesheet that we have created for the child theme. Feel free to experiment and modify it.
对您要在主题样式表中更改的所有内容重复该过程。 这是我们为子主题创建的完整样式表。 随时尝试和修改它。
/*
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)
Each WordPress theme has a different layout. Let’s look at the layout of the Twenty Thirteen theme. You have header, navigation menus, content loop, footer widget area, secondary widget area, and footer.
每个WordPress主题都有不同的布局。 让我们看一下“二十十三”主题的布局。 您具有页眉，导航菜单，内容循环，页脚小部件区域，辅助小部件区域和页脚。
Each of these section is handled by different files in the twentythirteen folder. These files are called templates.
这些部分中的每一个都由第二十三个文件夹中的不同文件处理。 这些文件称为模板。
Most of the time these templates are named after the area they are used for. For example, footer section is usually handled by footer.php file, header and navigation areas are handled by header.php file. Some areas, like the content area are handled by multiple files called content templates.
大多数情况下，这些模板是根据其使用的区域命名的。 例如，页脚部分通常由footer.php文件处理，页眉和导航区域由header.php文件处理。 某些区域(如内容区域)由称为内容模板的多个文件处理。
First you need to do is select the theme file you want to modify and then copy it into your child theme.
首先，您需要选择要修改的主题文件，然后将其复制到子主题中。
For example, you want to remove ‘powered by WordPress’ link from the footer area and add a copyright notice there. Simply copy the footer.php file in your child theme and then open it in a plain text editor like notepad. Find out the lines you want to remove and replace them with your own. Like this:
例如，您想从页脚区域中删除“由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>
In this code, we have replaced Twenty Thirteen credits with a copyright notice.
在此代码中，我们已用版权声明替换了二十三学分。
Troubleshooting is a lot easier when creating child themes. For example if you accidentally deleted something that your parent theme required, then you can simply delete the file from your child theme and start over.
创建子主题时，故障排除要容易得多。 例如，如果您不小心删除了父主题所需的内容，则可以简单地从子主题中删除文件并重新开始。
为儿童主题添加新功能 (Adding New Functionality to Child Theme)
You will find many WordPress tutorials asking you to copy and paste code snippet in your theme’s functions.php file.
您会发现许多WordPress教程，要求您将代码段复制并粘贴到主题的functions.php文件中。
Adding code snippets into a parent theme’s functions.php file means that your changes will be overwritten whenever there is a new update for the parent theme. This is why it is always recommended to use a child theme and add all your custom code snippets into child theme’s functions.php file.
在父主题的functions.php文件中添加代码段意味着，只要父主题有新更新，您的更改就会被覆盖。 这就是为什么始终建议使用子主题并将所有自定义代码段添加到子主题的functions.php文件中的原因。
Lets create a new file in your child theme’s folder and name it functions.php. In this example we are going to add a little code snippet which will change the default header image into our own custom made image.
让我们在子主题文件夹中创建一个新文件，并将其命名为functions.php。 在这个例子中，我们将添加一些代码片段，它将默认的标题图像更改为我们自己定制的图像。
We have already created a header image and a thumbnail by editing Twenty Thirteen’s default header image. Next, we uploaded it to our child theme inside /images/headers/ folder.
我们已经通过编辑二十三十三的默认标题图像创建了标题图像和缩略图。 接下来，我们将其上传到/ images / headers /文件夹中的子主题。
After that we need to tell WordPress to use this image as the default header image for our theme. We can do that by adding this code snippet into our child theme’s functions.php file:
之后，我们需要告诉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 Appearance » Header, you will be able to see the image we added as the default image.
现在，如果您访问Appearance»Header ，您将能够看到我们添加为默认图像的图像。
You can add any custom code snippet you need in your child theme’s functions.php file. Check out these 25+ extremely useful tricks for the WordPress functions file.
您可以在子主题的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 most common WordPress errors 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 fix the syntax error in WordPress.
您将看到的最常见错误可能是语法错误，通常会在您错过代码中的某些内容时发生。 这是一个快速指南，解释了如何在WordPress中查找和修复语法错误 。
最后结果 (Final Result)
下载演示主题 (Download Demo Theme)
You can download the end result of our WordPress child theme tutorial by clicking here. Remember this is a very basic child theme based on Twenty Thirteen.
您可以通过单击此处下载我们的WordPress子主题教程的最终结果。 请记住，这是一个非常基本的基于二十三岁的儿童主题。
其他基于二十三岁的儿童主题 (Other Child Themes Based on Twenty Thirteen)
Here are some other WordPress child themes based on Twenty Thirteen. Take a look at them and see how these theme developers customized Twenty Thirteen.
这是基于二十三个十三的其他一些WordPress子主题。 看看它们，看看这些主题开发人员如何定制“二十三个十三”。
洒红节 (Holi)
樱花盛开 (Cherry Blossom)
2013蓝色 (2013 Blue)
固定投资组合 (Flat Portfolio)
We hope this article helped you learn how to create a WordPress child theme. Remember there is plenty of support available for those who need it.
我们希望本文能帮助您学习如何创建WordPress子主题。 请记住，有很多支持可以提供给需要的人。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Google+.
如果您喜欢这篇文章，请订阅我们的YouTube频道 WordPress视频教程。 您也可以在Twitter和Google+上找到我们。
翻译自: https://www.wpbeginner.com/wp-themes/how-to-create-a-wordpress-child-theme-video/
扫一扫
897
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
