开始使用 WordPress 子主题？

已发表: 2016-06-22

在本教程中，您将学习如何创建 WordPress 子主题。 如果您是 WordPress 新手并且不知道什么是 WordPress 子主题，我会解释一切。

WordPress 主题是一堆 PHP、JavaScript 和 CSS 文件的集合。 简而言之，使用 WordPress 主题，您可以更改博客的外观和感觉。 WordPress 主题可以非常强大。

高级 WordPress 主题提供了许多高级特性和功能。 提供数以千计的免费和高级 WordPress 主题。

您可以从头开始创建 WordPress 主题，也可以基于另一个主题创建 WordPress 主题。 每个版本的 WordPress 都预装了 WordPress 主题，如果您不喜欢预装的 WordPress 主题，您可以安装另一个 WordPress 主题，或者您可以创建一个子主题。

为什么选择 WordPress 儿童主题？

创建 WordPress 子主题意味着您采用现有主题并基于它创建自己的主题。 子主题继承了原始主题的大部分功能，称为父主题。

儿童主题节省了大量的工作和时间。 从头开始创建 WordPress 主题需要花费大量时间，有时需要提前了解 HTML、CSS、PHP 并且是必需的。 使用子主题，您可以进行很多修改。

如果您对所使用的 WordPress 主题提供的自定义、选项和功能不满意，那么您可以创建一个子主题。 即使您想对您的 WordPress 主题进行一次更改，您也应该创建一个子主题或使用 CSS 编辑器插件。

您可以直接编辑现有的 WordPress 主题文件，但是当您进行更新时，您将丢失所有自定义项。 这就是为什么你需要一个儿童主题。

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

使用 WordPress 子主题，您可以添加任意数量的功能。 由你决定。 如果您想更改标题或链接的字体大小或颜色，可以使用 CSS 轻松完成。

您可以添加新的导航菜单、注册新的侧边栏、为产品创建自定义页面或添加对自定义 Web 字体的支持。

你需要什么：

现在您知道了什么是 WordPress 子主题以及为什么要创建子主题，是时候学习如何创建 WordPress 子主题了。

这不是必需的，但建议设置本地 WordPress 安装以用于开发和学习目的。 通过本地 WordPress 安装，您可以快速轻松地测试您的新插件和主题。

本地安装 WordPress 的方法有很多，如果你是 MAC 用户，可以使用 MAMP，Windows 用户可以使用 XAMPP、WAMP 或 Bitnami WordPress 安装程序。

  • 如何使用 WAMP 服务器安装 WordPress
  • 如何使用 MAMP 安装 WordPress
  • 如何使用 Bitnami Stack 安装 WordPress

如果您是绝对的初学者，您可以下载并安装 Bitnami WordPress 堆栈，以在您的 MAC 或 PC 上创建一个功能齐全的 WordPress 网站。

我个人更喜欢 WAMP 服务器进行本地开发。 在 WAMP 上安装 WordPress 并不难，您可以阅读教程或观看视频来学习如何使用 WAMP、XAMPP 或 MAMP 安装 WordPress。

您还需要一个代码编辑器来编辑主题文件。 Sublimetext、Brackets、Atom 是少数流行的代码编辑器。

如何创建 WordPress 子主题？

一旦您的本地 WordPress 网站准备就绪，我们就可以开始创建我们的子主题了。 如果您使用 WAMP 服务器，请转到您的 WAMP 安装目录 > WWW > WordPress > wp-content > 主题文件夹。

在 WordPress 主题文件夹中，创建一个新文件夹并将其命名为 twentysixteen-child 或任何您喜欢的名称，例如 InstantShift。 我们将使用二十六主题作为父主题。 这意味着我们的子主题将基于 TwentySixteen 主题。

对于每个子主题，我们需要两个文件。

  • functions.php
  • style.css

在您的二十六子主题文件夹中创建这两个文件。 现在在文本编辑器中打开您的文件，为了快速访问，您可以在文本编辑器侧边栏中拖动您的二十六子文件夹。 打开 style.css 文件并添加以下代码。

[CSS]
/*
主题名称：InstantShift
描述：InstantShift 的 26 个儿童主题。
作者：塔希尔陶斯
作者 URI：http://www.instantshift.com
模板：二十六
版本：0.1
*/
[/css]

子主题需要以上标记。 如果没有带有必要标记的样式表，WordPress 将无法识别您的子主题。

我想，你可以理解一切。 没有什么好解释的。 我的孩子主题名称是 InstantShift，但您可以随意命名您的孩子。 最重要的是模板：二十六。 这是我们父主题的名称。 确保拼写正确。

如果您使用任何其他主题作为父主题，只需将 Template: twosixteen 更改为Template: parent-theme-name 。

在样式表标题中，我们还可以添加更多信息，但这不是必需的。 现在登录到您的 WordPress 仪表板。 转到外观 > 主题。 您应该看到 InstantShift 主题没有任何屏幕截图，因为我们没有为我们的子主题添加任何屏幕截图。

将鼠标悬停在 InstantShift 主题上，然后单击主题详细信息按钮。 这是我的孩子主题截图。

Child Theme

如果您可以看到此屏幕，则表示您的子主题已准备就绪。 现在我们可以开始自定义我们的主题了。 激活这个新主题并访问您博客的前端。 您将看到没有任何样式的所有内容。

别担心。 这是正常的。 我们看不到任何样式，因为我们没有包含父主题样式表文件。 让我们确保我们的子主题的样式表正常工作。 在您的子主题的 style.css 文件中添加以下代码。

[CSS]
身体{
背景颜色：#E7F5FB；
}
[/css]

保存您的 style.css 文件，重新加载本地 WordPress 网站的首页，您应该会看到浅蓝色背景色。

注册父主题的样式表

我们不想从头开始创建所有样式。 我们将在子主题的 style.css 文件中添加一些新样式。 现在让我们在子主题中添加父主题的 stye.css 文件。

打开 functions.php 文件并在子主题的 functions.php 文件中添加以下代码。

[php]
<?php

// 父主题样式 //
// https://codex.wordpress.org/Child_Themes //

功能主题入队样式（）{
$parent_style = '父样式';
ks29so_enqueue_style($parent_style, get_template_directory_uri() . '/style.css' );
ks29so_enqueue_style('儿童风格',
get_stylesheet_directory_uri() 。 '/style.css',
数组（$parent_style）
);
}
add_action('ks29so_enqueue_scripts', 'theme_enqueue_styles');
[/php]

现在，如果您重新加载本地 WordPress 站点，您将看到具有所有 TwentySixteen 样式的正常主题。

就这样。 您已经成功创建了您的第一个子主题。 您还为正文添加了新的背景颜色。

但是我们并没有创建我们的子主题来简单地改变身体的背景。 让我们开始定制我们的主题。

覆盖父主题样式

自定义标题：

默认情况下，二十六主题的标题有很多填充。 让我们更改填充并为站点标题添加新的背景颜色。 在您的子主题的 style.css 文件中添加以下代码，保存您的文件并重新加载您网站的前端以查看更改。

[CSS]
.site-header {
填充：0 4.5455%；
背景：#CDDC39；
边距底部：2em；
}
[/css]

在这里，您可以看到添加新样式之前和之后的站点标题屏幕截图。

Theme Header

自定义主导航

现在让我们更改主导航菜单项的背景颜色。 我喜欢使用 Chrome 开发者工具来编辑我的 CSS 样式。

使用 Chrome 开发工具编辑网页后，您可以从 Chrome 开发工具中复制新代码并粘贴到子主题的 style.css 文件中。

打开您的子主题的 style.css 文件并在其中添加以下代码。

[CSS]
#菜单标题&gt; 李{
背景：RGBA（185、202、22、0.97）；
margin-right: 4px !important;
边框半径：5px；
}
[/css]

在这里，您可以看到我们新标题的屏幕截图。 我们很容易用儿童主题定制我们的主题。

Theme Header Navigation

最后的话

现在您知道如何创建 WordPress 子主题了。 这非常简单易行。 通过对 HTML 和 CSS 的基本了解，您可以完全改变您网站的设计。

您还可以使用子主题添加新的导航菜单、小部件区域、对新字体的支持等。 但是我们不能在一篇文章中涵盖所有内容。

如果你想学习 WordPress 主题开发，你应该从 WordPress 子主题开始。 学习主题定制的基础知识。