如何在 WordPress 编辑器中添加按钮 [教程]

如何在 WordPress 编辑器中添加按钮 [教程]

为什么 WordPress 按钮块如此重要?

网站导航对于访客和客户来说非常重要。我们要让他们从一个子页面进入下一个子页面。引导他们完成整个购物流程。因此,在页面内容中正确插入重要链接非常重要。

基本上,我们有两种选择。使用标准链接或按钮。至于何时使用前一个选项,何时使用后一个选项,则众说纷纭。通常在一个页面上会有多个可能的操作。我们需要确定哪个是主要操作,哪个是次要操作。我们建议您只将按钮用于主要操作。这样,主要操作的可见度就会更高。您将把访客的注意力集中到这一操作上。我们也可以称其为行动号召按钮。不要在一个子页面上创建太多按钮。

主要按钮有哪些功能?

  • 按钮可以引起游客的注意--行动号召
  • 它们可分隔页面或帖子内容,使其更易于阅读
  • 帮助确定页面方向。很多访客只能用眼睛直观地浏览页面
  • 使用超链接引导访客访问其他页面

决定按钮成功与否的参数有很多。例如,大小、位置或按钮颜色都很重要。必须遵循标准的用户界面和用户体验原则。绿色用于积极操作的按钮,例如购买。红色用于消极操作,例如取消订阅新闻通讯。正确设计的按钮会直接影响访客的操作。

在 WordPress 的任何页面或帖子上添加按钮

WordPress 5 之前的情况

在 WordPress 块编辑器发明之前,添加按钮是一个相当复杂的过程。因为 WordPress 并不具备这一功能。您可以使用带有页面生成器的主题或第三方插件。在这种情况下,简码可以创建按钮。

在我们的旧版 WordPress 主题中,您可以在可视化编辑器中使用简码添加按钮。点击插入简码 -> 按钮后,您可以在模式窗口中进行各种设置。文本、文本颜色、按钮颜色、url、对齐方式等。有了这些高级设置,您无需任何编程就能轻松快速地添加按钮。

通过简码添加按钮
在块编辑器发布前通过简码添加按钮

如何在 WordPress 编辑器中使用按钮区块?

多亏了 WordPress 5,才有了第二种方法。简单多了。WordPress 可视化编辑器带来了许多有用的区块。要在网站上创建按钮,您现在可以在编辑器中使用 WordPress 按钮块。

如何在 WordPress 编辑器中添加按钮的分步指南

1.首先需要确定插入按钮的位置
2.可通过多种方式添加按钮块:
- 点击顶部栏中的 "+",或块编辑器中选择 "按钮 "块的任何位置。

点击 "+"添加按钮
点击 "+"添加按钮块
通过搜索栏添加按钮
通过搜索栏添加按钮块
通过斜线添加按钮块
使用斜线"/"添加按钮块

- 您还可以使用搜索栏查找任何区块,只需写入 "按钮 "即可

- 键入"/",即可访问所有可用区块

3.创建的按钮模块可进一步配置

添加按钮文本和 URL 地址

一旦创建了 WordPress Block 按钮,您就可以在其中输入文字。请记住,对于行动号召按钮,最好使用简短的文字,并带有明确的信息。您可以将文字设置为粗体、斜体或下划线。所有这些更改都可以通过点击工具栏进行。您还可以将按钮靠边或居中排列。

按钮编辑
只需几秒钟,您就可以完全改变按钮的外观

按钮通常指向另一个页面或外部网站。因此,按钮下方有一个添加 URL 地址的输入框。这样做的好处是,添加 URL 无需选择文本。

更改按钮颜色

新的编辑器可让您在几秒钟内修改 WordPress 按钮块。只需使用右侧边栏中的设置即可。您可以更改按钮背景颜色或按钮内的文字颜色。有基本的预定义颜色,你也可以选择自己喜欢的颜色。所有更改都可以立即看到,以确定颜色组合是否合适。

更改按钮颜色
点击所选颜色后立即更改按钮颜色

最大的特点是,如果您选择了错误的组合,例如灰色背景和白色文本颜色,WordPress 块编辑器会警告您网站上的按钮无法阅读。

找到自己的纽扣风格

按钮样式选项
从工具栏或检查器设置中直接更改按钮样式

要想快速创建或更改按钮,您可以使用已准备好的样式。例如,按钮可以变为圆形、边框形或矩形。请尝试最适合您网站风格或设计的样式。

使用自定义 CSS 编辑按钮

使用自定义 CSS 类还可以实现更多自定义功能。这样,您就可以在 WordPress 编辑器中完全按照自己的意愿添加 CSS 样式和样式按钮。

自定义类别输入
插入自定义类来设计按钮样式

我们可以看到,有比使用按钮简码更简单的方法。WordPress 按钮块可用于任何兼容 WordPress 块编辑器的主题。了解更多关于我们全新的 Citadela WordPress 主题的信息。它是专为 WordPress 块编辑器设计和开发的。

最后的额外提示

不要忘记监控 WordPress 按钮块和按钮本身是否成功。如果使用 Google Analytics,您可以创建一个唯一的 URL。要跟踪访客的点击,您可以添加 谷歌 UTM 参数.可以使用 URL 生成器创建 URL。通过添加参数,您可以确定访问来源。如果您想知道访问者是从哪里进入您的购物页面的,这将非常有用。

您目前在使用 WordPress 按钮块时遇到的最大问题是什么?请在下面的评论中讨论。分享您在网站上使用按钮的经验。

4 对“How to add button in WordPress editor [tutorial]”的思考

  1. 感谢您分享本教程。能否请您指导我如何创建一个块模板?我正在使用这个资源 https://wpitech.com/create-wordpress-gutenberg-block-templates/ 进行同样的操作,但却出现了错误,而且前端出现了一些编程行。代码如下
    add_action( 'init', function() {
    $args = array(
    public' => true、
    'label' => '新闻'、
    show_in_rest' => true、
    模板锁定' => '全部'、
    模板' => array(
    array( 'core/paragraph', array(
    'placeholder' => '即时新闻'、

  2. 您知道是否有办法在不下载插件的情况下用按钮折叠内容?基本上,我使用的是 wordpress.com premium,而不是 business,所以下载插件并不是一个简单的选择。

    谢谢!

    1. 你好呀,

      感谢您的提问。您应该直接询问 wordpress.com 团队的支持人员,他们是否能提供一些解决方案来解决您的问题。致以最诚挚的问候!
      兹拉特科
      艾特团队

评论已关闭。