在 WordPress 中创建子主题分步教程

在这篇文章中，您将逐步学习如何在 WordPress 中创建子主题，WordPress 子主题的所有基础知识。

您将学习如何导入父主题 CSS 样式、如何覆盖父主题样式以及为什么要创建 WordPress 子主题。

要了解为什么 WordPress 子主题很重要，您应该阅读我们的 WordPress 父子主题开发初学者指南

您可以使用 WordPress 子主题做什么？

使用 WordPress 子主题，您可以非常轻松地自定义默认的活动 WordPress 主题。 您无需了解高级 HTML、CSS、PHP 或 JavaScript 即可创建子主题。

对 HTML、CSS 和 PHP 有基本或良好的理解可能会很有帮助。

进一步阅读：如何选择完美的免费或高级 WordPress 主题

您可以使用 WordPress 子主题通过 CSS 修改您的网站、添加新的小部件区域、附加导航菜单、编辑自定义文件以创建具有自定义样式的新页面。

使用子主题，您还可以重新排序站点元素、添加新内容/元素和更改任何功能。

为什么你应该创建一个 WordPress 子主题

存在子主题的原因是您可以自定义“父”（您现有的/活动的）主题，而不会在更新父主题时丢失您的更改和修改。

例如，如果您直接修改了 single.php 文件，那么您的自定义首先会正常工作。

但是，当您将主题更新为修改后主题的较新版本时，您将丢失所有更改，并且无法恢复您的自定义。

你需要什么

您可以快速创建子主题并将其上传到您的服务器，但建议您在 PC 上本地安装 WordPress。

通过本地 WordPress 安装，您可以快速创建和测试您的主题，您不需要一直连接互联网。

使用本地 WordPress 站点，您可以在不影响您的实时站点的情况下犯错误，而且这种方式更快更好。

有很多方法可以在 Windows、MAC 或 Linux 上本地安装 WordPress。 阅读本教程，了解如何使用 Bitnami WordPress 堆栈在本地 PC 上安装 WordPress。

我们已经为初学者发布了分步教程。

如何在 Windows 8 中的 WAMP 服务器上安装 WordPress

如何使用 Bitnami Stack 在 Windows 8 上安装 WordPress

如何在 WordPress 中逐步创建子主题？

对于 WordPress 中的每个子主题，都需要两个文件。

• 函数.php
• 样式.css

在 style.css 文件中，我们可以添加关于我们的子主题的信息，例如主题名称、主题描述、作者姓名、父主题详细信息、标签等。

我们还需要一个functions.php 文件来注册父子主题样式表。 使用 functions.php 文件，我们还可以添加新功能、注册新导航菜单、小部件区域等。

因此，让我们开始创建您的第一个子主题。 在这个子主题中，我们不会添加新的小部件区域、导航菜单等。我们将使用我们的子主题进行一些简单的 CSS 更改，我们将覆盖默认的 CSS 样式。

您可以使用任何 WordPress 主题作为父主题，在本教程中，我将为 TwentySixteen 主题创建一个子主题。

创建一个新文件夹并将其保存为二十六孩子，或者您可以将其命名为任何您想要的名称，例如设计。

创建两个新文件并将它们保存为我们的子主题文件夹中的 functions.php 和 style.css 文件。 我的子主题文件夹名称是 designbomb。

现在在您的子主题的 style.css 文件中添加以下信息并保存您的文件。

 /* Theme Name: Design Child Description: A simple child theme for design blog. Author: Tahir Taous Version: 0.1 Template: twentysixteen */

现在登录到您的 WordPress 仪表板。 转到外观 > 主题 > 添加新的并上传这个新的子主题。 您将看到一个没有任何屏幕截图的新主题。 将鼠标悬停在主题上，然后单击主题详细信息按钮。

您将看到新子主题的以下详细信息。

在上面的屏幕截图中，您可以看到有关我们的子主题的所有基本信息。 我们的儿童主题的名称，谁是这个主题的作者，儿童主题的描述，你也可以看到这是一个二十六岁的儿童主题。 信息。

我们添加了模板：二十六在我们子主题的 style.css 文件中。 这一行告诉 WordPress 二十六是父主题。

如果您使用任何其他主题，请将 TwentySixteen 替换为您的父主题名称。

现在激活您的新子主题并重新加载您的首页。 您应该看到所有没有任何样式的内容。 别担心，这很正常。 这是因为我们没有包含父子主题的 style.css 文件

激活新的子主题后转到外观>编辑器并选择functions.php（主题功能）文件，在functions.php文件中添加以下代码并单击更新文件按钮以保存更改。

 <?php function theme_enqueue_styles() { $parent_; 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 ) ); } add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

现在访问您的 WordPress 站点的前端并重新加载您的页面，您应该会看到具有所有 TwentySixteen 样式的正常站点。

修改现有样式

这意味着我们的子主题已经准备好了，是时候用新的 CSS 样式自定义我们的父主题了。 现在在外观 > 编辑器下选择 style.css 文件。 我们将添加一些新样式。

在您的子主题的 style.css 文件中添加以下样式并保存您的文件。

 .main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a { font-weight: 700; background: beige; border-radius: 5px; color: #D2691E; box-shadow: 2px 1px 8px #815317; }

重新加载您网站的前端并打开任何页面。 我们修改了当前菜单项的默认样式。 请参阅下面的屏幕截图。

对于当前菜单项，我添加了新的背景颜色、边框半径、颜色和框阴影。 使用 Chrome 开发工具更改样式非常简单易行。

就这样

现在您知道如何创建子主题了。 不是那么简单和容易。 使用 WordPress 子主题，您几乎可以自定义父主题的每个文件，但不建议修改父主题的每个文件。

始终使用子主题来添加必要的功能、特性或自定义页面。

下载设计儿童主题