专注国内外云服务器
分享建站技术教程

如何开发一款WordPress子主题

立即购买

阿里云服务器 ¥102元/年 云数据库37.5元/年 限时

个人、企业均可购买 | 更多配置0.8折特惠

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

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

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

什么是子主题(以及它是如何工作的)

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

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

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

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

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

如何从头开始创建子主题

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

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

完成这些准备工作后,是时候开始了!

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

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

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

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

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

Step 2:创建样式表

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

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

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

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

您需要添加的第一件事是主题的标题。这是放置在文件顶部的注释,为WordPress提供有关主题的信息。现在将以下代码复制并粘贴到style.css文件中。

/*
Theme Name: Twenty Seventeen Child
Theme URI: http://example.com/twenty-seventeen-child/
Description: My Child Theme
Author: Your Name
Author URI: http://example.com
Template: twentyseventeen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: child theme, twentyseventeen
*/

这里最重要的两个字段是Theme NameTemplate。前者自然决定了主题的名称,而后者定义了它应该将哪个主题视为其父主题。正如你所看到的,我们已经设置twentyseventeen如本例父主题。随意编辑任何字段,具体取决于您选择的父主题。

完成后,不要忘记保存文件。FileZilla会询问您是否要替换其旧版本,此时您应该选择Yes

Step 3:引用父主题

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

和以前一样,这个文件应该放在你的子主题的文件夹中。所以创建一个新文件,并将其命名为functions.php。再一次,一定要使用准确的拼写和大小写。

最重要的功能——也是你现在唯一需要添加的——是告诉子主题引用父主题。如果您不这样做,则只会使用子主题的样式。这首先会破坏使用子主题的意义。

打开新的functions.php文件并添加以下代码:

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

就是这样!您不需要编辑代码,因为您已经在style.css文件中指定了父主题。只需保存您的函数文件,并在要求替换旧版本时同意。

Step 4:启用子主题

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

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

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

将修改后的父主题变成子主题

到目前为止,我们已经讨论了如何从头开始创建子主题。但是,如果您已经对现有主题进行了更改,并且想要继续进行更改,该怎么办?好消息是您不需要丢失您的修改。相反,您可以将所做的更改转换为子主题。

一种方法是使用Child Theme Configurator插件。

除此之外,此插件使您能够根据现有的父主题创建子主题。有关此过程如何工作的完整说明,您需要参考官方插件文档。

如果您更喜欢手动执行此操作,您只需将主题的原始未编辑版本与您网站上运行的当前版本进行比较。有很多工具可以帮助解决这个问题,例如DiffNow或Diff Checker。

这些工具使您能够输入两段文本并立即查看它们之间的差异。您需要先转到主题目录并下载现有主题的未更改副本。然后,将编辑过的主题文件的内容粘贴到一个字段中,并将主题的原始文件粘贴到另一个字段中。

当您看到两个主题之间的差异时,请仅复制编辑过的代码并将其保存在文本文档中以备后用。

扫描完每个修改过的文件并保存每个修改后,您可以使用我们在上一节中概述的过程来创建子主题。设置子主题后,只需将您保存在文本文档中的更改复制到其文件中即可。

小结

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

微海报分享

文章来源于互联网:如何开发一款WordPress子主题

相关推荐: 什么是MX记录及如何新增或更改

邮件交换 (MX) 记录是域名系统 (DNS) 中唯一类型的条目。多亏了DNS记录,当您收到自定义地址的电子邮件时,系统会准确地知道将其路由到何处。因此,正确设置它们并在需要时更改它们是一项应该给予关注和关注的任务。 在本文中,我们将首先谈谈什么是MX记录。然…

赞(0)
未经允许不得转载:吾上云 » 如何开发一款WordPress子主题
分享到: 更多 (0)
  • 阿里云
    基础型云服务器

    1核CPU

    2G内存

    40G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥89/1年 原价¥903.40

  • 阿里云
    超值型云服务器

    2核CPU

    4G内存

    40G硬盘

    3M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥899/3年 原价¥8281

  • 阿里云
    高性能云服务器

    2核CPU

    8G内存

    40G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥1399/3年¥14765

  • 腾讯云
    基础型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥95/1年 原价¥834

  • 腾讯云
    超值型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥288/3年 原价¥2502

  • 腾讯云
    高性能云服务器

    4核CPU

    8G内存

    50G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥2188/3年¥13986

  • 阿里云
    基础型云服务器

    1核CPU

    2G内存

    40G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥89/1年 原价¥903.40

  • 阿里云
    超值型云服务器

    2核CPU

    4G内存

    40G硬盘

    3M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥899/3年 原价¥8281

  • 阿里云
    高性能云服务器

    2核CPU

    8G内存

    40G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥1399/3年¥14765

  • 腾讯云
    基础型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥95/1年 原价¥834

  • 腾讯云
    超值型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥288/3年 原价¥2502

  • 腾讯云
    高性能云服务器

    4核CPU

    8G内存

    50G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥2188/3年¥13986

评论 抢沙发

评论前必须登录!

 

吾上云 专注服务器选购

购买云服务器联系我们