标签: 主题开发

  • 什么是WordPress主题及如何挑选一款好主题

    在本教程中,我们将讨论什么是WordPress主题以及如何使用它们来自定义您的网站。然后,我们将根据您网站的细分市场深入了解在哪里可以找到主题,并解释如何安装它们。

    作为新的WordPress用户,您可能会对自定义网站感到兴奋。您甚至可能对完成的网站的外观有一个想象。但是,如果您缺乏设计或编码经验,实现您的愿景可能是一项艰巨的任务。

    幸运的是,主题是WordPress更固有和更有用的功能之一——它们使您能够自定义站点的外观,甚至合并其他功能。事实上,使用正确的主题,您可以根据您的确切规格自定义您的网站,(在许多情况下)无需编码或设计经验。

    WordPress主题简介

    什么是WordPress主题及如何挑选一款好主题-1

    WordPress主题是一组文件(图形、样式表和代码),它们决定了您的博客或网站的整体外观。主题可以控制像您网站的布局一样大的东西,也可以像您的超链接颜色一样小。很容易将主题视为您网站的“皮肤”,但它们的功能远不止于此。

    主题不是简单地为您的博客提供外观和感觉,而是使您能够控制站点的呈现方式。例如,假设您撰写有关食物的博客,但您还有一家在线商店。正确的主题可以以某种方式显示您的博客文章,同时为您的商店页面提供完全不同的布局。

    主题是 WordPress 的固有部分。事实上,该平台包括许多开箱即用的主题。但是,您可能想要在网站上选择并安装新主题的原因有几个:

    提高您网站的视觉吸引力。如果您对网站有特定的愿景,则可以选择合适的主题并对其进行自定义以满足您的要求。启用更多设计定制。如果您没有设计或编码经验,许多主题都提供了丰富的自定义设置来帮助您创建正确的设计。实现附加功能。根据您的需要,主题可能包括与您的利基相关的功能,而这些功能在其他地方是找不到的。

    虽然主题的默认版本或自定义版本适用于许多网站,但实际上有数千个主题可供选择,涵盖特定的细分市场和用途。现在让我们更深入地讨论这个问题。

    多用途与利基主题

    简而言之,主要分为两个主题类别(宽泛的定义)。首先,多用途主题迎合了许多不同的利基和网站类型。它们通常包括多种页面、扩展、代码、小部件和工具,以提供更多选项来自定义您的网站,无论其重点如何。

    虽然特定于利基的主题也可以自定义,但它们通常会针对一个特定主题或行业进行定制。它们不会像多用途主题那样包含那么多的自定义范围,但经过改进的功能通常会专注于您对网站的确切要求。

    在大多数情况下,选择 WordPress 主题时没有正确或错误的答案。但是,在做出选择之前确定您的要求重要——而您的预算就是其中之一。

    免费与付费WordPress主题

    在我们谈论花钱之前,重要的是要知道有很多高质量的 WordPress 主题不花一分钱。我们稍后会介绍在哪里可以找到它们,但是在WordPress.org主题目录中找到的主题必须通过严格的审查过程才能被包含在内。这可以确保质量,并使您可以选择纯粹基于设计、功能和用户评论的主题。

    但是,免费主题也缺点。对于初学者来说,支持通常很少。许多主题通过专门的论坛提供支持,通常让您来执行解决方案。此外,更新可以更加“临时”,具体取决于开发人员的优先级。

    虽然它们的开发方式与免费的 WordPress 主题相同,但高级解决方案却与众不同。您经常会发现支持和更新得到了极大的改进,同时特性和功能也有所增加。但是,您会发现这需要定期订阅,具体取决于开发人员。当然,如果您认为自己需要定期支持和更新,那么这笔费用是合理的 – 我们建议您保持主题更新以确保其安全可靠。

    最终,选择免费或付费主题将始终基于您的独特要求。如果您有时间和专业知识,并且预算最少,那么免费主题可能是理想的选择。但是,在大多数情况下,考虑到可用的大量主题,高级主题可能是您的最佳选择。

    如何挑选合适的主题

    正如我们简要提到的,有很多地方可以找到WordPress主题,涵盖各种预算和利基。让我们讨论其中的两个,从我们已经提到的一个开始。

    什么是WordPress主题及如何挑选一款好主题-2

    1. WordPress.org主题目录

    WordPress主题目录是免费的WordPress主题的官方资料库。您可以通过网络访问它,或者从您的WordPress仪表盘仔细阅读它。在列出之前,所有主题都经过严格的审查过程手动检查。因此,我们建议您在寻找预算友好的新主题时从这里开始。

    对于每个主题,您都可以访问可帮助您做出明智选择的信息。例如,您可以查看一个主题有多少活动安装,检查它上次更新的时间,阅读客户评论和评级,以及访问主题的支持论坛。

    此外,您可以使用默认数据直接从其列表中预览主题(如果在WordPress中浏览,还可以使用您的实际站点内容)。要获得更完整的现场演示,您通常会找到指向开发人员网站的链接。这让您有机会看到正在运行的主题,尽管在您自己的测试站点上安装主题的风险很小。

    最后,下载和安装主题是小菜一碟,尤其是直接在WordPress中进行时。

    2. 来自WordPress主题开发者

    什么是WordPress主题及如何挑选一款好主题-3

    如果您发现浏览大型目录的前景令人生畏,您可以随时直接访问源代码。许多 WordPress 主题开发人员直接出售他们的作品,尽管您需要进行自己的质量检查。下面是几个推荐选项:

    虽然这两个平台都提供了多种主题选项,但您可能还需要考虑其他来源。例如,WooCommerce提供Storefront主题。这是一个专门的电子商务主题,旨在与WooCommerce插件完全配合使用。通常,在您的特定细分市场中对主题进行互联网搜索会带来大量可供选择的选项。

    如果您搜索了合适的主题,但没有找到与您的愿景相符的主题,您也可以直接聘请开发人员来创建自定义主题。当然,自定义主题开发比选择“预先打包”的高级主题更昂贵。

    结论

    在没有编码或设计经验的情况下修改新WordPress网站的外观是使用WordPress平台的固有部分。WordPress不仅包含一个默认主题,还有数以千计的选项涵盖了多个细分市场和价格点。

  • WordPress主题开发入门基础教程

    在本教程中,我们将讨论如何开始主题开发。然后,我们将带您逐步完成创建全新自定义主题的过程。

    如果你想把某件事做对,你可能必须自己做。虽然有很多WordPress主题可用,但要找到一个具有您需要的外观和功能的主题可能很困难。事实上,您可能会尝试创建自己的主题。然而,主题开发的入门似乎势不可挡——尤其是对于初学者而言。

    幸运的是,为WordPress创建自定义主题是一个相对简单的过程。它也不需要太多的技术知识或Web开发经验。此外,构建您自己的主题非常值得付出努力,因为您可以让您的网站看起来和运行得恰到好处。

    WordPress主题开发简介

    WordPress官网

    您希望您的网站看起来很棒并拥有您需要的所有功能,因此您可以查看WordPress主题目录或者我们提供的WordPress原创主题。不幸的是,您看到的任何东西都不能满足您的所有要求,而且您不想在您的愿景上妥协。也许您想要一些独特的东西来让您的网站脱颖而出,或者您只是不想将钱花在高级主题上。

    此时,您可能会开始考虑创建自己的主题。幸运的是,为WordPress开发主题并不是您想象的那么复杂。由于该平台固有的用户友好性和众多可用工具,几乎任何人都可以创建自定义主题。

    我们将带您完成创建第一个主题的过程。要开始,您需要做两件事:

    • 您自己的WordPress 网站
    • 一个优质的服务器

    您还将受益于拥有本地临时环境的经验,因为您将使用一个环境来创建您的主题。对CSS和PHP有一些了解也会有所帮助(如果没有必要)。

    最后,您需要拥有一个重要的工具,它可以使创建主题的过程变得更加容易:入门主题。

    什么是入门主题

    入门主题是一个基本的WordPress主题,您可以使用它来创建自己的主题。使用starter使您能够建立在一个可靠的框架上,而不必担心从头开始编写主题所涉及的复杂性。它还将通过向您展示主题的基本结构及其所有部分如何协同工作,帮助您了解WordPress的工作原理。

    有很多优秀的入门主题在那里,其中包括下划线UnderStrapBones(仅举几例)。

    我们将在下面的示例中使用下划线。对于初学者来说,这是一个不错的选择,因为它只包含基础知识。另外,这个入门主题是由Automattic开发的,从长远来看,这使得它更有可能是安全的、兼容的并且得到很好的支持。

    如何开发您的第一个WordPress主题

    随着准备工作的进行,您终于可以开始创建您的第一个主题了。正如我们提到的,我们将在本演练中使用入门主题。

    但是,如果您想尝试在没有模板的情况下自己创建所有内容,您应该随意这样做。请记住,这将需要更多的编码能力和对Web开发的理解。

    Step 1:设置本地环境

    DesktopServer官网

    您需要做的第一件事是创建本地开发环境。这实际上是您安装在计算机上的服务器,您可以使用它来开发和管理本地WordPress站点。本地站点是开发主题的安全方式,而不会以任何方式影响您的实时站点。

    很多方法可以创建本地环境,但本次示例我们将使用DesktopServer。这是一种免费安装本地版本WordPress的快速、简单的方法,并且与Mac和Windows兼容。要开始使用,请选择DesktopServer的免费版本,完成注册过程,然后下载安装程序。

    下载安装程序后,您可以运行它。

    DesktopServer安装

    安装完成后,您可以打开该程序,系统会要求您配置新的本地环境。这是一个简单的过程,您将在几分钟内准备好您的本地WordPress站点。安装后,您的新网站的外观和工作方式将与实时WordPress网站完全相同。

    Step 2:下载并安装您的入门主题

    WP入门主题

    与大多数入门主题一样,Underscores非常容易上手。事实上,您需要做的就是访问网站并命名您的主题。

    WP主题命名

    如果需要,您还可以单击Advanced Options以进一步自定义基本主题。在这里您可以填写更多信息,例如作者姓名,并提供主题描述。

    WP主题基础信息

    还有_sassify!选项,这会将Syntactically Awesome StyleSheets (SASS)文件添加到您的主题。SASS是一种CSS预处理语言,它使您能够使用变量、嵌套、数学运算符等。

    当您做出选择后,您可以单击Generate,这将下载一个包含您的入门主题的.zip文件。这是您将围绕它开发自己的主题的核心,因此请将其安装在您的本地站点上。安装主题后,您可以预览站点以查看其外观。注:这只是一套最最最基础的主题,还需要您对其深加工!

    Step 3:了解WordPress在幕后的工作原理

    在自定义主题之前,您需要了解其组件的用途以及它们如何组合在一起。首先,让我们讨论模板文件,它们是 WordPress 主题的主要构建块。这些文件决定了您网站上内容的布局和外观。例如,header.php用于创建标题,而comments.php允许您显示评论。

    WordPress通过浏览模板层次结构来确定在每个页面上使用哪些模板文件。这是每次加载您网站上的页面时WordPress查找匹配模板文件的顺序。例如,如果您访问URL地址http://example.com/post/this-post,WordPress将按以下顺序查找以下模板文件:

    1. 与slug匹配的文件,例如this-post
    2. 与文章ID匹配的文件。
    3. 通用的单个文章文件,例如single.php
    4. 存档文件,例如archive.php
    5. index.php文件。

    由于所有主题都需要index.php文件,因此如果找不到其他文件,则默认使用该文件。Underscores已经包含了最常见的模板文件,它们开箱即用。但是,如果您想了解它们如何协同工作,您可以尝试编辑它们

    您需要掌握的另一个重要元素是Loop。这是WordPress用来显示内容的代码,因此在许多方面,它是您网站的跳动心脏。它出现在所有显示文章内容的模板文件中,例如index.phpsidebar.php

    循环是一个复杂的主题,如果您想更好地掌握WordPress如何显示文章内容,我们建议您阅读更多相关内容。幸运的是,由于Underscores,Loop已经集成到您的主题中,因此现在无需担心。

    Step 4:配置您的主题

    很容易认为主题纯粹是为了装饰目的,但它们实际上对您网站的功能产生了巨大的影响。让我们看看如何进行一些基本的自定义。

    使用“钩子”添加功能

    钩子是插入到模板文件中的代码片段,它使您能够在站点的不同区域运行PHP操作、插入样式并显示其他信息。大多数钩子直接在WordPress核心中实现,但有些钩子对主题开发人员也很有用。

    让我们来看看一些最常见的钩子以及它们的用途:

    • wp_head() — 添加到header.php中的<head>元素,并启用网站加载后立即运行的样式、脚本和其他信息。
    • wp_footer() — 在</body>标签之前添加到footer.php。这通常用于插入Google Analytics代码。
    • wp_meta() — 这通常出现在sidebar.php中,以包含其他脚本(例如标签云)。
    • comment_form() — 在文件结束 </div>标签之前直接添加到comments.php 以显示评论数据。

    这些将已包含在您的Underscores主题中。但是,我们仍然建议您访问Hooks数据库以查看所有可用的钩子并了解有关它们的更多信息

    使用CSS添加样式

    层叠样式表 (CSS)定义了您网站上所有内容的外观。在WordPress中,这是使用style.css文件完成的。您已经将这个文件包含在您的主题中,但目前它只包含基本的默认样式。

    WP主题CSS样式文件

    如果您想快速了解CSS的工作原理,可以在此处编辑任何样式并保存文件以查看效果。例如,您可以找到以下代码(通常在第 485 行):

    a {color: royalblue;}
    a {color: royalblue;}
    a {color: royalblue;}

    这控制未访问的超链接的颜色,默认情况下显示为宝蓝色:

    未访问URL锚文本颜色(蓝色)

    让我们看看如果我们尝试通过用以下代码替换它来改变它会发生什么:

    a {color: red;}
    a {color: red;}
    a {color: red;}

    保存文件,然后立即查看您的本地站点。正如您所料,所有未访问的链接现在将显示为鲜红色:

    未访问URL锚文本颜色(红色)

    您可能会注意到顶部的访问链接没有改变颜色。那是因为它实际上由样式表中的下一部分控制:

    a:visited {color: purple;}
    a:visited {color: purple;}
    a:visited {color: purple;}

    这是一个非常基本的示例,说明编辑style.css将如何影响您网站的外观。CSS 是一个庞大的主题,如果您想了解有关创建网页设计的更多信息,我们建议您进一步探索。有很多关于CSS主题的资源供初学者使用。

    Step 5:导出主题并将其上传到您的网站

    当您完成对主题的修改后,是时候确保它正常工作了。您可以通过测试主题来确保这一点。为了快速确保您的主题在大多数情况下都能正常运行,您可以使用Theme Unit Test数据。这是一组您可以上传到您的网站的虚拟数据,其中包含许多不同的样式和内容变体。它将使您能够了解您的主题如何处理不可预测的数据。

    当您彻底测试了您的主题并确信它符合要求的标准时,现在剩下的就是导出它。最简单的方法就是找到网站在本地计算机上的安装位置,最有可能在默认文档目录中名为网站的文件夹中。打开网站的文件夹并访问/wp-content/themes/,您将在其中找到您的主题。

    WP主题文件目录

    您现在可以使用压缩工具(例如WinRAR)来创建基于文件夹的.zip文件。只需右键单击文件夹,然后选择可以压缩它的选项,例如压缩“文件夹”。

    WP主题打包

    当文件夹被压缩后,它就可以上传并安装在任何WordPress站点上,就像您在开始时安装Underscores主题一样。如果您对结果感到特别满意,您甚至可以将您的主题提交到WordPress主题目录

    小结

    从头开始创建自定义WordPress主题是一项不小的壮举。然而,这个过程可能并不像您之前想象的那么困难。通过将过程分解为多个阶段并使用Codex文档站点上的信息,几乎任何人都可以创建新主题。

    当然,上述的主题开发教程只是一个基础、入门教程,要开发一个功能完善、前端交互一流的WordPress主题,并不是一蹴而就的事情。你可能需要对PHP、WordPress、CSS、JavaScript等代码知识有非常深入的了解和学习。

  • 如何开发一款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
    */
    /*
    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
    */
    /*
    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’);
    <?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’);
    <?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管理界面。只需登录,然后访问外观>主题。您应该已经在此处看到您的子主题:

    启用子主题

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

    正如我们之前提到的,您现在应该花一些时间来了解有关CSSPHP的更多信息。这将使您能够使用内置主题编辑器通过子主题向您的站点添加新样式和功能。如果你想扩展您的主题的功能,它也是一个聪明的想法,详细了解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: #000;
    }
    h1.site-title {
    color: #000;
    }

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

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

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

    如何为WordPress子主题添加函数

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

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

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

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

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

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

    覆盖可插入函数

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

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

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

    if ( ! function_exists( ‘storefront_credit’ ) ) {
    function storefront_credit() {