海外社媒SNS代运营Tiktok代运营公司
Revive Old Posts

营销型WordPress外贸多语言独立站建设+谷歌SEO优化+谷歌关键字广告投放,就找WP花园!深圳公司,技术实力雄厚,用效果说话!详情咨询info@wordpresshy.com

虽然比原计划晚了一点,但我们得到了一个新的 WordPress 默认主题。 它的名字是二十二!

新的 WordPress 默认主题随即将发布的 WordPress 5.9 版本一起提供。 我们很想了解有关新主题的更多信息,因此我们在运行 WordPress 5.9 的本地开发环境中安装并测试了 222。

在结束我们的想法之前,我们将向您展示我们的结果,让您深入了解新 WordPress 主题的来龙去脉。

二十二预览
新 WordPress 默认主题 22-22 的预览(图片来源:WordPress.org)

二十二被设计成有史以来最灵活、最轻量和可定制的默认主题。 它为测试块、模式和模板提供了一个很好的游乐场。

作为块主题,它将帮助您更好地探索完整站点编辑、全局样式、导航块和新图片库,这些是 WordPress 5.9 中最受期待的功能。

我们必须马上说 二十二是第一个默认块主题

新主题最雄心勃勃的目标之一是 赋予用户权力. 有了这么多开箱即用的模式和模板,用户只需单击几下即可构建复杂的布局。 剩下的只是样式定制。

海外社媒SNS代运营Tiktok代运营公司

从技术的角度来看,写关于二十二与写关于 WordPress 5.9 最新和最强大的功能没有太大区别。 但二十二为我们提供了一个放大镜,让我们更好地欣赏新的站点编辑功能,并更好地了解平台的未来。

所以在这里我们将向您介绍新主题。

首先,我们将探索 新站点编辑流程 用户将体验到 WordPress 5.9 和二十二。

之后,我们将深入探讨二十二中实现的主要块主题功能。 你会知道 全局样式, 块模式, 模板, 和 模板部件.

但是,关于二十二十二和 WordPress 块主题还有很多要说的。 因此,作为奖励章节,我们将快速概述如何通过利用 主题.json 文件。

让我们开始工作并深入了解全新的 2222 WordPress 默认主题。

二十二带来了新的站点编辑流程

几个完整站点编辑功能成为 WordPress 5.9 的核心。 使用最新 WordPress 版本并安装了 22-22 等区块主题的网站所有者将很快能够:

  • 使用更多块和模式创建和编辑帖子和页面
  • 自定义中定义的设置和样式 主题.json 文件通过全局样式界面
  • 创建和编辑页面和帖子的模板
  • 创建和编辑页眉、页脚和其他模板区域的模板部分

将所有这些功能合并到核心后,WordPress 核心贡献者一直在讨论信息架构的演变,并重新设计了整个站点编辑流程。

激活 2222 后,您可能会注意到的第一件事是站点编辑器的入口点不再位于 WordPress 仪表板的主菜单中,而是移到了 外貌 菜单。

编辑器菜单
WordPress 5.9 中的新外观菜单

将模板和样式编辑功能放在一起 外貌 菜单应该简化编辑体验。 它应该更容易理解您正在访问的功能与 推介会 您的页面。

准备好深入了解新的二十二主题了吗? 🚀别再看了👀点击推文

编辑 菜单项打开站点的主页模板。 根据您的阅读设置,这可以是您的最新帖子页面或静态页面。

二十二中的网站编辑
WordPress 5.9 中的站点编辑器与二十二

现在,单击左上角的 WordPress 图标会显示一个新的站点编辑器导航菜单,包括三个菜单项: 地点, 模板,模板部件.

让我们仔细看看。

编辑器导航菜单
编辑器导航菜单

地点 选项打开主页模板(最新的博客文章或静态主页)。

来自 模板 菜单项,您将获得可用模板的列表。 您可以单击列表中的任何模板以在编辑器中启动它。

在撰写本文时,22-22 提供了 11 个模板。

二十二模板
二十二模板。

单击省略号 () 图标可让您清除自定义。

清除模板自定义
清除模板自定义

与主题模板不同,自定义模板只能重命名或删除(但您可以在帖子编辑器中编辑自定义模板)。

重命名或删除自定义模板
重命名/删除自定义模板

模板部件 菜单项列出了您可以在编辑器中打开以进行自定义的可用模板部件。

默认情况下,您会发现四个模板部件已添加到“二十二”中。 将光标悬停在修改过的模板上会显示一个工具提示,让您知道该模板已被自定义。

二十二模板部件
二十二模板部件。

您可以通过单击省略号 () 图标。

清除模板部件自定义
清除模板部件自定义

编辑模板和模板部件

编辑 提供自定义模板和模板部件结构的界面。

您可以在此处轻松添加或编辑块和图案,您的更改将自动应用于使用该模板的每个页面。

编辑单个帖子模板
编辑单个帖子模板

下图显示了编辑器中的 404 页面模板。 这是一个非常简单的模板,仅包含一个标题、一个段落和一个搜索框。 尽管如此,它还是让我们对 UI 的工作原理有了很好的理解。

404块模板
二十二的模板编辑器中的404块模板

在这里,您可以进行编辑和自定义模板以最适合您的需求。 例如,您可能想要添加一个 图片帖子网格 模式以增加访问者的参与度并邀请他们浏览您网站的内容。

图片帖子网格
自定义二十二的404块模板

模板编辑器顶部的标题下拉列表显示可用的列表 模板区域. 相同的列表出现在 模板 选项卡中的 设置 侧边栏。

二十二中的模板区
二十二中的模板区

通过单击任何模板区域(例如标题),您将被直接带到要编辑的模板部分。

如果您单击右侧的省略号图标,您将访问 独立模板部件编辑器.

独立模板部件编辑器
省略号图标启动隔离模板部件编辑器

模板部件编辑器还提供了一对可拖动的手柄,允许您检查模板在不同屏幕分辨率下的行为。

调整模板零件预览尺寸
调整模板零件预览尺寸

一旦您对更改感到满意,请保存您的编辑并返回主模板编辑器以检查最终结果。

如果您想更深入地了解新的信息架构,您可能需要查看以下文章:

222 的核心:快速概览 主题.json

为了全面了解二十二和块主题是如何工作的,让我们看一下基于 主题.json 文件。

WordPress 5.8 引入了这种新机制,允许主题开发人员配置编辑器并从中央配置点添加功能支持。

在二十二, 主题.json 文件具有以下结构:

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

让我们快速浏览一下每个部分。

版本

version 字段描述规范版本,这是当前 2.

设置

settings 部分定义全局或块级别的设置。 在顶层定义的设置会影响所有块,但块可以单独覆盖全局设置。 在二十二十二中,您将找到以下设置:

{
	"settings": {
		"appearanceTools": true,
		"color": {
			"duotone": [...],
			"gradients": [...],
			"palette": [...]
		},
		"custom": {...},
		"spacing": {...},
		"typography": {
			"dropCap": false,
			"fontFamilies": [...],
			"fontSizes": [...]
		},
		"layout": {...}
	}
}

设置默认值被称为 预设 并用于根据特定的命名约定生成 CSS 自定义属性和类名:

  • CSS 自定义属性: --wp--preset--{preset-category}--{preset-slug}
  • CSS 类名: .has-{preset-slug}-{preset-category}

一旦一个主题定义了它的预设,相应的 CSS 自定义属性就可以用来设置主题中的块和元素的样式。 styles 部分。

样式

styles 部分是主题定义块和元素默认样式的地方。 例如,请参阅核心 Button 块的以下 22-22 样式:

{
	"version": 2,
	"styles": {
		"blocks": {
			"core/button": {
				"border": {
					"radius": "0"
				},
				"color": {
					"background": "var(--wp--preset--color--primary)",
					"text": "var(--wp--preset--color--background)"
				},
				"typography": {
					"fontSize": "var(--wp--preset--typography--font-size--normal)"
				}
			}
		}
	}
}

您会注意到属性声明中使用的 CSS 自定义属性。

WordPress花园建议你也读一下这篇文章  WordPress教程:轻松在线预订 WordPress

自定义模板

customTemplates 部分是主题声明其自定义模板的地方。 这 nametitle 字段是必需的。 主题还可以通过设置 postTypes 财产。

二十二提供了四种自定义模板:

{
	"version": 2,
	"customTemplates": [
		{
			"name": "blank",
			"title": "Blank",
			"postTypes": [
				"page",
				"post"
			]
		},
		{
			"name": "page-large-header",
			"title": "Page (Large Header)",
			"postTypes": [
				"page"
			]
		},
		{
			"name": "single-no-separators",
			"title": "Single Post (No Separators)",
			"postTypes": [
				"post"
			]
		},
		{
			"name": "page-no-separators",
			"title": "Page (No Separators)",
			"postTypes": [
				"page"
			]
		}
	]
}

你会找到对应的 .html 文件在 块模板 文件夹。

tt2 块模板文件夹
二十二 块模板 文件夹

模板部件

templateParts 部分包括模板部件定义:

{
	"version": 2,
	"templateParts": [
		{
			"name": "header",
			"title": "Header",
			"area": "header"
		},
		{
			"name": "header-large-dark",
			"title": "Header (Dark, large)",
			"area": "header"
		},
		{
			"name": "header-small-dark",
			"title": "Header (Dark, small)",
			"area": "header"
		},
		{
			"name": "footer",
			"title": "Footer",
			"area": "footer"
		}
	]
}

nametitle 字段是必需的。 主题也可以声明一个 area term,模板部分将在编辑器中呈现。

二十二模板部件
二十二模板部件

模板零件 .html 文件位于 模板部分 文件夹。

现在你知道更多关于二十二的 主题.json,我们可以更深入地探索主题的功能和新的编辑界面。

让我们深入了解 二十二的全球风格.

二十二中的全球风格

如果你看二十二 style.css,您可能会惊讶地发现它包含最少数量的 CSS 声明。 原因是 样式在 主题.json 基于块的主题中的文件.

WordPress 5.9 将更进一步,引入了一项新功能,使块主题用户能够从称为全局样式的用户界面自定义站点元素的外观。

可以从新的全局样式界面访问 样式 图标位于编辑器的右上角(另请参阅全局样式界面)。

单击该图标会显示一个新的 样式 侧边栏包括三个独立的面板:

  • 一个 预览 面板,显示您的自定义预览
  • 一个 全局样式 面板提供对特定控件组的访问 排版, 颜色, 和 布局
  • 一个 提供对块级样式设置的访问的项目
样式侧边栏
二十二中的样式侧边栏

二十二的调色板

颜色 面板可以帮助您编辑可用…

营销型WordPress外贸多语言独立站建设+谷歌SEO优化+谷歌关键字广告投放,就找WP花园!深圳公司,技术实力雄厚,用效果说话!详情咨询info@wordpresshy.com

海外社媒SNS代运营Tiktok代运营公司
Revive Old Posts