如何创建 WordPress 子主题（2021）

你知道怎么做吗 一个WordPress 儿童主题？

当然，您的主题看起来适合您的网站，但在某些时候，您需要对其进行编辑。 更改子主题是编辑您的网站的首选。 此外，了解子主题是您应该了解的基本 WordPress 内容之一。 您可以从这里开始学习 WordPress。

让我们完成创建 WordPress 子主题的过程。

为什么要为 WordPress 使用子主题？

在 WordPress 中，子主题获取所有父主题的特性、功能等。 另一方面，可以在不更改父主题的情况下编辑子主题。 它将为您缩短编辑网站的时间和精力。 此外，您的 WordPress 主题更新更安全、更稳定。 当您自定义子项时，父项上的所有更改和自定义都将保持不变。 用户也可以在其他 WordPress 网站上使用这个子主题。

制作儿童主题前的注意事项

要制作子主题 WordPress ，需要编码技能，因为您将使用 HTML 和 CSS。 知道要改变什么是非常重要的。 此外，您将需要 PHP 的基本知识，至少从其他来源复制/粘贴代码片段。

我们真诚地建议您在开发环境中练习。 这是一个您可以在不害怕弄乱您的主站点的情况下做到这一点的地方。 这就像你用一块石头杀死两只鸟：一只将它移到测试场，一只用作主题开发。

还有一件事，父主题应该适合您的目的的外观和功能。 事实上，您所做的更改越少，您的网站就会变得越好。

在下面的部分中，我们将使用 LearnPress 主题作为示例，以更好地说明WordPress 创建子主题。

构建第一个儿童主题

制作子主题 WordPress 时，您有 2 个选项。 您可以使用手动方式来熟悉所有文件。 否则，应用插件将处理复杂的文件和文件夹。

现在，我们将开始定制。

使用代码

首先，您将在 WordPress 安装中打开 /wp-content/themes/ 并为您的子主题创建一个新文件夹。 随意命名。

然后，您必须为您的子主题创建前 2 个文件。 打开文本编辑器并将以下代码粘贴到空文档中：

 1 Theme Name: LP Child Theme 2 Theme URI: https://www.wpbeginner.com/ 3 Description: A LearnPress child theme 4 Author: ThimPress 5 Author URI: https://thimpress.com 6 Template: learnpress 7 Version: 1.0.0 8 Text Domain: learnpresschild

您可以在计划时更改信息，并将此文件保存到您最近子主题文件夹中的 style.css 文件中。 好吧，您刚刚制作了子主题的主样式表。

接下来，您将制作^第二个文件以从父主题导入样式表。 在文本编辑器中创建一个新文档并复制以下代码：

 1 /* enqueue scripts and style from parent theme */ 2 3 function learnpress_styles() { 4 wp_enqueue_style( 'child-style', get_stylesheet_uri(), 5 array( 'learn-press-style' ), wp_get_theme()->get('Version') ); 6 ( 7 add_action( 'wp_enqueue_scripts', 'learnpress_styles');

当您使用 LearnPress 作为父主题时，此代码将开始工作。 因此，大多数主题都会像这样工作。 保存此文件，它将成为您子主题的 functions.php 文件夹。

在这些步骤之后，您将拥有一个基本的子主题。 在“外观”中，选择“主题”和“激活”。 因此，您的网站将开始使用子主题。 如果您需要自定义，请移至下一部分。

使用插件

我们建议您可以使用 Child Theme Configurator 插件。 由于它不需要编码，因此您可以轻松地进行更改和自定义。

首先，在您的网站上安装插件。 有关插件安装的更多指南，请单击此处。

激活时，您转到“工具”->“子主题”，然后在父主题询问弹出窗口中选择 LearnPress。 选择“分析”以检查作为父主题的兼容性。 接下来，您必须命名子主题的文件夹以保存文件以及保存文件的位置。 在默认设置中，选择“单击以编辑子主题属性”。 然后您将完成子主题的信息。

手动制作子主题时，您的子主题不会从父主题继承菜单和工具。 要解决它，请使用子主题配置器。 最后，选择“Create New Theme Child”完成。 在这一步中，您的子主题将具有用于进一步开发的 functions.php 和 style.css。 显然，请记住预览您的子插件。 之后，您选择“激活并发布”以发布您的子主题。

现在，我们将开始自定义您的孩子主题。

WordPress子主题的定制

我们将通过向文件“style.css”添加代码来创建与父主题有点不同的子主题 WordPress 。

从 Firefox/Chrome 检查器复制代码

您可以使用 Chrome 和 Firefox 的 Inspector 小部件来发现所需的 CSS 代码。 此外，您可以使用这些工具访问所有网站的 CSS 和 HTML 元素。

要查看帖子或网站的 CSS 文件，请右键单击并选择“检查”。 您的屏幕将分成两半，您可以看到页面的 CSS 和 HTML。 当您将鼠标移到 HTML 行上时，检查器工具将在顶部窗口中显示您。 也有 CSS 规则。

背面会有暂时的颜色变化。 要使其永久化，请复制此 CSS 规则行并粘贴到子主题的 style.css 文件中：

 1 body { 2 background-color: #fdf8ef; 3 )

保存更改并预览网站。 此外，您可以为主题样式表中的任何元素重新启动它。 好吧，我们在这里为您提供子主题的完整样式表：

 1 Theme Name: WPB Child Theme 2 Theme URI: https://www.thimpress.com 3 Description: A LearnPress child theme 4 Author: ThimPress 5 Author URI: https://www.thimpress.com 6 Template: learnpress 7 Version: 1.0.0 8 Text Domain: learnpresschild 9 */ 10 11 .site-title { 12 color: #7d7b77; 13 ) 14 .site-description { 15 color: #aba8a2; 16 ) 17 body { 18 background-color: #fdf8ef; 19 color: #7d7b77; 20 ) 21 .entry-footer { 22 color: #aba8a2; 23 ) 24 .entry-title { 25 color: #aba8a2; 26 font-weight: bold; 27 ) 28 .widget-area { 29 color: #7d7b77; 30 )

从父主题的 style.css 文件中复制代码

如您所见，可以从父主题的style.css 文件中复制并将其粘贴到子主题并自定义。

例如，页面背景颜色的代码是：

 1 background-color: var(--global--color-background);

'-global-color-background' 是在主题的各个地方使用的变量。 如果您需要同时更改这些位置的颜色，则必须更改变量的值。 移动到 WordPress 安装文件夹中的 /wp-content/themes/learnpress 并在文本编辑器中打开文件 style.css 以查找 –global–color-background 的位置。 该变量可以用另一个变量更改。 您可以在父主题的 style.css 文件中找到一大堆颜色变量。 选择合适的颜色选项后，将该代码行复制并粘贴到子主题的 style.css 文件中，并根据您的颜色趋势将旧的替换为新的。 然后，颜色将根据计划的配色方案进行划分。 此过程将使您的配色方案保持一致并快速编辑。

自定义模板文件

在主题中，网站中的文件处理区域称为模板。 模板通常以它们处理的部分命名。 因此，一些重要的部分由各种文件或内容模板管理。

要自定义模板，请在父主题中找到该文件并将其复制到子主题中。 然后，在文本编辑器中打开它并开始修改它。

我们将通过文件 footer.php 向您展示此过程的教程。 将其复制到子主题的文件夹并在纯文本编辑器中打开它。 例如，让我们删除页脚中的“Proudly powered by WordPress”链接并添加版权声明。 首先，删除 <div class=”powered-by”> 标记之间的所有内容。

 1 <div class="powered-by"> 2 <?php 3 printf( 4 /* translators: %s: WordPress. */ 5 esc_html__( 'Proudly powered by %s.', 'learnpress' ), 6 '<a href="' . esc_url( __( 'https://wordpress.org/', 7 'learnpress' ) ) . '">WordPress</a>' 8 ); 9 ?> </div><!-- .powered-by -->

然后，您将粘贴在下面示例中的这些标签下方找到的代码。

 1 <div class="powered-by"> 2 <p>&copy; Copyright <?php echo date("Y"); ?>. All rights reserved.</p> 3 </div><!-- .powered-by -->

选择“保存更改”，当您返回该站点时，您将看到新的版权声明。

为您的 WordPress 子主题添加功能

要更改或添加功能到您的站点，您必须查找 functions.php 文件。 该文件使用 PHP 代码使该进程运行。

通常，系统会引导您将代码片段复制并粘贴到 function.php 文件中，但是当您更新 PHP 或主题时，它们将被删除。 因此，我们建议您使用子主题来添加代码片段。 好吧，让我们转到添加小部件的过程。 将代码片段添加到子主题的functions.php 文件中。

 1 <?php 2 // Register Sidebars 3 function custom_sidebars() { 4 5 $args = array( 6 'id' => 'custom_sidebar', 7 'name' => __( 'Custom Widget Area', 'text_domain' ), 8 'description' => __( 'A custom widget area', 'text_domain' ), 9 'before_title' => '<h3 class="widget-title">', 10 'after_title' => '</h3>', 11 'before_widget' => '<aside class="widget %2$s">', 12 'after_widget' => '</aside>', 13 ); 14 register_sidebar( $args ); 15 16 ) 17 add_action( 'widgets_init', 'custom_sidebars' ); 18 ?>

保存并导航到“外观”->“小部件”以查看新工具。 此外，您可以查找有关添加功能区的更多信息。 您可以通过将代码片段添加到站点的 functions.php 文件来添加许多功能。

这就是如何在 WordPress 中创建子主题的全部内容。 让我们转到修复错误的部分。

修复错误

您可以随时解决制作儿童主题的任何问题。 因此，你不应该轻易放弃。

语法问题可能是由编码过程中的一些缺失引起的。 此外，这是所有用户都能遇到的最常见的错误。 此外，如果事情不顺利，您可以随时将其删除并重新开始。

如何创建 WordPress 子主题：结论

我们希望您可以通过我们的文章获得有关制作儿童主题的知识。 感谢您的阅读！

阅读更多：如何修复 HTTP 错误 500 WordPress (2021)