wordpress创建_如何创建WordPress儿童主题

wordpress创建

I have been blogging for a long time now and I use WordPress in all my blogs. Its easy to use and provide a lot of features to extend it easily. Today I will explain what is “WordPress Child Theme” and how easily we can create a child theme from any parent theme.

我已经写博客很长时间了，我在所有博客中都使用WordPress。 它易于使用，并提供许多功能来轻松扩展它。 今天，我将解释什么是“ WordPress子主题”以及我们从任何父主题创建子主题的难易程度。

WordPress儿童主题 (WordPress Child Theme)

WordPress child theme is the extension of an existing parent theme, it allows us to modify the functionality of parent themes. Its always better to create a child theme if you want to modify the theme files because it will make your life easier if you need to update your parent themes.

WordPress子主题是现有父主题的扩展，它允许我们修改父主题的功能。 如果要修改主题文件，最好创建一个子主题，因为如果需要更新父主题，它将使您的生活更轻松。

创建WordPress子主题的步骤 (Steps to Create WordPress Child Theme)

If you will look into the WordPress installation directory, you will see that all the theme files are located at wp-content/themes directory. This is the place where we need to create the child theme.

如果您查看WordPress的安装目录，将会看到所有主题文件都位于wp-content/themes目录中。 这是我们需要创建子主题的地方。

First step is to create the folder for the new theme, for my example I am creating a folder name “pinboard-child” in the theme directory.

第一步是为新主题创建文件夹，例如，我在主题目录中创建一个名为“ pinboard-child”的文件夹。

WordPress儿童主题CSS文件 (WordPress Child Theme CSS File)

The only required file to create a child theme is style.css and it should contain some important information that WordPress Codex use to determine the child theme information such as theme name, parent theme name, author etc.

创建子主题所需的唯一文件是style.css ，它应包含WordPress Codex用于确定子主题信息的一些重要信息，例如主题名称，父主题名称，作者等。

My child theme style.css looks like this:

我的子主题style.css看起来像这样：

@charset "utf-8";
/*
Theme Name: Pinboard-Child
Theme URI: https://www.onedesigns.com/wordpress-themes/pinboard
Version: 1.0
Author: Pankaj
Author URI: https://www.journaldev.com/
Template: pinboard
*/

@import url("../pinboard/style.css");

#wrapper {
	position:relative;
	max-width:1200px;
	margin:0 auto;
	box-shadow:0 0 18px rgba(0, 0, 0, .4);
	background:#f8f8f8;
	overflow:hidden;
}

The other thing required in style.css is the import of parent theme stylesheet i.e @import url("../pinboard/style.css");

style.css中需要的另一件事是父主题样式表的导入，即@import url("../pinboard/style.css");

Once we are done with these information, we can add any extra stylesheets we need for the new theme. Notice the Template is “pinboard” that is the parent theme folder name.

一旦完成了这些信息，就可以添加新主题所需的任何其他样式表。 注意，模板是父主题文件夹名称的“ pinboard”。

After this you can go to WordPress Admin Themes section and you will see the new theme listed there. You can activate it and start making further changes.

之后，您可以转到WordPress Admin Themes部分，您将在此处看到新的主题。 您可以激活它并开始进行进一步的更改。

WordPress儿童主题PHP文件 (WordPress Child Theme PHP Files)

If you want to modify any PHP files, you can copy them to the new theme and then modify it. WordPress will automatically use the new files for the theme. For example, I wanted to modify the header and footer PHP files to add some tracking information, so I just copied them to the child theme folder and modified them accordingly.

如果要修改任何PHP文件，可以将它们复制到新主题，然后进行修改。 WordPress将自动使用新文件作为主题。 例如，我想修改页眉和页脚PHP文件以添加一些跟踪信息，因此我只是将它们复制到了子主题文件夹中，并进行了相应的修改。

WordPress子主题覆盖功能.php (WordPress Child Theme Overriding functions.php)

functions.php contains all the functions required by theme files and WordPress automatically register all the functions defined in the parent functions.php file, so you can’t just copy it to child theme and modify it. PHP will throw fatal error that function is already defined. All you need to do it create a new functions.php file and make any changes accordingly. For example, I wanted to limit the number of tags shown in the tag cloud, so I created a new functions.php and added a new function in it. My child theme functions.php look like this.

functions.php包含主题文件所需的所有功能，而WordPress会自动注册父function.php文件中定义的所有功能，因此您不能仅将其复制到子主题并进行修改。 PHP将抛出致命错误，即已定义函数。 您所需要做的就是创建一个新的functions.php文件，并进行相应的更改。 例如，我想限制标签云中显示的标签数量，因此我创建了一个新的functions.php并在其中添加了一个新函数。 我的子主题functions.php看起来像这样。

functions.php

functions.php

<?php
add_filter('widget_tag_cloud_args','set_number_tags');
function set_number_tags($args) {
$args = array('number' => 18, 'largest' => 22);
return $args;
}
?>

Notice that it’s a PHP file, so you need to add the PHP start and end tags.

注意，这是一个PHP文件，因此您需要添加PHP的开始和结束标记。

WordPress子主题覆盖Javascript文件 (WordPress Child Theme Overriding Javascript Files)

Overriding JS files is a bit tricky and you need to create a new function in functions.php file to deregister the JS script used in parent theme and register them in the child theme.
For example, I added following function to register the jquery JS file.

覆盖JS文件有点棘手，您需要在functions.php文件中创建一个新函数，以注销用于父主题的JS脚本并将其注册到子主题中。
例如，我添加了以下函数来注册jquery JS文件。

function pinboard_child_js()   
{    
 wp_deregister_script('jquery');  
 wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js');  
 wp_enqueue_script('jquery');  
}  
add_action('init', pinboard_child_js);

Once I was done all the changes, I went to themes section and activated the new theme and it looks fine, just like the old one with some tweaks I made, now I don’t need to spend a lot of time in making sure all my changes are preserved while updating the parent theme.

完成所有更改后，我进入了主题部分并激活了新主题，它看起来不错，就像旧的主题经过一些调整之后，现在我不需要花费很多时间来确保所有主题我的更改在更新父主题时被保留。

For more information, refer WordPress Child Theme.

有关更多信息，请参阅WordPress儿童主题 。

翻译自: https://www.journaldev.com/1401/how-to-create-wordpress-child-themes

wordpress创建