如何在 WordPress 中创建自定义块

Blocks 提供了一种自定义内容和WordPress 网站外观的新方法。站点所有者可以使用这些块来添加和更改内容元素,例如段落、照片和小部件。

目前,WordPress 有超过 90 个默认的 WordPress 块。此外,与标准编辑器相比,古腾堡块编辑器提供了拖放功能和更好的内容可视化显示。
这种新的基于块的编辑策略提供了比经典编辑器更人性化的编辑体验和更多选择。如果您希望扩展基于块的编辑器的功能,WordPress 块插件可以添加更多的内容可能性。

在这篇文章中,我们将介绍您需要了解的有关 WordPress 自定义块的信息,包括:

  • WordPress 块概述
  • 为什么要使用自定义块?
  • 如何在 WordPress 中制作自定义块模板
  • 如何在您的网站上使用自定义 WordPress 块

WordPress 块概述

最新的 WordPress 版本提供了 90 多个块,分为六类:文本、媒体、设计、小部件、主题和嵌入。让我们回顾一下 WordPress 块编辑器中的所有块及其主要自定义选项。

文本块

您可以使用文本块将标题、段落和其他文本组件添加到内容中。一些最常见的文本块如下。

  • 段落
  • 标题
  • 列表
  • 引用
  • 引述
  • 经典的
  • 预格式化
  • 代码
  • 桌子

一些文本块还允许您以多种方式显示文本。例如,引号块可用于突出显示文本文档中的一段,表格块可用于轻松呈现和对比任何类型的数据。其他块,例如代码和预格式化,可让您突出显示代码片段。

媒体块

您可以使用媒体块将媒体库中的文件嵌入到您的内容中。有七个媒体块可用:

  • 图像
  • 画廊
  • 声音的
  • 覆盖
  • 文件
  • 媒体和文本
  • 视频

最常见的媒体块是图像和图库块。图库块可让您构建图像集合,而图像块一次仅显示一张图像。

设计块

设计块更改 WordPress 块编辑器中的内容布局。这种块类型不添加内容,但它会影响内容对访问者的显示方式。有八个可用的设计构建块:

  • 纽扣
  • 团体
  • 更多的
  • 分页符
  • 分隔器
  • 垫片

小部件块

小部件以块的形式提供,可以放置在页面的任何位置,包括页脚和侧边栏。Gutenberg 编辑器包括 12 个小部件块:

  • 档案
  • 日历
  • 类别
  • 自定义 HTML
  • 最新评论
  • 最新帖子
  • 页面列表
  • 订阅服务
  • 搜索
  • 短代码
  • 社交图标
  • 标签云

主题积木

与站点和主题设计相关的主题块。大多数主题块是动态的,显示站点上的帖子内容、查询循环和帖子评论等项目。网站徽标、网站标题和网站标语也是显示网站身份所必需的一些内容。可用的主题块是:

  • 导航
  • 网站标志
  • 网站标题
  • 网站标语
  • 标头
  • 页脚
  • 模板部分
  • 登录/退出

此外,还有一些块可以为其内容提取博客文章数据:

  • 帖子标题
  • 帖子摘录
  • 发布精选图片
  • 发布内容
  • 文章作者
  • 发布日期
  • 帖子类别
  • 发布标签
  • 下一篇
  • 上一篇

嵌入块

通过简单地复制和粘贴 URL,新的块编辑器使包含外部材料变得简单。例如,有一个特定部分用于嵌入 YouTube 视频。WordPress 提供了一些嵌入块:

  • 推特
  • YouTube
  • 视频
  • Spotify 音乐
  • 声云
  • 平特雷斯特

如果找不到正确的平台,请使用嵌入区域并粘贴 URL 来嵌入媒体。

为什么要使用自定义块?

旧的 WordPress 编辑器(也称为“经典”编辑器)是基于 TinyMCE 的文本编辑器。没有提供页面或帖子预览的视觉功能,因此界面类似于文本编辑程序。
借助当今 WordPress 附带的块编辑器,您可以通过将内容和布局组件添加为块来快速轻松地构建帖子和页面。一般来说,使用新的 WordPress 编辑器编辑材料会更容易。此外,它还为新用户提供了一个更加人性化的 WordPress 学习平台。
WordPress 默认包含一些常用的块。WordPress 插件也可能包含它们自己的块以供使用。但是,有时您可能想要设计自己的自定义块来做一些对您有用的独特事情。

如何在 WordPress 中制作自定义块模板

可以通过以下两种方式之一来制作自定义 WordPress 块模板。请记住,这两种方法都需要一些 WordPress 开发知识。

注册古腾堡块

第一种方法需要开发可用于创建预填充块的自定义 WordPress 块模板。将以下代码添加到您站点的 functions.php 文件中:

  • core/paragraph :数组参数控制块的内容。
  • core/image:可以通过数组参数上传图片。您可以通过三种方式上传图像:直接上传、从媒体库上传或嵌入 URL。
  • Show_in_rest:根据告诉 WordPress 核心的参数,应该能够使用 WordPress REST API 检索此自定义块。
  • Template_lock:当它被设置为“all”时,这个参数阻止自定义块被添加到模板或从模板中删除。

以下是自定义古腾堡块模板在使用时的显示方式:

创建古腾堡插件

该插件的位置将位于 wp-content/plugins 目录中,该目录包含网站上安装的每个插件的单独文件夹。
要创建 Gutenberg 插件,请转到 wp-content/plugins 目录并为插件创建一个新文件夹。该文件夹的名称应与自定义古腾堡模板插件的名称相同。本文中的插件名称为“My custom blocks”,文件夹名称为“custom-blocks”。
在此文件夹中创建一个名为 custom_blocks.php 的文件,并向其中添加以下代码:

您可以根据您的要求更改上述详细信息。安装后,此插件将添加到可用插件列表中:

如何在您的网站上使用自定义 WordPress 块

默认情况下,WordPress 使用古腾堡块编辑器来创建帖子和页面。使用基于块的主题时,块编辑器也可用于完整的站点编辑。
当您添加新的博客文章或页面时,编辑器会自动包含一个段落块,以便您可以立即开始写作。当您按 Enter 时,段落块将成为默认的新块,从而简化了编写过程。
内容区域中的加号 (+) 按钮也可用于添加新块。六个最近的块和一个搜索栏将显示在一个小弹出窗口中。使用搜索栏查找自定义块,然后单击它以将其添加到内容中。

也可以通过选择屏幕左上角的加号 (+) 来访问块插入器。所有可用的块都将显示在左侧的新面板中。
要找到所需的选项,请使用搜索栏。然后可以通过单击将块添加到内容中。

WordPress 块编辑器包括用于重新排列块的拖放功能。选择任何块,单击其工具栏上的拖动图标,然后将其放到您想要的位置。或者,使用块的工具栏向上和向下箭头。

不同的工具可用于配置 WordPress 内容块。选择一个块并通过单击屏幕右上角的设置按钮打开块设置面板以对其进行配置。

自定义 WordPress 块的底线

现在您知道如何在您的网站上使用 WordPress 块,以及如何创建自定义块。这只是任何人都可以使用具有几乎无限定制潜力的开源平台的另一种方式。
当您着手自定义您的 WordPress 网站时,请考虑使用针对 WordPress 优化的完全托管托管服务提供商,例如Nexcess。针对 WordPress 优化的主机可帮助您充分利用平台必须提供的一切,同时提供专门的客户支持、高级缓存等。这样您的网站就会得到妥善处理,因此您可以专注于创建自定义 WordPress 块,或您网站需要的任何其他内容。

Anna
Anna

免费订阅

每周收到精心编写的运营指南与成功案例分析,助力您的业务持续增长

留下评论

您的邮箱地址不会被公开。 必填项已用 * 标注