您要在 WordPress 中创建子主题吗？学习了 WordPress 基础知识后，您可能想学习如何自定义 WordPress 网站对于希望自定义 WordPress 主题的任何人来说，子主题都是一个很好的起点。
在本文中，我们将向您展示如何在 WordPress 中创建子主题。
为什么需要儿童主题？子主题是继承另一个 WordPress 主题（父主题）的功能、特性和样式的 WordPress 主题然后，您可以在不对父主题进行任何更改的情况下自定义子主题子主题是自定义 WordPress 主题的最佳方式，因为它们可以节省时间和精力。
父主题已经包含很多格式和功能，因此您不必从头开始编写所有代码它们还可以安全地更新您的 WordPress 主题因为您修改的是子主题而不是父主题，所以当您更新父主题时不会丢失任何定制一旦您对子主题感到满意，您甚至。
可以在另一个 WordPress 网站上使用它在开始创建子主题之前要创建子主题，您应该知道您将使用代码您需要对HTML和CSS有基本的了解，才能了解需要对代码进行哪些更改才能实现您的目标一些PHP知识也很有帮助。
您至少应该熟悉从其他来源复制和粘贴代码片段我们建议您在本地开发环境中练习您可以将实时 WordPress 站点移动到本地服务器以进行测试或使用虚拟内容进行主题开发最后，您需要决定父主题您应该选择外观和功能与您的最终目标相似的父主题。
目的是尽可能少地进行更改在本文中，我们将使用二十二十一主题，这是默认的 WordPress 主题之一创建您的第一个子主题您可以通过创建所需的文件夹和文件来手动创建子主题或者您可以使用插件创建子主题手动方法很有用，因为它可以帮助您熟悉本教程后面需要使用的文件。
如果您在创建这些文件时遇到困难，可以使用插件方法您只需使用一种方法，您可以使用下面的链接跳转到您喜欢的方法方法一：使用代码创建子主题方法 2：使用插件创建子主题方法一：使用代码创建子主题首先，您需要在 WordPress 安装文件夹中打开 /wp-content/themes/ 并为您的子主题创建一个新文件夹。
您可以随意命名此文件夹对于本教程，我们将其命名为 wpbdemo
接下来，您需要为子主题创建前两个文件首先打开记事本等文本编辑器然后您需要将以下代码粘贴到空文档中Theme Name: WPB Child ThemeTheme URI: https://www.。
wpbeginner.com/Description: A Twenty Twenty-One child theme Author: WPBeginnerAuthor URI: https://www.
wpbeginner.comTemplate: twentytwentyoneVersion: 1.0.0Text Domain: twentytwentyonechild此代码包含有关子主题的信息，因此请随意更改它以满足您的需要。
现在将此文件作为 style.css 保存在您刚刚创建的子主题文件夹中这是您的子主题的主要样式表您需要做的下一件事是创建第二个文件，该文件将导入或排队来自父主题的样式表为此，请在文本编辑器中创建一个新文档并复制以下代码。
/* enqueue scripts and style from parent theme */ function twentytwentyone_styles() { wp_enqueue_style( child-style, get_stylesheet_uri(), array( twenty-twenty-one-style ), wp_get_theme()->;get(Version) );}add_action( wp_enqueue_scripts, twentytwentyone_styles);
当您使用 Twenty-Twenty-One 作为父主题时，此代码将起作用如果您使用不同的父主题，那么您需要使用不同的代码，如WordPress 主题手册中所述如果您在为不同的父主题修改代码时遇到困难，那么您可能想改用插件方法。
现在将此文件作为 functions.php 保存在您的子主题文件夹中稍后我们将返回此文件以向您的子主题添加功能注意：过去，父主题是使用 style.css 中的@import 命令导入的我们不再推荐这种方法，因为它会增加加载样式表所需的时间。
您现在已经创建了一个非常基本的子主题，当您导航到外观 » 主题时，您应该会看到 WPB 子主题。您需要单击“激活”按钮才能开始在您的网站上使用子主题。
由于您尚未更改子主题中的任何内容，因此您的站点将使用其父主题的功能和外观您现在可以转到下一部分，您将在其中自定义子主题方法 2：使用插件创建子主题Child Theme Configurator是一个易于使用的 WordPress 插件，让您无需使用代码即可快速创建和自定义子主题。
您需要做的第一件事是安装并激活Child Theme Configurator插件有关更多详细信息，请参阅我们关于如何安装 WordPress 插件的分步指南激活后，您需要导航到WordPress 仪表板中的。
工具 » 子主题。在父/子选项卡上，系统会要求您从下拉菜单中选择父主题。我们将选择二十二十一主题。
单击“分析”按钮后，插件将确保该主题适合用作父主题。二十二十一 还行。
接下来，系统会要求您命名将保存子主题的文件夹，并选择保存样式的位置。我们将保留默认设置。
在下一节中，您将被要求选择如何访问父主题样式表。同样，我们将使用默认设置。
当您到达第 7 节时，您需要单击标有“单击以编辑子主题属性”的按钮。然后您可以填写子主题的详细信息。
当您手动创建子主题时，您会丢失父主题的菜单和小部件。子主题配置器可以将它们从父主题复制到子主题。如果您想这样做，请选中第 8 节框。
最后，单击按钮创建新的子主题该插件将为您的子主题创建一个文件夹，并添加您稍后将用于自定义主题的 style.css 和 functions.php 文件在激活主题之前，您应该单击屏幕顶部附近的链接进行预览，并确保它看起来不错并且不会破坏您的网站。
如果一切正常，请单击“激活并发布”按钮，您的子主题就会上线。
在此阶段，子主题的外观和行为与父主题完全一样接下来，我们将开始自定义它自定义您的儿童主题现在我们将自定义子主题，使其看起来与父主题略有不同我们通过将代码添加到 style.css 文件来完成此操作，这需要对。
CSS有一定的了解您可以通过复制和修改父主题中的现有代码来简化流程您可以使用 Chrome 或 Firefox 检查器找到该代码，或者直接从父主题的 style.css 文件中复制它方法 1：从 Chrome 或 Firefox Inspector 复制代码。
发现需要修改的 CSS 代码的最简单方法是使用 Google Chrome 和 Firefox 附带的检查器工具这些工具允许您查看网页任何元素背后的 HTML 和 CSS例如，如果您想查看用于帖子正文的 CSS，只需将鼠标移到帖子上并右键单击以选择“检查”。
这会将您的浏览器屏幕分成两部分。在屏幕底部，您将看到页面的 HTML 和 CSS。根据浏览器的设置，HTML 和 CSS 可能会出现在屏幕右侧。
当您将鼠标移到不同的 HTML 行上时，Chrome 检查器会在顶部窗口中突出显示它们它还会向您显示与高亮元素相关的 CSS 规则您可以尝试在此处编辑 CSS 以查看其外观让我们尝试将正文的背景颜色更改为#fdf8ef。
您会看到页面背景颜色会发生变化，但这种变化只是暂时的要使其永久化，您需要复制此 CSS 规则并粘贴到子主题的 style.css 文件中body { background-color: #fdf8ef;}。
保存您对 style.css 文件所做的更改，然后预览您的站点您可以继续对主题样式表中要更改的任何内容重复该过程这是我们为子主题创建的完整样式表随意试验和修改它Theme Name: WPB Child Theme Theme URI: 。
https://www.wpbeginner.com/ Description: A Twenty Twenty-One child theme Author: WPBeginner Author URI:
https://www.wpbeginner.com Template: twentytwentyone Version: 1.0.0 Text Domain: twentytwentyonechild */ .site-title { color: #7d7b77;}.site-description { color: #aba8a2;}body { background-color: #fdf8ef; color: #7d7b77;}.entry-footer { color: #aba8a2;}.entry-title { color: #aba8a2; font-weight: bold;}.widget-area { color: #7d7b77;}
方法 2：从父主题的 style.css 文件中复制代码您也可以直接从父主题的 style.css 文件中复制一些代码然后您可以将其粘贴到子主题的 style.css 文件中，然后对其进行修改这在使用 Twenty-Twenty-One 作为父主题时特别有用，因为它广泛使用了 CSS 变量。
比如我们上面修改页面背景色的时候，原来的代码是：background-color: var(--global--color-background);这里 –global–color-background 是一个变量。
该变量可以在整个主题的多个位置使用要一次更改所有这些地方的颜色，您只需更改变量的值即可您需要导航到 WordPress 安装文件夹中的 /wp-content/themes/twentytwentyone，然后在文本编辑器中打开 style.css 文件。
然后，您可以找到定义 –global–color-background 的位置--global--color-background: var(--global--color-green);我们发现该变量是由另一个变量定义的！
事实上，在父主题的 style.css 的 :root 部分，我们发现定义了整个范围的颜色变量这是二十二十一主题使用的调色板:root { --global--color-black: #000; --global--color-dark-gray: #28303d; --global--color-gray: #39414d; --global--color-light-gray: #f0f0f0; --global--color-green: #d1e4dd; --global--color-blue: #d1dfe4; --global--color-purple: #d1d1e4; --global--color-red: #e4d1d1; --global--color-orange: #e4dad1; --global--color-yellow: #eeeadd; --global--color-white: #fff;}。
一旦您为您的 WordPress 网站选择了完美的配色方案，这些变量将让您快速定制您的子主题您只需复制该代码并将其粘贴到子主题的 style.css 文件中然后您需要用您为自己的调色板选择的新颜色代码替换颜色代码。
然后，这些颜色将在整个子主题的多个位置自动使用它不仅速度更快，而且会使主题的颜色更加一致敢于冒险绿色变量不必是绿色您可以对其他变量执行相同的操作Twenty Twenty One 的 style.css 列出了字体系列和大小、标题、行距等的变量。
您可以将其中任何一个复制到您可以自定义它们的新 style.css 文件中编辑模板文件每个 WordPress 主题都有不同的布局。例如，二十二十一主题有页眉、内容循环、页脚小部件区域和页脚。
每个部分由 twentytwentyone 文件夹中的不同文件处理这些文件称为模板模板通常以它们使用的区域命名例如，页脚部分通常由 footer.php 文件处理，页眉和导航区域由 header.php 文件处理。
某些区域（如内容区域）可能由多个称为内容模板的文件处理如果要修改模板，首先要在父主题文件夹中找到该文件，然后将其复制到子主题文件夹中之后，您应该在文本编辑器中打开文件并进行所需的修改在本教程中，我们会将 footer.php 文件从父主题文件夹复制到子主题文件夹。
完成后，您需要在记事本等纯文本编辑器中打开该文件例如，我们将从页脚区域删除“自豪地由 WordPress 提供支持”链接，并在此处添加版权声明为此，您应该删除
发表评论:
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。