站长视角
用户至上

如何开发一款WordPress子主题

如何开发一款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主题,我是否希望保留此更改? 如果答案是肯定的,这意味着更改是功能性的而不是美学的,它应该包含在插件中。

创建子主题

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

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

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

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

什么是WordPress子主题?

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模板层次结构

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界面

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

WordPress主题目录

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

WordPress子主题目录

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

Step 2:创建样式表

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

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

主题CSS样式

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

创建子主题CSS样式文件

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

空白CSS文件

在创建文件之前,您需要创建一个文件夹来保存您的主题。这在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中没有截图的主题页面

WordPress中没有截图的主题页面

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

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

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

Step 3:引用父主题

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

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

我们的主页没有CSS

我们的主页没有CSS

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

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

<?php
/* enqueue script for parent theme stylesheeet */        
function childtheme_parent_styles() {
// enqueue style
wp_enqueue_style( 'parent', get_template_directory_uri().'/style.css' );                       
}
add_action( 'wp_enqueue_scripts', 'childtheme_parent_styles');

它使用wp_enqueue_style()函数将来自父主题的样式表排入队列,get_template_directory_uri()函数定位该文件的存储位置。该函数位于我创建的一个名为wbolt_parent_styles()的函数中,与wp_enqueue_scripts钩子挂钩。

您可能想知道为什么它使用名为wp_enqueue_scripts而不是的函数wp_enqueue_styles。这是因为wp_enqueue_scripts用于脚本和样式,并且没有像wp_enqueue_styles.

随意编辑我的代码,将您自己的前缀添加到您的函数名称中。我使用“childtheme”作为前缀,以确保我的函数不会与来自父主题或任何插件的任何其他函数发生冲突。

现在保存您的文件。

Step 4:启用子主题

您的子主题现在可以使用了,所以您需要做的就是启用它。最简单的方法是通过WordPress管理界面。只需登录,然后访问外观>主题。您应该已经在此处看到您的子主题:

启用子主题

此时,您只需要单击“启用”即可启用您的主题。当然,此时您可能不会注意到您的站点有任何差异。这是因为您实际上还没有添加任何自定义。子主题仍然是一张白纸,等着你把它变成特别的东西。

正如我们之前提到的,您现在应该花一些时间来了解有关CSS和PHP的更多信息。这将使您能够使用内置主题编辑器通过子主题向您的站点添加新样式和功能。如果你想扩展您的主题的功能,它也是一个聪明的想法,详细了解了functions.php的文件。只需稍加努力,您就可以使用全新的子主题对 WordPress 网站进行任何您想要的更改!

如何激活WordPress子主题

一旦您的子主题准备就绪,您就需要激活它。如果您担心激活子主题会关闭父主题,请不要担心:WordPress会知道使用父主题中的文件,除非您向子主题添加新文件来覆盖它们。到目前为止,您还没有向子主题添加任何额外的文件或功能,因此您的站点的工作方式与激活父主题时完全相同。

请记住:首先在您的开发或临时站点上执行此操作。在您测试之前,不要在您的实时站点上激活您的子主题。

在WordPress管理中,转到外观 > 主题。您会发现您的子主题列在您网站上安装的主题中。

将鼠标悬停在主题上,然后单击“激活” 按钮。这将激活您的子主题。现在,当您访问您的实时站点时,它看起来和以前一样:

网站首页

网站首页

它看起来相同,因为您尚未添加任何自定义。但是你现在有一个工作子主题。做得好!

如何在WordPress中自定义子主题

现在您的WordPress网站有了一个可用的子主题,是时候添加您的自定义设置了。在这里,我将向您展示如何添加模板文件以覆盖父主题上的模板文件、如何为子主题添加样式以及如何添加新功能。

让我们从模板文件开始。

如何将模板文件添加到您的WordPress子主题

我们已经了解了WordPress在您的网站上显示内容时如何选择要使用的模板文件。有两件事要记住:

  • WordPress将使用层次结构中最先出现的文件,无论是来自子主题还是父主题。
  • 如果父主题和子主题中都存在同名的模板文件(或模板部分,例如header.php),WordPress将使用子主题中的一个。

要添加自定义,我发现首先从父主题制作相关文件的副本,将其添加到子主题,然后编辑它更容易。

这适用于您的子主题中的文件是否与父主题中的命名文件相同,或者它是用于显示不同内容类型的新文件,还是层次结构中更高的文件。

因此,如果我将新版本的page.php添加到我的子主题中,这将覆盖我父主题中的page.php,我会将page.php从我的父主题复制到我的子主题,然后对其进行编辑。确保复制文件:不要移动它,因为您不想对父主题进行任何更改。

例如,如果我想要在我的子主题中使用自定义页面模板,我会将page.php复制到我的子主题,重命名它,然后对其进行编辑。

这样,您可以确保不需要自定义的文件的所有方面仍然可以正常工作。这同样适用于模板部件。

如何为您的WordPress子主题添加样式

您还可以向子主题的style.css文件添加样式,这将增强或覆盖父主题样式表中的样式。

WordPress将首先从父主题调用样式表,然后从子主题调用样式表。这意味着如果您将样式添加到与父主题中的样式相同的元素的子主题,只要您使用相同的选择器,它就会覆盖父主题的样式。

因此,假设您想更改站点标题的颜色。在父主题中,这可能是这样的:

h1.site-title {
color: #000;
}

要在您的子主题中覆盖它,您可以添加以下内容:

h1.site-title {
color: #303030;
}

由于浏览器会在父主题中的样式之后遇到这个,它将覆盖它并被使用。

如何为WordPress子主题添加函数

因此,您在WordPress中创建了子主题并不是因为您想要编辑任何模板文件,而是因为您想要添加额外的功能或覆盖父主题中的一个或多个功能。

在子主题中编写函数比添加模板文件要复杂一些,但这是可能的。

如果您想添加一个不与父主题中的任何功能交互的新功能,您可以继续这样做。只需将该函数添加到子主题中的functions.php文件中,将其挂接到相关的操作或过滤器挂钩上,就可以了。

但是,如果您计划覆盖或编辑父主题中的函数,则需要了解可用于执行此操作的方法。您可以通过三种方式覆盖子主题中的父主题功能:

  • 如果父主题中的主题是可插入的,您只需在子主题中编写另一个具有相同名称的函数,WordPress将运行该函数而不是父主题中的函数。
  • 如果你想完全停止父主题中的函数运行,你可以在你的子主题中编写一个函数,将它从它所附加的钩子中解开。
  • 如果您想扩充一个函数,您可以在您的子主题中添加另一个函数(具有不同的名称),并确保它在父主题中的函数之后运行。

让我们仔细看看你是如何做到的。

覆盖可插入函数

可插拔函数由环绕在它周围的条件检查标识。这将检查是否有另一个同名的函数已经被触发。如果是这样,它不会运行该功能。

WordPress将在来自父主题的函数之前触发来自您的子主题的函数。如果它在父主题中遇到一个可插拔函数,并且您已向子主题添加了一个同名的函数,则该可插拔函数将不会运行。

一个示例是在WooCommerce站点的Storefront主题中输出版权页的函数。这是没有内容的函数:

if ( ! function_exists( 'storefront_credit' ) ) {
function storefront_credit() {
// contents for function here
}
}

如果您想覆盖它,您可以编写另一个具有相同名称 ( storefront_credit()) 的函数并将其挂接到与父主题相同的钩子上。

从父主题中解开函数

如果父主题的函数不可插入,您仍然可以阻止它运行。假设您的父主题有一个名为parent_function()的函数,函数init20的优先级挂接到钩子上。您想阻止它运行,以便您可以用自己的函数替换它。

下面是父主题函数的样子:

function parent_function() {
//contents of function here
}
add_action( ‘init’, ‘parent_function’, 20 );

要解开它,您可以在您的子主题中对此进行编码:

function remove_parent_function() {
remove_action( ‘init’, ‘parent_function’, 20 );
}
add_action( ‘wp_head’, ‘remove_parent_function’ );

请注意,您将第二个函数挂接到在每个页面顶部运行的wp_head挂钩,并且您必须包含与原始函数中相同的优先级参数值。如果原始add_action()函数没有优先级,您可以从子主题的remove_action()函数中省略它。

注意:如果原始函数被挂钩到过滤器挂钩而不是动作挂钩,则您将以remove_filter()相同的方式使用。

用另一个函数扩充一个函数

有时您可能想要添加到它而不是覆盖或删除函数。在这种情况下,您将编写一个具有不同名称的新函数,并将其附加到同一个钩子上。

假设您的父主题中的页脚有一个名为parent_footer. 您附加到该钩子的任何函数都将在该钩子所在的位置运行。

在父主题中,已经有一个parent_footer_content()用于填充页脚的函数。但是如果你想给它添加一些额外的代码怎么办?

以下是该parent_footer_content()函数在父主题中的样子:

function parent_footer_content() {
// content of function here
}
add_action( ‘parent_footer’, ‘parent_footer_content’ );

现在,如果您想在那之后添加其他内容,您将在您的子主题中创建一个函数,挂钩到同一个动作钩子,优先级意味着它在第一个函数之后运行。由于未为父主题的功能设置优先级,因此默认为10。因此您需要使用更高的数字,以便在此之后触发。

function child_footer_extra_content() {
// contents of function here
}
add_action( ‘parent_footer’, ‘child_footer_extra_content’, 20 );

这将在来自父主题函数的代码之后添加来自子主题函数的代码。

如何对子主题和父主题进行故障排除

所以现在您知道如何在WordPress中创建子主题以及如何使用它来覆盖模板文件、添加额外样式以及为您的站点添加功能。

但是,如果您的子主题没有按预期工作怎么办?如果内容没有按照您预期的方式显示,或者函数没有触发怎么办?

使用此清单对您的子主题进行故障排除:

  1. 检查您是否已激活您的子主题以及您的父主题是否仍在运行。这一步很容易忘记!
  2. 刷新您的浏览器缓存以及由您网站上的任何插件创建的缓存。
  3. 在您的子主题的wp-config.php文件中将wp-debug设置为true。如果您正在查看白屏,应该会显示一条消息,告诉您是什么代码导致了问题以及它在哪个文件中。这将帮助您识别错误以及正在使用哪个文件。
  4. 检查页面、文章或存档的输出代码。找到body元素并查看它有哪些类。这些将告诉您正在查看的内容类型,这将帮助您识别正在使用的模板文件。有时它不是你所期望的。例如,主博客页面从不使用archive.php,即使它显示了您帖子的存档。
  5. 检查您是否正确命名了文件。请参阅模板层次结构以确保您使用了正确的语法。
  6. 如果您从父主题复制了一个文件并将其添加到您的子主题,请检查您是否已保存更改。
  7. 如果覆盖可插入函数的函数不起作用,请检查您是否给它提供了与可插入函数完全相同的名称,并且父主题中的函数确实是可插入的。
  8. 如果您删除的函数仍在触发,请检查您是否添加了正确的优先级,以及您的拼写是否与父主题中的函数和钩子的拼写相同。
  9. 如果您使用优先级来覆盖或增加一个函数,请尝试增加优先级值,这样您就可以绝对确定它最后触发。检查是否有其他附加到该钩子的函数会干扰您的代码。

希望这些步骤中的一个或多个步骤可以帮助您识别问题并在您的子主题中修复它。记住:不要直接编辑父主题

使用WordPress子主题时的有用提示

子主题是一个非常重要的话题,也是WordPress一个非常有价值的功能。我在我建立的每个网站上都使用它们。

为了帮助您找到最有效地利用子主题所需的方法,以下是我的提示,可帮助您解决这些问题:

  • 如果您需要编辑第三方主题,请始终使用子主题。这样,当您更新主题时,您的更改不会丢失。
  • 每个子主题都需要一个样式表和一个函数文件。
  • WordPress将使用模板层次结构来确定在输出内容时使用哪个模板文件。如果它找到两个同名的文件,它将使用子主题中的一个。
  • 您可以通过在子主题中编写具有相同名称的函数来覆盖父主题中的可插入函数。
  • 您可以使用子主题中的函数remove_action()remove_filter()从父主题中解开函数,然后编写新函数。
  • 您可以通过在子主题中编写一个函数并将其连接到相同的动作或过滤器钩子来扩充父主题中的函数。
  • 上传后不要忘记激活您的子主题。并确保没有人从您的WordPress安装中删除父主题:没有它,子主题将无法工作。

小结

创建子主题是在不承担任何相关风险的情况下修改主题的最佳方式。使用此过程,您几乎可以更改网站外观和布局方面的任何内容。更重要的是,您将能够立即创建您的子主题。

子主题是 WordPress 的一项有用功能,可让您自定义主题而无需直接编辑其代码。您可以使用一个来向主题添加附加功能、自定义样式或创建/编辑模板文件。

如果您遵循上述建议,您将能够按照最佳实践在 WordPress 中创建子主题,并利用它们完成各种任务。当您更新父主题时,所有这些都不会丢失您的更改和自定义。

赞(0)
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权, 转载请注明出处。
文章名称:《如何开发一款WordPress子主题》
文章链接:https://cnidc.co/26209.html
【声明】:国外主机测评仅分享信息,不参与任何交易,也非中介,所有内容仅代表个人观点,均不作直接、间接、法定、约定的保证,读者购买风险自担。一旦您访问国外主机测评,即表示您已经知晓并接受了此声明通告。
【关于安全】:任何 IDC商家都有倒闭和跑路的可能,备份永远是最佳选择,服务器也是机器,不勤备份是对自己极不负责的表现,请保持良好的备份习惯。

登录

找回密码

注册