使用按钮区块可以为您的页面或文章添加一个或多个按钮。此区块自 WordPress 5.4 版本起可用,当时按钮区块已被弃用。

要将按钮区块添加到页面,请点击添加区块按钮打开区块插入器弹出窗口并选择按钮区块。

您也可以使用键盘快捷键/buttons快速插入按钮区块。
按钮区块默认带有一个独立的按钮区块。您可以自定义此按钮的文本、链接和样式。要添加更多按钮,请点击按钮区块右下角的加号添加区块按钮,一个新按钮将出现。请注意,新按钮将遵循现有按钮的相同样式。

区块工具栏
要查看区块工具栏,请点击区块,工具栏就会显示出来。
每个区块都附带独特的工具栏图标和区块特有的用户控件,让您可以在编辑器中直接操作区块。按钮区块包含一个用于单个按钮的工具栏以及一个用于整个区块的工具栏。
针对整个区块

整个区块的主工具栏包含以下按钮:
- 转换为
- 拖动图标
- 移动箭头
- 更改项目对齐方式
- 更改垂直对齐方式
- 对齐
- 选项
转换为

点击“转换”按钮,可以将按钮区块转换为“分组”或“栏”区块。
拖动图标

要将区块拖放到页面模板上的新位置,请点击并按住点状矩形,然后将其拖到新位置。蓝色分隔线指示区块将放置的位置。找到放置区块的新位置后,松开鼠标左键。
移动箭头

上下箭头图标可用于在页面上上下移动区块。
更改项目对齐方式

项目对齐设置允许将按钮左对齐、居中对齐或右对齐。还有一个选项是“项目之间留白”。如果选中此选项,按钮区块将居中,按钮之间留有等距空隙。

更改垂直对齐方式

使用更改垂直对齐选项可将按钮垂直对齐,共有四种可能选项:
- 顶端对齐
- 中间对齐
- 底部对齐
- 拉伸填充
对齐

使用对齐工具对齐按钮区块。选择以下选项之一:
- 无 – 保持块的当前大小。
- 宽幅 – 将区块宽度超出内容尺寸。
- 全宽 – 将区块扩展以覆盖屏幕的整个宽度。
“宽幅”和“全宽”对齐设置必须由您的 WordPress 主题启用。
选项
区块工具栏上的“选项”按钮为您提供了更多自定义区块的功能。

针对单个按钮

如果您选择一个特定按钮,将出现一个新工具栏,其中包含这些新选项:
- 更改区块样式
- 链接
- 粗体
- 斜体
- 更多富文本控制
- 选项
更改区块样式

使用更改区块样式选项可以更改特定按钮的样式。
链接

使用链接选项为按钮添加链接。您还可以设置在新标签页中打开链接。
粗体

您可以选择按钮区块中的文本,并使用“粗体”选项或键盘上的“Ctrl+B”/“Cmd+B”将其设为粗体,这通常比周围的文本更重。
斜体

您可以选择按钮区块中的文本,并使用“斜体”选项或键盘上的“Ctrl+I”/“Cmd+I”将其设为斜体,这通常看起来向右倾斜。
更多富文本选项
更多选项菜单左侧的下拉菜单包含一系列额外的富文本编辑选项,例如高亮、行内代码、删除线等。
选项

区块工具栏上的“选项”按钮为您提供了更多自定义特定按钮的功能。
区块设置
区块设置面板包含区块特有的自定义选项。要打开它,请选择区块并点击“发布”按钮旁边的设置按钮。

当整个按钮区块被选中时,您有布局、排版、尺寸和高级自定义设置。
针对整个区块
当整个按钮区块被选中时,您可以进行布局、尺寸和高级设置来自定义。
布局
按钮区块提供布局设置,可更改项目对齐方式和方向。

当从按钮区块中选择特定按钮时,您拥有样式、宽度、颜色、排版、尺寸、边框和高级自定义设置。
颜色
按钮区块提供颜色设置选项,以更改文本和背景颜色。

排版
按钮区块提供排版设置,用于更改字体系列、字号、外观、行高、字母大小写、字母间距和装饰。
尺寸
按钮区块提供尺寸设置选项,用于更改内边距和外边距大小。
边框
边框设置提供选项来控制按钮每一侧的宽度和半径。

针对单个按钮
样式设置
可以更改单个按钮的样式。将鼠标悬停在特定样式上以查看其外观。

宽度设置

按钮区块内的每个按钮都可以根据百分比值拥有自己的宽度设置。
高级设置

您可以为区块中的每个按钮添加一个链接 rel 属性。这是一项更高级的功能,可以控制按钮链接的rel
属性。rel
属性定义了链接资源与按钮之间的关系。例如,rel 属性有nofollow
、external、stylesheet、pingback、preload、prefetch、prev等。
您还可以为区块中的每个按钮添加 HTML 锚点和 CSS 类。
HTML 锚点允许您为单个按钮创建一个唯一的网址。然后,您就可以直接链接到页面上的该按钮。
附加 CSS 类允许您为按钮添加 CSS 类,从而可以编写自定义 CSS 并根据需要设置按钮样式。
根据您为按钮区块选择的样式,WordPress 会自动为该按钮区块添加一个 CSS 类。您可以在“高级”设置面板的“附加 CSS 类”下找到该类。您还可以添加多个用空格分隔的附加类。
更新日志
- 更新于 2023-11-21
- 更新了 6.4 版本的截图
- 更新于 2023-11-11
- 更新标题为句首字母大写
- 更新于 2023-06-09
- 将“更多富文本选项”部分替换为简短摘要,链接到新的富文本编辑选项专用页面。
- 更新日期:2023-03-07
- 修订了整篇文章的格式
- 为 6.2 版本更新了内容和所有截图
- 更新于2022-11-22
- 更改图像对齐方式
- 替换了冗余内容
- 更新于 2022-08-18
- 为 6.0 版本更新了内容、截图和视频。
- 增加了添加独立按钮和样式保留的解释。
- 新增区块工具栏选项。
- 增加了项目之间间距和垂直对齐的图片和信息。
- 添加了区块设置侧边栏信息的详细内容。
- 更新了单个按钮区块的更多选项信息。
- 移除了单个按钮区块工具栏中的文本颜色。
- 为图片添加了 ALT 标签。
- 更新于 2022-02-15
- 已更新截图至5.9版
- 视频更新至 5.9
- 添加了先前版本的新设置
- 添加了实时示例
这篇文章有帮助吗?如何改进?
登录提交反馈。如果您需要本文未涵盖的支持,请在支持论坛中提出您的问题。