深入掌握 Gutenberg 编辑器：实用技巧与高级功能详解（03）

在本篇文章中，我们将继续深入探讨 WordPress 的 Gutenberg 编辑器，重点介绍一些高级功能和实用技巧，帮助你进一步提升内容创建的效率。从为 Block 添加锚点和自定义样式，到使用不同类型的重要 Block，我们将一步步解析这些功能如何帮助你实现更加灵活和专业的网页布局。无论你是想要打造更具吸引力的博客文章，还是优化页面的用户体验和 SEO，这篇指南都将为你提供宝贵的参考。

10，为Block添加锚点

什么是锚点？锚点是超链接的一种，比如在某篇博客中法国新星里萨谢成老鹰队史首位状元秀这个副标题标题，添加了2QKI3OHK锚点，当然锚点的名称，你安装自己的自定义来，不用和我一样，那么你打开https://xxx.com/博客主标题/#2QKI3OHK，不是文章内容的副标题，而是文章的主标题哦

步骤：选中需要添加锚点的Block，在 区块>高级设置>HTML锚点 中输入锚点名称，保存即可。（如下图）

11，自定义Block的CSS样式

由于 Block 中的预设样式可能无法完全满足我们的需求，喜欢 DIY 的用户可能需要通过 CSS 代码自定义样式。只需在“区块 > 高级设置 > 额外的 CSS 类”中添加 CSS 变量名即可实现自定义样式。（如下图）

12，几个重要的Block（几个不同类型的）这个是重点，记得区分

栏目（columns）

栏目中的框通常称为“列”，你可以将其他 Block 添加到这些列中，从而增加布局的多样性。栏目 Block 提供了几种默认的列数和列宽布局选项。例如，下图中的内容区域由两列组成，每列各占 50% 的宽度，再加上图片 Block、文字 Block 和按钮 Block 组合而成，实现了灵活的页面布局。（如下图）

当然，在选择了列数后，我们还可以手动添加新的列。只需将鼠标移到两个列之间，点击出现的黑色“+”号，就可以新增一列。建议通过左侧的结构列表选中相应的列，这样更容易准确定位和编辑目标 Block。然后，在右侧的设置栏中，你可以自由设置列的宽度。建议将单位调整为百分比（%），例如输入 30，就表示该列的宽度占浏览器窗口宽度的 30%，这样设置会更加直观。

2024090207495111
2024090207503066

然后添加你想要的Block到列里面即可。非常的直观

行（row）

插入“行”后，新增的 Block 会默认归入该行的分组中。行 Block 会根据内容自动调整布局，比如自动对齐不同段落的文字高度。

如果你选中行 Block，还可以在右侧面板中将方向改为纵向，这样布局就会恢复到像默认状态一样的堆叠排列。（如下图）

简码（shortcode)

有些插件可能不支持 Gutenberg Block，但它们提供短代码。你可以将短代码（格式为：[XXXX]）粘贴到编辑器中，这样插件的内容样式就会在前端展示，尽管在编辑页面中无法直接看到效果。但保持后，返回前端或者重新打开新页面查看，就能看到效果是否是你需要的

具体的简码查看你需要插件的页面，或者插件文档有提供

目录（table of content）

对于篇幅较长的文章来说，目录是一个重要的元素，有助于提升用户体验，同时也有利于 SEO。然而，WordPress 并没有内置目录 Block。不过在 Block 面板中，可以通过搜索 “table of content” 来找到推荐的相关插件，这是一个非常方便的功能。这些插件完全支持 Gutenberg Block，因此你可以挑选满意的目录插件，并像添加其他 Block 一样，将目录拖动到页面的相应位置即可。

文章设置

此部分均在右侧文章选项卡下完成操作。

可见性与发布时间设置
可以将文章设置为公开、私密和受密码保护这三种。

当文章更新过后，我们也应该修改发布时间，有利于SEO。

设置url（当前文章的链接）

在保存或发布文章/页面后，“固定链接”栏会出现一个“URL 别名”字段。你可以在其中输入你想要显示的 URL，然后重新保存或发布即可。

请注意，只有在文章/页面已经保存或发布后，才能自定义 URL。新建的文章/页面在未保存或发布前无法设置自定义 URL。

如上图我选择的是文章id也就是文章名字，故链接（url）是固定的，如果你要修改请在第一次保持前，修改文章的id（标题）

分类和标签

按照你实际需要设置好文章分类和标签，以便筛选，同时对SEO也更好，如下图，根据文章来

特色图片

选择尺寸，图片清晰合适的图片，要符合文章的主题，突出特点，因为这是展示在首页的第一印象

摘要

在博客列表页中显示的文章内容概要，尽量简洁、引人入胜。如上图所示。

总结

通过这篇深入的 Gutenberg 教程，相信你已经掌握了这些高级功能和实用技巧，现在可以更加灵活地编辑和优化你的页面和博客文章。Gutenberg 编辑器的强大之处在于其灵活性和可扩展性，能够帮助你轻松实现多样化的布局和设计需求。作为 WordPress 中最常用的写作和设计工具，熟练掌握这些技巧将大大提升你的内容创建效率。下一步，我们将正式开始探讨如何结合默认主题与 Gutenberg 实现更出色的页面排版，敬请期待！