如何开发一个WordPress子主题
你运行WordPress网站已经有一段时间了,它一直在做你需要做的事情。但是,现在您决定需要对其进行定制。
或者,您可能正在使用从主题目录下载的主题或购买的主题创建一个站点,但是您意识到它不能完全按照您的需要运行。
那你会怎么做?
你可以找到一个插件来提供你需要的定制或者切换到一个新的主题。但是,如果你对当前的主题很满意,又找不到可以添加你需要的功能的插件怎么办?
你需要定制你的主题。最佳实践是:你通过(WordPress)子主题来做到这一点。
在本教程中,我们将更多地讨论什么是子主题以及它是如何工作的。我们还将带您从头开始创建主题的过程,并向您展示如何将修改后的主题变成子主题。
修改现有的主题是开始WordPress开发的好方法。变化的结果将很容易看到和理解。但是,直接编辑活动主题可能会导致问题,因为即使是一个小错误也可能使主题无法使用。每当主题更新时,您所做的所有更改也将丢失。
然而,避免这些问题的一个方法是创建“子主题”。子主题的工作方式和任何其他WordPress主题一样,除了它使用一个现有的主题作为它的基础(或者“父”)。您对子主题所做的更改将会反映在您的站点上,而不会直接更改父主题。
定制WordPress的方法
什么是WordPress子主题?
什么时候在WordPress中使用子主题(优点)
何时不使用WordPress子主题(缺点)
如何创建一个WordPress子主题
如何激活WordPress子主题
如何在WordPress自定义你的子主题
如何对子主题和父主题进行故障排除
使用WordPress子主题的有用提示
定制WordPress的方法
自定义主题有风险。如果您在第三方主题中编辑代码(例如,您从市场上购买的主题),下次更新主题时,您所做的所有更改都将丢失。这意味着不仅你的网站会恢复原状,你所有的工作都白费了。
你可以用三种方式定制你的WordPress网站:
直接编辑你的主题。
安装插件。
创建当前主题的子主题。
让我们依次看一下它们。
编辑你的主题。
如果你的网站运行一个自定义的WordPress主题,这意味着它是专门为你的网站开发的。您可以选择安全地编辑它,因为您的自定义设置在下次更新主题时不会丢失。
相反,如果您或您的开发人员将来对主题进行了更改,您将编辑主题的自定义版本,而不是更改前的原始版本。
这并不意味着编辑你的主题没有风险。如果你没有写主题的经验,创建副主题可能更安全(我们将在后面看到)。这是我所做的:我有一个基本的主题,我在我所有的网站上使用,有标准的布局,挂钩和功能,然后我在每个网站上用子主题定制它。
如果您直接编辑主题,请确保保留原始主题的备份,不要在实时站点中编辑主题(使用开发或临时站点),并使用版本控制来跟踪您的更改。
如果你使用的是第三方主题,千万不要直接编辑。相反,使用插件或创建子主题。
添加插件
定制WordPress主题的第二个选项是安装或编写插件。
如果您想要进行的定制是功能性的,而不是与设计相关的,那么插件是一种更合适的方法。所以如果你想添加额外的代码,你最好创建一个插件。
插件不必很大或复杂:如果你需要添加额外的代码到主题中的functions.php文件,请创建一个简单的插件来添加几行代码到你的网站。注册自定义文章类型就是一个很好的例子。
向主题的functions.php添加代码可能很诱人,但是添加文章类型是对网站功能的改变,而不是设计的改变。如果你想在未来切换话题,你不想失去这些文章类型和所有你用它们创建的文章。这就是为什么您应该安装或创建插件。
有时你可以找到一个现有的插件来满足你的需求,但有时你可能需要编写自己的插件代码。
WordPress插件库
如果你对是否应该创建插件或自定义主题(或子主题)有疑问,问问自己:如果我想改变网站的设计,并在未来安装一个新的WordPress主题,我想保留这个改变吗?如果答案是肯定的,那就意味着改变是功能性的而不是美观性的,它应该包含在插件中。
创建副标题
定制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使用这种层次结构来处理主题中的模板文件,并在显示给定类型的内容时找到合适的模板文件。它将从顶部开始(在上图的左侧)依次查找给定内容类型的每个文件。当它找到将显示内容的文件时,它将使用它。
假设您的主题有一个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中建立一个基本的子主题需要创建两个文件:样式表和函数文件。
第一步:为你的子主题创建一个文件夹。
你首先需要的是给你的孩子一个住的地方。但是,在此之前,您需要一种方法来直接处理站点文件。这通常意味着使用像FileZilla这样的SFTP解决方案来访问您的站点。
一旦安装并设置了FileZilla,您就可以使用登录到虚拟主机所提供的凭证。完成后,你会看到整个网站组织成一系列的文件夹和文件。从这里,您需要导航到/wp-content/themes/,这是所有主题所在的位置。
右键单击该文件夹中的任意位置,然后选择创建目录。此文件夹将保存您的子主题,因此我们建议您以其父主题命名。例如,2017年的一个子主题可以被称为twenty 17-child。
保存文件夹后,您可以开始向子主题添加内容。
步骤2:创建样式表
级联样式表(CSS)是一种定义HTML内容外观的语言。主题的CSS文件控制着文本、图像、超链接和网站上大多数其他内容的外观。当我们谈论改变一个主题的外观时,我们通常谈论编辑它的CSS。
这听起来可能很复杂,CSS确实为您提供了许多定制选项。然而现在,你不需要担心细节。你需要做的就是创建CSS文件本身。您将在刚刚创建的子主题文件夹中执行此操作。只需打开文件夹,右键单击其中的任意位置,然后选择创建新文件。
当你被要求命名一个文件时,将其命名为style.css,注意大小写和拼写(因为否则WordPress将无法识别该文件)。
这个文件自然是空,所以你需要为它提供一些东西。要开始编辑文件,请右键单击该文件并选择查看/编辑。这将在您的默认文本编辑程序中打开文件,如“文本编辑”或记事本。
在创建文件之前,你需要创建一个文件夹来保存你的主题。这是在WordPress安装的wp-content/themes文件中。
在新主题的文件夹中,创建一个名为style.css的文件,添加以下内容:
/*Theme Name: My Child Theme. Child for Twenty Nineteen.Theme URI: https://rachelmccollin.comDescription: Theme to support tutsplus tutorial. Child theme for the Twenty Nineteen theme.Author: Rachel McCollinTextdomain: mccollinAuthor URI: https://rachelmccollin.com/Template: twentynineteenVersion: 1.0License: GNU General Public License v2 or laterLicense URI: https://www.gnu.org/licenses/gpl-2.0.html */
这段话已经被注释掉了。它不是在你的网站上运行任何东西或提供任何功能的代码。相反,它会告诉WordPress主题。你在每个主题中都需要这样的文字,否则WordPress无法将其识别为主题。
让我们通过每一行来确定他们的角色:
主题名称:主题的唯一名称。
主题URI:用户可以找到主题的代码或文档。
描述:帮助用户理解主题的描述性文字。
作者:你的名字?
Textdomain:用于国际化。在任何国际化函数中使用文本字段作为第二个参数。
作者URI:作者的网站。
模板:存储父主题的文件夹。使用文件夹名称而不是主题名称。没有这一行,你的主题就不能作为子主题。
版本:版本号
License: License,必须是GNU。[协会]
许可URI:许可信息的链接。
主题最重要的一行是模板:行。没有这个,主题就不能作为子主题。只有副标题会包含这一行。
将此添加到您的主题的样式表中,编辑它以添加您自己的详细信息,而不是我的。您需要编辑Template:行来添加存储现有主题的文件夹,因为这将是您的父主题。
现在保存文件。如果您现在查看站点中的主题详细信息屏幕,您将看到显示的所有内容:
WordPress中没有截图的主题页面
这个看起来不太好,因为没有截屏。这是一个图像,可以给你一个主题外观的想法。除非你的主题看起来和父主题很不一样,只要把screenshot.png文件从你的父主题复制到你的子主题就可以了。
WordPress中带有屏幕截图的主题页面
步骤3:引用父主题
到目前为止,你的主题有一个主页和一些基本信息。现在,是时候赋予它一些功能了。您可以通过创建一个函数文件来做到这一点。其中,这个文件决定了主题的独特功能。这是一个功能强大的工具,用途广泛,但现在,你只需要创建它。
下一步是将函数文件添加到您的子主题中。您需要它,以便可以将父主题中的样式表排队。没有它,你的网站将没有任何风格,看起来像这样:
我们的主页没有CSS。
不,我相信你会同意的!所以,让我们添加样式,使它看起来像它应该的样子。
在你的子主题文件夹中,添加一个名为functions.php的文件。打开它并添加以下代码: