如何开发一款WordPress子主题

您已经运行WordPress网站一段时间了,它一直在做您需要做的事情。但是现在,您决定需要对其进行自定义。

或者,您可能正在使用从主题目录下载的主题或已购买的主题创建站点,但您意识到它不能完全按照您的需要运行。

那你怎么办呢?

您可以找到一个插件来提供您需要的自定义或切换到新主题。但是,如果您对当前的主题感到满意并且找不到可以添加您需要的功能的插件怎么办?

答:您需要自定义您的主题。最佳实践说:您通过(WordPress)子主题来做到这一点。

在本教程中,我们将更多地讨论子主题是什么以及它是如何工作的。我们还将带您完成从头开始创建主题的过程,并向您展示如何将修改后的主题变成子主题。

修改现有主题是开始WordPress开发的好方法。更改的结果将很容易看到和理解。但是,直接对活动主题进行编辑可能会导致问题,因为即使是一个小错误也可能导致主题无法使用。每当主题更新时,您所做的所有更改也将丢失。

然而,有一种方法可以避免这些问题,那就是创建“子主题”。子主题的工作方式与任何其他WordPress主题大致相同,不同之处在于它使用现有主题作为基础(或“父”)。您对子主题所做的更改将反映在您的站点上,而无需直接更改父主题。

  1. 自定义WordPress的方法
  2. 什么是WordPress子主题?
  3. 何时在WordPress中使用子主题(优点)
  4. 何时不使用WordPress子主题(缺点)
  5. 如何创建WordPress子主题
  6. 如何激活WordPress子主题
  7. 如何在WordPress中自定义您的子主题
  8. 如何对子主题和父主题进行故障排除
  9. 使用WordPress子主题时的有用提示

自定义WordPress的方法

自定义主题有风险。如果您在第三方主题(例如您从市场上购买的主题)中编辑代码,那么当您下次更新主题时,您所做的所有更改都将丢失。这意味着您的网站不仅会恢复原状,而且您的所有工作都被浪费了。

可以通过三种方式自定义您的WordPress网站:

  • 直接编辑您的主题。
  • 安装插件。
  • 创建当前主题的子主题。

让我们依次来看看其中的每一个。

编辑您的主题

如果您的网站运行自定义WordPress主题,这意味着它是专门为您的网站开发的,您可以选择安全地编辑它,因为下次更新主题时不会丢失您的自定义设置。

相反,如果您或您的开发人员将来对主题进行更改,您将编辑的是主题的自定义版本,而不是更改之前的原始版本。

这并不意味着编辑您的主题并非没有风险。如果您没有编写主题的经验,创建子主题可能仍然更安全(我们稍后会看到如何)。这是我做的事情:我有一个基本主题,我在我所有的网站上使用,具有标准布局、钩子和函数,然后我在每个网站上使用子主题对其进行自定义。

如果您直接编辑主题,请确保保留原始主题的备份,不要在实时站点中编辑主题(改用开发或临时站点),并使用版本控制来跟踪您的更改。

如果您使用的是第三方主题,则永远不要直接编辑它。相反,使用插件或创建子主题。

添加插件

自定义WordPress主题的第二个选项是安装或编写插件。

如果您要进行的自定义是功能性的而不是与设计相关的,那么插件是一种更合适的方法。所以如果你想添加额外的代码,最好还是创建一个插件。

插件不必很大或很复杂:如果您需要向主题中的functions.php文件添加额外的代码,请创建一个简单的插件来向您的站点添加几行代码。一个很好的例子是注册自定义文章类型。

将代码添加到主题的functions.php可能很诱人,但添加帖子类型是对网站的功能更改,而不是设计更改。如果您以后要切换主题,您不会希望丢失这些帖子类型以及您使用它们创建的所有帖子。这就是为什么您应该安装或创建插件的原因。

有时您可以找到一个现有的插件来满足您的需求,但有时您可能需要自己编写插件代码。

WordPress插件库

如果对是否应该创建插件或自定义主题(或子主题)有疑问,请问自己:如果我想在将来更改网站的设计并安装新的WordPress主题,我是否希望保留此更改? 如果答案是肯定的,这意味着更改是功能性的而不是美学的,它应该包含在插件中。

创建子主题

自定义WordPress主题的第三个选项是创建子主题。

以下是您使用子主题的一些场景:

  • 您希望更改网站的设计,而不是功能。
  • 您的网站正在运行第三方主题或您想在当前状态下再次使用的主题。
  • 您不想直接编辑现有主题,以防它引起问题(可能您不是经验丰富的主题开发人员)。
  • 您的站点正在运行一个设计为父主题的主题,例如框架主题。这些主题具有许多自定义选项,例如hooks,专为您添加到您自己的子主题而设计。

因此,子主题是一种向您的网站添加自定义内容的有效且安全的方式。因此,让我们更深入地了解它们。

什么是WordPress子主题?

那么,WordPress中的子主题究竟是什么?它是如何工作的?

子主题是与另一个主题协同工作的主题,称为父主题。

它包含一些特定的说明来告诉WordPress这是一个子主题以及父主题是什么。WordPress 然后在大多数情况下使用来自父主题的代码,但会使用来自子主题的代码(如有必要)覆盖它。

在许多方面,子主题的功能就像一个“正常”的WordPress主题。它以相同的方式安装、启用和配置。子主题的独特之处在于它依赖于另一个主题来确定其大部分内容。另一个主题被称为“父主题”。

WordPress将始终优先考虑子主题的设置。因此,你能想到的子主题为坐在前面的家长。如果子主题中的设置覆盖了父主题中的匹配设置,则子主题优先。这使您可以仅更改要更改的主题部分,其他所有内容都由现有父级处理。

例如,大多数父主题包含定义不同标题文本级别的样式,例如h1、h2、h3、h4等。假设父主题将h1字体大小定义为20px,但子主题指定与32px相同的标题。在这种情况下,WordPress会将后一种样式应用于所有h1文本。但是,如果同一个子主题不包含h2、h3 和 h4 的特殊样式说明,则仍将应用父主题定义的样式。

如果您可以直接编辑主题,您可能想知道为什么子主题值得麻烦。使用子主题实际上有很多优点,因为它:

  • 使您能够更新父主题。您应该始终保持网站的各个方面都是最新的。但是,如果您编辑了父主题,则更新后所有更改都将丢失。
  • 可以轻松找到您所做的更改。发现您进行更改的每个实例可能很困难。使用子主题使您的添加内容更加清晰。
  • 避免直接编辑父主题的风险。如果您在处理主题时出错,或者您对所做的修改不满意,您可以轻松回滚到原始主题。

WordPress子主题中的文件

每个WordPress子主题必须至少有两个文件:样式表和函数文件。样式表将在顶部包含注释掉的文本,告诉WordPress这是一个子主题以及父主题是什么。函数文件将包含一个函数,该函数将来自父主题的样式表排入队列。

注意:您可能会遇到一些指南,告诉您从子主题的样式表调用父主题样式表。这不再是正确的方法,您应该在函数文件中使用排队。我很快就会告诉你如何做到这一点。

你的子主题并不必须 包含的任何其他文件。与父主题不同,如果主题中没有更多特定文件,它不需要index.php文件作为后备。这是因为如果子主题中不存在模板文件,WordPress将使用父主题中的文件。

因此,根据您希望子主题执行的操作,您可以向样式表、函数文件中添加额外的代码,或者在子主题中创建额外的文件以覆盖父主题。这些可能包括以下一项或多项:

  • 模板文件覆盖父主题中的相同文件,例如page.php当您要自定义静态页面的显示时。
  • 当您想要自定义站点设计的这些部分时,模板部分例如header.php或footer.php。
  • 您从子主题中的模板文件调用的额外模板部分。因此,如果您想在显示静态页面时自定义页眉,您可以在子主题中创建一个名为header-page.php的文件和一个名为page.php的模板文件,该文件将覆盖父主题中的page.php . 这个模板文件将与父主题中的模板文件相同,除了头文件的调用,它会调用header-page.php 而不是header.php。
  • 用于功能的额外包含文件。如果您想添加大量函数代码并对其进行组织,您可以为每组函数创建包含文件,然后在您的子主题的functions.php文件中调用它们。因此,例如,如果您想添加额外的定制器选项,您可以在您的子主题中添加一个名为customr.php的包含文件,然后从您的子主题中的函数文件中调用该文件。

但是,如果您确实添加了额外的文件和功能,WordPress怎么知道该使用哪个呢?来自父主题的那些还是来自子主题的那些?这就是我们接下来要讲的。

WordPress如何选择模板文件

WordPress在您的站点上显示内容时从您的主题中选择模板文件的方式是参考模板层次结构。

WordPress模板层次结构

WordPress使用此层次结构来处理主题中的模板文件,并在显示给定类型的内容时找到要使用的正确模板文件。它将从顶部开始(在上图中的左侧)并依次查找给定内容类型的每个文件。当它找到将显示该内容的文件时,它将使用它。

假设您的主题有一个archive.php文件和一个category.php文件,但没有tag.php文件。显示类别档案时,WordPress将使用category.php,因为它更特定于内容类型。当显示标签档案时,它将使用archive.php代替。

如果WordPress没有为给定的内容类型找到模板文件,它会默认为包罗万象的index.php文件,这就是为什么每个独立主题(即不是子主题)都必须有一个index.php文件的原因.

这同样适用于单个文章和页面。假设您的主题有一个single.php文件,它是任何文章类型(包括页面和自定义帖子类型)的单个帖子的统称。它还有一个page.php文件。当显示单个页面时,它将使用page.php。显示文章时,它将使用singular.php。如果您注册自定义文章类型并且不为该帖子类型添加模板文件,它将再次使用singular.php。

当您使用子主题时,WordPress仍然使用模板层次结构来决定在您的站点上输出内容时使用哪个文件。它查看父主题和子主题中的文件并使用它遇到的第一个文件。

所以想象你的子主题有singular.php和post.php,你的父主题有page.php和index.php。输出单个文章时,WordPress将使用子主题中的post.php。输出页面时,它将使用父主题中的page.php。当输出自定义帖子类型的单个帖子时,它将使用来自子主题的single.php。

但是,如果您的子主题和父主题都有相同文件的实例怎么办?

假设您将page.php文件添加到上一个示例中的子主题。因为该主题位于子主题中,所以它会覆盖父主题中的相同文件。因此,当显示单个页面时,WordPress将使用来自子主题的新page.php文件。

这就是为什么创建子主题可以让您自定义父主题。如果您将父主题中的模板文件副本添加到子主题,然后对其进行编辑以包含您要进行的自定义,WordPress将使用这个新模板文件,而不是来自父主题的模板文件。这意味着您的自定义将在显示内容时使用,而无需您编辑父主题。好的!

WordPress如何从父主题和子主题运行函数

如果您不想对主题中的模板文件进行自定义,而是对功能进行自定义,该怎么办?

你也可以这样做。首先,您需要让自己满意,这样做的正确方法是通过子主题而不是插件。一个示例可能是您想要编辑父主题中已有的函数,例如,在页脚中输出版权页的函数。

然后将新函数添加到子主题中的函数文件,或添加到从函数文件调用的包含文件。

为确保您的新函数覆盖父主题的功能,您需要了解如何覆盖函数。有三种方法可以做到这一点:

  • 通过在父主题中编写一个与可插入函数同名的新函数。
  • 通过将父主题中的函数从它所附加的钩子中解开,然后编写一个新函数来替换它。
  • 通过编写一个比原始函数具有更高优先级的新函数并通过相同的钩子调用它,这意味着它在原始函数之后被调用,因此可以覆盖或增加它。

我们将在本文稍后简介您如何执行所有这些操作。但首先,让我们看一下您何时会使用和不会使用子主题的场景。

何时在WordPress中使用子主题(优点)

您现在知道什么是子主题以及如何使用它们来覆盖父主题中的模板文件或函数。

简要回顾一下,如果您在网站上运行主题并且想要执行以下一项或多项操作,则应使用子主题:

  • 编辑一个或多个模板文件。
  • 添加与显示而非功能相关的额外功能。
  • 覆盖父主题中的一个或多个函数。
  • 添加额外的模板文件。

一些优点包括:

  • 易于扩展和定制:很明显,子主题扩展了其父主题的功能。您已经有一个父主题形式的现成模板,您需要做的就是为您的子主题创建一个单独的style.css文件,并根据您的需要添加自定义调整。
  • 轻松更新:随着 WordPress 的发展,主题和插件需要经常更新。如果您对主要主题进行自定义调整和更改,如果您更新主题,最终可能会丢失所有更改。因此,建议对子主题进行此类更改,这样即使您需要更新父主题,也不必担心丢失更改。

当您不使用子主题时呢?

何时不使用WordPress子主题(缺点)

有时您不会使用子主题,而应该使用不同的方法来自定义您的网站。这些是:

  • 如果您的主题是您自己开发的(或其他人为您编写的)并且不需要在其他任何地方使用它。只需编辑主题,确保使用版本控制。
  • 如果您要进行的自定义具有功能性,例如添加自定义帖子类型,并且您希望在将来更改主题时保留它们。改用插件。

一些缺点包括:

  • 选择理想的父主题:并非所有主题都可以作为好父主题!例如,某些WordPress主题可能不会定期更新,因此往往缺乏最新的功能。同样,并非所有WordPress主题都是在考虑子主题的情况下创建的,因此可能不适合父主题。您需要选择完美的父主题,以便正确扩展它并使其成为您子主题的基础。
  • 定制工作:子主题基本上寻求扩展和定制现有模板设计。因此,如果您已经围绕父主题创建了一个网站,则在移动到子主题时,您可能需要重新考虑自定义元素,例如菜单、主题选项、侧边栏、标题等。

现在您知道何时(以及何时不)使用子主题,是时候开始工作并学习如何在WordPress中创建子主题了。

现在您知道为什么应该使用子主题,现在是创建一个的时候了。这个过程有点复杂,但我们将引导您完成每一步。

如何创建WordPress子主题

在创建子主题之前,您需要做一些准备工作。首先,在执行任何其他操作之前创建站点备份非常重要。这样,您就可以处理您的主题,而不必担心破坏您的网站或丢失其任何内容。事实上,最好使用临时站点来编辑和测试您的主题,而不是您的实时站点。

我们还建议您在开始之前熟悉CSS和PHP。虽然您不需要任何使用这些语言创建子主题的经验,但它肯定有助于编辑主题的过程。花时间了解这些关键语言的基础知识将使您有一个良好的开端。

在WordPress中设置一个基本的子主题涉及创建两个文件:样式表函数文件

Step 1:为您的子主题创建一个文件夹

您需要的第一件事是为您的孩子主题生活的地方。但是,在此之前,您需要一种直接处理站点文件的方法。这通常意味着使用像FileZilla这样的SFTP解决方案来访问您的站点。

一旦你安装和设置FileZilla中,您可以使用登录你的空间提供的凭据。完成后,您将看到整个站点组织成一系列文件夹和文件。从这里,您需要导航到/wp-content/themes/,这是所有主题所在的位置。

右键单击此文件夹内的任意位置,然后选择创建目录。此文件夹将保存您的子主题,因此我们建议您以其父主题命名。例如,一个二〇一七的子主题可能被称为twentyseventeen-child。

保存文件夹后,就可以开始向子主题添加内容了。

Step 2:创建样式表

层叠样式表 (CSS)是一种定义HTML内容外观的语言。主题的CSS文件控制您网站上的文本、图像、超链接和大多数其他内容的外观。当我们谈论更改主题的外观时,我们通常谈论的是编辑其CSS。

这听起来可能很复杂,而且CSS确实为您提供了很多自定义选项。但是,现在您无需担心具体细节。您需要做的就是创建CSS文件本身。您将在刚刚创建的子主题文件夹中执行此操作。只需打开文件夹,右键单击其中的任意位置,然后选择创建新文件。

当您被要求命名文件时,将其命名为style.css,注意使用确切的大小写和拼写(因为WordPress否则将无法识别该文件)。

该文件自然是空的,因此您需要为其提供一些内容。要开始编辑文件,请右键单击它并选择查看/编辑。这将在您的默认文本编辑程序中打开文件,例如TextEdit或记事本。

在创建文件之前,您需要创建一个文件夹来保存您的主题。这在WordPress安装的wp-content/themes文件中。

在新主题的文件夹中,创建一个名为style.css的文件。添加以下内容:

/*
Theme Name:  My Child Theme. Child for Twenty Nineteen.
Theme URI:  https://rachelmccollin.com
Description:  Theme to support tutsplus tutorial. Child theme for the Twenty Nineteen theme.
Author:  Rachel McCollin
Textdomain:  mccollin
Author URI:  https://rachelmccollin.com/
Template:  twentynineteen
Version:  1.0
License:  GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html                 
*/

这段文字被注释掉了。它不是在您的网站上运行任何东西或提供任何功能的代码。相反,它会告诉WordPress主题。每个主题中都需要这样的文本,否则WordPress无法将其识别为主题。

让我们通过每一行来确定它们的作用:

  • Theme Name:主题的唯一名称。
  • Theme URI:用户可以在其中找到主题的代码或文档。
  • Description:帮助用户理解主题的描述性文字。
  • Author:你的名字
  • Textdomain:用于国际化。在任何国际化函数中使用文本域作为第二个参数。
  • Author URI:作者的网站。
  • Template:存储父主题的文件夹。使用文件夹名称而不是主题名称。没有这一行,您的主题将无法作为子主题使用。
  • Version:版本号
  • License:许可证,必须是GNU。[关联]
  • License URI:许可证信息的链接。

子主题最重要的一行是Template: 行。没有这个,主题将不能作为子主题工作。只有子主题将包含此行。

将此添加到您主题的样式表中,对其进行编辑以添加您自己的详细信息而不是我的。您需要编辑Template: 行以添加存储现有主题的文件夹,因为这将是您的父主题。

现在保存文件。如果您现在查看站点中的主题详细信息屏幕,您会看到显示的所有内容:

WordPress中没有截图的主题页面

这看起来不太好,因为没有截屏。这是一张图像,可以让您了解主题的外观。除非您的主题看起来与父主题非常不同,否则只需将screenshot.png文件从您的父主题复制到您的子主题。

带有屏幕截图的WordPress中的主题页面

Step 3:引用父主题

到目前为止,您的主题已经有了一个主页和一些基本信息。现在,是时候给它一些功能了。您可以通过创建一个函数文件来做到这一点。除其他外,此文件决定了主题的独特功能。这是一个功能强大的工具,用途广泛,但现在,您只需要创建它。

下一步是将函数文件添加到您的子主题。您需要它,以便您可以将来自父主题的样式表排入队列。没有它,您的网站将根本没有样式,看起来像这样:

我们的主页没有CSS

不好,我相信你会同意的!因此,让我们添加样式以使其看起来应该如此。

在您的子主题文件夹中,添加一个名为functions.php的文件。打开它并添加以下代码: