只有少数WordPress用户使用子主题,这是因为许多用户不知道什么是子主题或在WordPress中(WordPress)创建子主题(Creating Child Theme)。好吧(Well),大多数使用WordPress的人倾向于编辑或自定义他们的主题,但是当您更新主题时,所有这些自定义都会丢失,这就是使用子主题的地方。当您使用子主题时,您的所有自定义都将被保存,您可以轻松更新父主题。
在 WordPress 中创建子主题
从未修改的父主题创建子主题(Creating a Child Theme from an Unmodified Parent Theme)
为了在WordPress中创建子主题,您需要登录到您的 cPanel 并导航到 public_html,然后导航到 wp-content/themes,您必须在其中为您的子主题创建一个新文件夹(例如 /Twentysixteen-child/)。确保子主题目录的名称中没有任何可能导致错误的空格。
推荐:(Recommended:)您也可以使用One-Click Child Theme 插件(One-Click Child Theme plugin)创建子主题(仅来自未修改的父主题)。
现在您需要为您的子主题创建一个 style.css 文件(在您刚刚创建的子主题目录中)。创建文件后,只需复制并粘贴以下代码(根据您的主题规范更改以下详细信息):(Change)
/*
Theme Name: Twenty Sixteen Child
Theme URI: http://example.com/twenty-sixteen-child/
Description: Twenty Sixteen Child Theme
Author: WordPress Team
Author URI: http://example.com
Template: twentysixteen
Version: 1.3.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/
注意: (Note: )模板行(模板:二十六(Template))将(Template)根据您当前的主题目录名称(我们正在创建的子主题的父主题)进行更改。我们示例中的父主题是Twenty Sixteen主题,因此Template将是二十六。
之前@import 用于将样式表从父主题加载到子主题,但现在它不是一个好方法,因为它增加了加载样式表的时间。代替使用@import,最好在您的子主题functions.php 文件中使用PHP函数来加载样式表。(PHP)
为了使用 functions.php 文件,您需要在您的子主题目录中创建一个。在您的 functions.php 文件中使用以下代码:
<?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' );
}
?>
上述代码仅在您的父主题仅使用一个 .css 文件来保存所有CSS代码时才有效。
如果您的子主题 style.css 包含实际的CSS代码(就像通常那样),您还需要将其加入队列:
<?php
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')
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>
是时候激活您的子主题了,登录到您的管理面板,然后转到Appearance > Themes并从可用的主题列表中激活您的子主题。
注意:(Note:)激活子主题后,您可能需要重新保存菜单(Appearance > Menus)和主题选项(包括背景和标题图像)。
现在,每当您想更改 style.css 或 functions.php 时,您都可以轻松地在子主题中执行此操作,而不会影响父主题文件夹。
从您的父主题在WordPress中创建子主题(Child Theme),但是你们中的大多数人已经自定义了您的主题,那么上述方法对您根本没有帮助。在这种情况下,请查看如何在不丢失自定义的情况下更新WordPress主题。(WordPress)
如果希望本文对您有所帮助,但如果您对本指南仍有任何疑问,请随时在评论中提问。
Creating Child Theme in WordPress
Only a handful of WordPress users uses a child theme and that’s because many of the users don’t know whаt is a child theme or Creating Child Theme in WordPress. Well, most оf the peoрle using WordPress tend to edit or customize theіr theme but all that cuѕtomization is lost when уou update your theme and that’s where the use of child theme comes. When you use a chіld theme then all your customization will be savеd and you can easily update the parent theme.
Creating Child Theme in WordPress
Creating a Child Theme from an Unmodified Parent Theme
In order to create a child theme in WordPress you need to login to your cPanel and navigate to the public_html then wp-content/themes where you have to create a new folder for your child theme (example /Twentysixteen-child/). Make sure you don’t have any spaces in the name of child theme directory which may result in errors.
Recommended: You can also use One-Click Child Theme plugin to create a child theme(only from an unmodified parent theme).
Now you need to create a style.css file for your child theme (inside the child theme directory you just created). Once you have created the file just copy and paste the following code (Change below details according to your theme specifications):
/*
Theme Name: Twenty Sixteen Child
Theme URI: http://example.com/twenty-sixteen-child/
Description: Twenty Sixteen Child Theme
Author: WordPress Team
Author URI: http://example.com
Template: twentysixteen
Version: 1.3.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/
Note: The Template line (Template: twentysixteen) is to be changed according to your current name of the theme directory(the parent theme whose child we are creating). The parent theme in our example is the Twenty Sixteen theme, so the Template will be twentysixteen.
Earlier @import was used to load the stylesheet from parent to the child theme, but now it’s not a good method as it increases the amount of time to load the stylesheet. In place of using @import its best to use PHP functions in your child theme functions.php file to load the stylesheet.
In order to use functions.php file you need to create one in your child theme directory. Use the following code in your functions.php file:
<?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' );
}
?>
The above code only works if your parent theme uses only one .css file to hold all the CSS code.
If your child theme style.css contain actually CSS code (as it normally does), you will need to enqueue it as well:
<?php
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')
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>
It’s time to activate your child theme, login to your admin panel then go to Appearance > Themes and activate your child theme from the available list of themes.
Note: You may need to re-save your menu (Appearance > Menus) and theme options (including background and header images) after activating the child theme.
Now whenever you want to make changes to your style.css or functions.php you can easily do that in your child theme without affecting the parent theme folder.
Creating Child Theme in WordPress from your parent theme, but most of you have already customized your theme then the above method is not going to help you at all. In that case, check out how to update a WordPress Theme without losing customization.
If hope this article was helpful to you but if you still have any question regarding this guide please feel free to ask them in comments.