如何创建 WordPress 子主题 (2021)

已发表: 2021-10-21

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

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

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

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

wordpress 儿童主题

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

制作子主题前的注意事项

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

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

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

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

建立第一个儿童主题

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

现在，我们将开始定制。

使用代码

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

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

 1 Theme Name: WPB 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 文件夹。

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

使用插件

我们建议您可以使用子主题配置器插件。 由于它不需要编码，您可以轻松进行更改和自定义。

子主题生成器插件

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

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

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

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

WordPress 子主题的自定义

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

从 Firefox/Chrome Inspector 复制代码

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

要查看帖子或 o 站点的 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)