WordPress 古腾堡编辑器中文字类区块使用说明

05/18/2025 更新
一条评论
网站建设
4339 字
4,855 阅读

文章目录

文章目录

1. 段落
2. 标题
3. 列表

3.1 有序列表举例

3.1.1 连续序号列表
3.1.2 断续序号列表

3.2 无序列表样板
3.3 多级列表举例

4. 引用
5. 代码
6. 预格式
7. 详细信息
8. 引文
9. 诗篇
10. 表格
11. 经典编辑器

默认情况下（WordPress 6.8.1+ Twenty Twenty-Five 主题），古腾堡编辑器包含多个区块类型，主要分为文字、媒体、设计、小工具、主题、嵌入和其他未分类区块等类别。每个类别中的区块都有其独特的功能，帮助用户更灵活地构建内容和页面布局，从而提高网站的互动性和视觉效果。

文字类区块是 WordPress 编辑器中最常用的一类，而其中的段落、标题和列表则是最基础和频繁使用的元素。比如，你现在正在阅读的这一行文字，就是一个段落区块的呈现。文字类区块共有 11 种，本文将介绍它们的基本功能，并重点探讨其中几个最常用的区块，结合它们的属性，详细阐述这些区块如何实现不同的效果与特性。

1. 段落

段落是文字内容的核心元素，也是大多数网站中最重要的组成部分。没有之一，它是你点击编辑区空白处时自动生成的默认区块。看似简单的段落区块，其实能通过多种方式进行个性化设置，今天我们就来看看它的样式展示。

例如，这段文字中，有些字是加粗的，而我用下划线标记了某些文字，或展现已~~弃用号码 91XXX~~。你也可以将文字设置为链接，指向一个具体的页面。此外，还有斜体、上标^Up、下标_Down等多种文本样式，轻松应对各种排版需求。

更进一步，你还可以设置文字的颜色和背景色，提升视觉效果。这些操作都可以通过跟随的工具栏完成，或者通过快捷键实现，帮助你在编辑过程中高效调整。这些样式通常已经在主题样式表或/wp-includes/css/dist/block-library/style.min.css中定义，具体使用过程中，可以根据自己喜好和站点风格进行二次调整。

当这些快捷属性设置已经无法满足你的需求时，不妨试试右侧的区块属性设置面板。在段落区块中，你可以进一步调整多种设置，包括文字颜色、排版样式、首字下沉效果，以及内外边距等。我随便改了一下，形成了本段的样式效果。这些更细致的定制选项能帮助你精确地控制段落的外观和布局，满足更高级的排版需求。

展开区块属性面板中的“高级”选项，你会看到“额外的 CSS 类”设置。这个选项允许你为当前区块定义一个特定的“类”，这是一个能被 CSS 样式表识别的标记。通过这种方式，你可以在主题样式表或其他地方编写更复杂的样式，从而实现个性化设计。

此外，还有 HTML 锚点设置，它允许你为区块指定一个锚点 ID。通过这个锚点，你可以在页面内实现类似目录跳转的功能，帮助用户快速定位到页面的特定位置。例如，我在本文的表格区块小标题处设置了锚点 ID："table"，并且为其添加了链接，你可以点击试试看，看看页面是如何直接跳转到该位置的。

2. 标题

标题区块指的是本页面中形如“1. XXX”或者“1.1 XXX”的行，它们通常独占一行，用于表示章节或小节的标题。标题区块有不同的级别，从 H1 到 H6，每个级别对应不同的字体大小和样式，用于构建页面的层级结构，帮助用户更清晰地理解内容的组织方式。我将在下文第 3. 节中展示标题层级。

合理的书写标题，并使用恰当的标题层级，不仅有助于提高用户的阅读体验，还能有效帮助 SEO（搜索引擎优化）。通过正确的标题层级，搜索引擎能够更好地理解页面内容的结构和重点，从而提升页面在搜索结果中的排名。此外，清晰的标题层级还可以让用户快速找到他们感兴趣的内容，增强网站的可用性和易用性。

3. 列表

WordPress 的列表区块可以方便地设置有序和无序列表，它们通常用于展示项目、步骤、要点等信息。无序列表通过圆点或其他符号标记每个项，而有序列表则通过数字或字母表示项的顺序。这些列表不仅帮助整理信息，也使得内容结构更加清晰，易于理解。用户可以轻松调整列表的层级和样式，以适应不同的内容展示需求。

3.1 有序列表举例

3.1.1 连续序号列表

选择合适的主题模板
安装并激活必要的插件
配置网站的基本设置

列表区块的属性允许设置列表编号的序号类型，用户可以选择数字、罗马数字、大小写英文字母等格式。同时，还可以设置起始值、倒序等选项，灵活满足不同排版需求。我建议有列表需求的文字段落都使用 WordPress 自带的列表样式，而不是手动录入序号，这样可以确保列表格式统一、易于编辑，并且方便以后进行修改或更新。使用列表区块还能保持内容的结构清晰，提升页面的可维护性和可读性。

3.1.2 断续序号列表

添加页面和创建菜单
撰写和发布首篇文章
定期更新网站内容和插件

3.2 无序列表样板

优化页面加载速度
增强网站的安全性
集成社交媒体分享按钮
定期备份网站数据
提供优质的用户体验

3.3 多级列表举例

选择合适的主题模板
安装并激活必要的插件
- 优化页面加载速度
- 增强网站的安全性
  - 集成社交媒体分享按钮
- 定期备份网站数据
- 提供优质的用户体验
配置网站的基本设置

除此之外，列表区块还支持对文本设置颜色、字号、内外边距等属性。关于这些常见的文本样式设置，我已经在段落区块章节进行了详细解释，因此在这里不再重复赘述。

4. 引用

北国风光，千里冰封，万里雪飘。望长城内外，惟余莽莽；大河上下，顿失滔滔。山舞银蛇，原驰蜡象，欲与天公试比高。须晴日，看红装素裹，分外妖娆。

江山如此多娇，引无数英雄竞折腰。惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。一代天骄，成吉思汗，只识弯弓射大雕。俱往矣，数风流人物，还看今朝。
——毛泽东《沁园春 · 雪》

引用区块是 WordPress 中用于突出显示引文、名言、诗句或其他重要内容的区块。它通常以独立的框架展示，帮助用户区分引用内容与正文，使其更加显眼，便于阅读和理解。通过引用区块，你可以清晰地展示外部来源或有价值的语句，增强文章的层次感和可读性。

比如这首伟人的诗，既说明了这段文字不是原创，又能让它在页面中凸显出来。值得一提的是，我页面中末尾的小字是通过选中区块，点击工具栏的引文图标（像笔尖），而非通过设置额外的 CSS 来实现的。其 HTML 结构是<cite>，这是一种语义化的标签，用于标识引用的来源。

5. 代码

代码区块是 WordPress 中用于显示代码内容的区块。它专门为开发者设计，可以以易于阅读和复制的格式展示代码。通过代码区块，用户可以确保代码的格式、缩进和特殊字符正确显示，避免与普通文本混淆。

在代码区块中，输入的代码会被格式化并保留原样，通常会使用等宽字体显示，并且背景颜色会有所不同，以便清晰地区分代码与其他内容。这对于教程、技术文章或编程相关的内容尤其重要，能够帮助读者方便地查看和复制代码。

// 将自定义字段 custom_head_code 的值输出到 <head></head>
function add_custom_code_in_head() {
    if (is_single() || is_page()) {
        global $post;
        $custom_head_code = get_post_meta($post->ID, 'custom_head_code', true);
        if (!empty($custom_head_code)) {
            echo $custom_head_code; 
        }
    }
}
add_action('wp_head', 'add_custom_code_in_head');

以上是本站的代码样式效果。这段代码用于添加自定义字段，方便我们在任何文章或页面中设定 CSS 或 JavaScript 代码。比如在本文中，如果你为某个区块设置了特定的 CLASS 属性，那么你可以非常简便地在编辑器底部的“自定义字段”中编辑相关的样式表。具体办法请见「什么是 WordPress 的自定义字段」。

这种方式的好处是，它不需要直接操作主题样式表，也不会影响站点的其他文章。通过自定义字段，你可以仅在特定页面或文章中应用个性化的样式或脚本，而不会改变全站的外观或功能，提供了更高的灵活性和安全性。

6. 预格式

预格式区块（Preformatted Block）是 WordPress 中的一种文本区块，专门用于展示预先格式化的文本内容。在这个区块中，所有的空格、换行符和缩进都会保留原样显示。因此，它特别适合展示代码、ASCII 艺术或任何需要精确格式的内容。值得一提的，代码区块和预格式并不仅限于展示编程代码或特定的文本，它也可以用于展示任何字符内容，不管是文本、符号还是特殊字符。

7. 详细信息

“详细信息区块”（Details Block）是 WordPress 中的一种交互式内容区块，通常用于显示可展开和折叠的内容。通过这种区块，用户可以隐藏一些细节或额外的信息，并允许访问者点击展开查看更多内容。这种方式可以帮助你在页面上保持内容的整洁，同时提供更多信息，供有兴趣的用户查看。

点我试试😁😁😁

8. 引文

引文区块（Quote Block）是 WordPress 中的一种专门用于展示引文、名言、诗句或其他引用内容的区块。它使得被引用的内容能够在页面中突出显示，通常采用特殊的格式和样式，使其与正文内容区分开来，从而吸引读者的注意力。

9. 诗篇

和预格式一样，展示一些有特定样式需求的内容，咱们可以修改前台 CSS 样式表具体化、个性化。

10. 表格

表格区块（Table Block）是 WordPress 中的一个用于插入和展示表格内容的区块。它允许用户轻松地创建表格，方便地组织和显示数据，适用于展示产品规格、比较信息、统计数据等内容。

产品名称	价格	颜色	尺寸
产品 A	¥199	红色	M
产品 B	¥299	蓝色	L
产品 C	¥399	绿色	XL

11. 经典编辑器

经典区块（Classic Block）照顾了老用户，如上图所示提供了一个传统的编辑体验，类似于经典编辑器中的文本输入方式。在“经典区块”中，你可以像使用旧版编辑器一样自由书写和格式化内容，同时保留对 HTML 源代码的访问。