spot_img
HomeWordPress教程如何在 WordPress 中创建块子主题

如何在 WordPress 中创建块子主题

JasperAI 10000字免费额度试用
自定义您的网站

设想这种情况:您刚刚找到了一个近乎完美的主题,可以用在您的网站上。 它设计精良,包括您想要的布局,但您想更改调色板并限制客户修改某些区域。 不幸的是,您使用的主题不允许您删除默认颜色或锁定块。

虽然您可以直接编辑主题的文件,但是当您运行主题更新时,您所做的所有修改都将丢失。 您可以使用代码片段插件添加一些自定义 CSS,但这不会改变登录用户可用的样式选项。

所以,你可以做什么? 如何更改全局样式可用选项? 为此,您需要一个块子主题。

什么是 WordPress 子主题?

根据 WordPress 开发者文档:

谷歌SEO优化服务

子主题继承父主题的外观和感觉及其所有功能,但可用于对主题的任何部分进行修改。 通过这种方式,定制与父主题的文件保持分离。 使用子主题可以让您升级父主题,而不会影响您对站点所做的自定义。

因此,要在 WordPress 中使用子主题,您还需要安装父主题。 您的子主题继承了父主题的所有内容,并添加了一些变体。

如何创建儿童主题

您是否更喜欢代码选项来自定义您网站上的样式? 与覆盖其他 WordPress 主题一样,使用子主题是覆盖代码的最佳方式。 当您的主题更新时,您的子主题代码将保留。

在本文中,我们将介绍构成优秀 WordPress 子主题的关键组成部分,并提供深入的阅读资源。

1. 何时使用块子主题

儿童主题通常是一个很好的解决方案。 但是,如果您只想添加一点点 CSS 代码,那么整个子主题可能就有点过头了。 考虑使用像 Code Snippets 这样的插件来添加一些定制。

自定义客户站点

当您为客户构建站点时,您可能希望提供一些额外的定制。

WordPress divi主题

如果您想控制用户插入新块、移动现有块或删除块的能力,您可能需要实施块锁定。 您可以在此介绍性教程中学习如何锁定块等。

创建主题变体

除了定义主题布局客户端可以修改的区域之外,您可能还想更改它们的调色板选项,省略主题或 WordPress 的默认设置并添加独特的选项。 您还可以定义主题中也应该可用的渐变和双色调选项。

2.选择一个好的WordPress主题

并非所有主题都是一样的。 除了您在主题设计中看到的内容之外,选择父主题还涉及其他因素,例如更新频率、支持质量、文档和主题开发人员的声誉。 在如何使用 WordPress 主题构建网站中了解更多信息。

3.创建测试环境

到目前为止,您已经选择了父主题,收集了品牌资产,并决定了您想要覆盖的设置。 接下来,您需要设置测试环境。

如果您使用的是托管 WordPress 托管服务提供商,例如 GoDaddy 的托管 WordPress 托管,您可以使用您的一键式暂存站点作为开发环境。 如果您使用 cPanel 或 VPS 之类的东西进行托管,则可以设置单独的 WordPress 安装并将现有站点克隆或复制到新安装。

如果您没有将子主题应用于现有站点,或者如果您更愿意从头开始构建,则可以使用 MAMP 或 ServerPress 的 DesktopServer 等工具在您的计算机上创建本地 WordPress 开发环境。

4.创建你的主题目录

首先,您需要安装父主题。 然后,使用 FTP 客户端连接到您的开发环境并导航到您的 WordPress 文件所在的位置。

您正在寻找以下文件夹:

/wp-content/themes/

在那里您可以找到所有已安装的 WordPress 主题。 每个主题都有自己的文件夹或目录,其中包含主题的所有文件。 您将向列表中添加一个新目录,它将保存您的子主题。 你最终会得到类似的东西:

/wp-content/themes/your-child-theme/

5. 创建你的主题文件

对于我们的示例,我们假设我们使用的是二十二十二主题。 您需要为子主题安装该主题才能引用它。

H10的年终大促

在新的子主题目录文件夹中,您将创建两个新文件:

style.css
theme.json

这两个文件都有特定的用途。 这 样式.css 文件用于向 WordPress 提供有关主题的信息,例如名称、作者、标签和父主题 ID。

主题.json 文件用于定义全局样式等中的许多设置。 从开发人员手册中了解有关 theme.json 的更多信息。

在以前的经典主题中, 函数.php 文件在子主题中是必需的。 块子主题不需要这些步骤。

样式.css

什么属于你 样式.css 文件? 开发人员文档说:

您的样式表必须在文件的最顶部包含以下必需的标题注释。 这告诉 WordPress 关于主题的基本信息,包括它是一个具有特定父主题的子主题。

您需要将样板文件包含在 样式.css 包含标题信息的文件。 这 模板名称: 对应于您在其上构建的父主题的文件夹(目录)名称。 这 文本域: 名称对于您的 WordPress 子主题是唯一的。

以下是使用二十二十二的子主题示例:

/*
Theme Name: Twenty Twenty-Two Child
Theme URI: https://example.com/
Author: Your name
Author URI: https://example.com/
Description: Twenty Twenty Two Child Theme
Requires at least: 5.8
Tested up to: 5.9
Requires PHP: 5.6
Version: 0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentytwo-child
Template: twentytwentytwo
Tags: custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns

Twenty Twenty-Two Child WordPress Theme, (C) 2021 WordPress.org
Twenty Twenty-Two Child is distributed under the terms of the GNU GPL.
*/

主题.json

请参阅开发人员文档以更深入地了解 theme.json。 我们来看看二十二十二 theme.json 文件:

{
	"version": 2,
	"settings": {},
	"styles": {},
	"customTemplates": {},
	"templateParts": {}
}

在每一个中,您都可以使用更多样式。 例如,在样式区域中,二十二十二使用:

{
	"settings": {
		"appearanceTools": true,
		"color": {
		"duotone": [
			{
				"colors": [
				"#000000",
				"#ffffff"
		],
	"slug": "foreground-and-background",
	"name": "Foreground and background"
}

在制作 theme.json 文件时需要帮助吗? 查看 themegen.app 以获得为您的 theme.json 文件创建许多选项的指南。

高质量外链购买

6.自定义您的块子主题

虽然您可以轻松创建 theme.json 文件并将其附加到您的主题,但还有一些其他选择需要做出。 子主题甚至块主题是 WordPress 的新领域。 在这篇文章发布时,站点编辑器上显然有一个 beta 标签。 您需要回顾一下,看看哪些在子主题(例如模板部分)中有效和无效。

子主题的状态

此外,您可能会发现全局样式和 theme.json 尚不支持的设置。 如果您要添加额外的 CSS,例如带有框阴影的组块边框,您可能希望将其添加到您的 样式.css 文件。

.has-primary-border-color {
    box-shadow: .1rem .1rem .05rem #647BAF ;
}

7. 测试你的孩子主题

一旦您觉得您的网站在您当前的开发环境中看起来不错,就该在上传到实际网站之前对其进行测试了。

  • 在各种浏览器尺寸下进行测试,例如移动视口
  • 在不同的浏览器中测试或使用像 BrowserStack 这样的工具
  • 查看无障碍标准。 开始使用 WebAim

8. 准备上传你的块子主题

如果您一直在暂存站点上进行开发,那么您的文件就在它们需要的地方。 您可以访问您的托管选项来推动暂存站点上线。 如果您一直在本地开发人员环境中创建文件,那么该压缩文件了 样式.css主题.json 将文件合并为一个 zip 文件并上传到您的站点。

JasperAI 10000字免费额度试用

回顾创建块子主题

  1. 决定你需要一个块子主题
  2. 选择父主题
  3. 配置您的测试环境
  4. 创建你的主题目录
  5. 创建你的主题文件
  6. 自定义您的块子主题
  7. 测试你的孩子主题
  8. 将它们上传到现场

与 WordPress 中的经典主题一样,块主题仍然需要一个地方来存储自定义内容,这些自定义内容不会在父主题收到更新时被覆盖。 创建块子主题使您能够添加、锁定和省略站点上其他用户可用的选项。

5分钟生成10篇英文软文article forge软件试用
siteground

【WordPress花园提醒您】如果想购买国外正版WordPress主题和插件,您需要一张VISA信用卡才能支付,这里我们推荐光大银行信用卡!赶快免费申请,别耽误了买插件哦!

guangda
WordPress花园官方账号
WordPress花园隶致力于为广大跨境电商和独立站爱好者提供优质的WordPress教程、Woocommerce教程、Facebook、Twitter、tiktok、Instagram教程和谷歌SEO教程等资料和对应的建站推广服务。关注‘哟派出海’公众号了解最新资讯。粉丝福利:Shopline免费独立站建设14天优惠 商务合作: [email protected]
RELATED ARTICLES