WordPress Gutenberg 自定义字段教程:插件与手动方法全解析

WordPress2个月前发布 lyc054211
17 0 0

自定义字段是一个强大的功能,可以在 WordPress 中向帖子和页面添加额外的元数据。这种方式让你能够扩展网站的内容结构提供更多信息,比如作者简介、产品评分、评论或其他特定领域的内容。本文将详细讲解如何在 WordPress Gutenberg 网站中添加和显示自定义字段,涵盖插件方法和手动方法,并提供详细的步骤和技巧。

WordPress Gutenberg 自定义字段教程:插件与手动方法全解析

什么是 WordPress 中的自定义字段?

自定义字段,也称为元数据,可以为 WordPress 的每篇帖子或页面添加特定的附加信息。这些字段不仅可以在后台管理中存储额外的数据,还可以通过前端页面展示给访问者。

自定义字段的优势在于,可以根据不同的需求向内容中添加唯一的信息,而不用改变页面模板或结构。这对于特定行业和用途非常有帮助,例如电商、房地产、博客等。

使用插件创建自定义字段

对于大多数 WordPress 用户来说,使用插件是实现自定义字段功能的最简便方法。以 Advanced Custom Fields (ACF) 插件为例,它是最受欢迎的自定义字段插件之一。

步骤 1:安装并激活 ACF 插件

  1. 登录到 WordPress 仪表板。
  2. 转到 插件 > 添加新插件
  3. 在搜索框中输入 Advanced Custom Fields,找到插件后点击 安装激活
WordPress Gutenberg 自定义字段教程:插件与手动方法全解析

步骤 2:创建自定义字段组

  1. 激活插件后,在 WordPress 仪表板的菜单中看到 自定义字段 选项。点击它进入 ACF 插件设置。
WordPress Gutenberg 自定义字段教程:插件与手动方法全解析
  1. 在 ACF 界面中,点击 添加新 来创建一个新的字段组。
WordPress Gutenberg 自定义字段教程:插件与手动方法全解析
  1. 在字段组页面,输入组的名称和描述。根据需要创建多个字段。常见的字段类型有文本数字日期选择框等,可以通过下拉菜单选择适合的字段类型。
WordPress Gutenberg 自定义字段教程:插件与手动方法全解析
  1. 为每个字段指定标签、名称和默认值。标签是前端展示给用户的名称,而名称是该字段的内部标识。

WordPress Gutenberg 自定义字段教程:插件与手动方法全解析
WordPress Gutenberg 自定义字段教程:插件与手动方法全解析

  1. 添加多个字段:点击 + 添加字段 按钮,可以为字段组添加更多的自定义字段。

步骤 3:设置字段组位置规则

位置规则 选项卡中,可以设置字段组显示的位置规则。你可以控制自定义字段组仅在特定页面或文章中显示。

WordPress Gutenberg 自定义字段教程:插件与手动方法全解析

例如,设置规则 页面 - 等于 - 购物车,确保字段只在购物车模板的页面中出现。还可以选择更多的条件,例如根据类别、页面类型或自定义模板等显示字段组。

WordPress Gutenberg 自定义字段教程:插件与手动方法全解析

步骤 4:保存字段组

完成设置后,点击 保存更改 按钮,自定义字段组将保存并激活。

WordPress Gutenberg 自定义字段教程:插件与手动方法全解析

现在,已经成功创建了一个自定义字段组,接下来可以将这些字段应用到你的页面或帖子中。

如何在 Gutenberg 网站中使用自定义字段

创建了自定义字段,接下来的任务是将它们添加到 Gutenberg 编辑器中的内容中。在 Gutenberg 中,可以通过动态内容功能将自定义字段的值展示在页面中。

安装并启用 GutenKit 插件

  1. GutenKit 插件是一个针对 Gutenberg 编辑器的扩展,提供了更多功能,包括集成自定义字段。
  2. 安装并启用 GutenKit(Pro) 插件后,可以在 Gutenberg 编辑器中使用更多动态内容功能。
WordPress Gutenberg 自定义字段教程:插件与手动方法全解析

使用 GutenKit 添加自定义字段

  1. 创建或编辑一个页面或帖子,在 Gutenberg 编辑器中添加一个 GutenKit 标题块。
WordPress Gutenberg 自定义字段教程:插件与手动方法全解析
  1. 在块的设置面板中,点击 动态内容 图标(通常位于工具栏)。
WordPress Gutenberg 自定义字段教程:插件与手动方法全解析
  1. 选择 高级自定义字段 (ACF) 选项,系统将显示所有可用的字段组和字段。
WordPress Gutenberg 自定义字段教程:插件与手动方法全解析
  1. 从下拉列表中选择想要显示的字段,点击 应用格式

成功将自定义字段添加到 Gutenberg 页面中。通过这种方式,可以创建的自定义字段与页面内容动态关联,展示特定的元数据。

查看效果

保存页面后,可以预览你的页面,查看自定义字段是否正确显示。

手动配置自定义字段(不使用插件)

如果希望不使用插件,而是手动添加自定义字段到 Gutenberg 页面中,需要编辑主题文件。这种方法适合开发人员,但对于初学者来说,并不推荐,因为操作不当可能导致网站出错。

启用 WordPress 默认自定义字段

  1. 在编辑页面或文章时,点击右上角的 三点菜单(更多选项)。
WordPress Gutenberg 自定义字段教程:插件与手动方法全解析
  1. 选择 首选项,并在弹出窗口中启用 自定义字段 选项。
WordPress Gutenberg 自定义字段教程:插件与手动方法全解析
  1. 保存设置后,在编辑页面的下方看到自定义字段面板。

添加自定义字段

  1. 在自定义字段面板中,点击 添加自定义字段,输入字段名称和值。
  2. 如果需要多个字段,可以继续点击 添加自定义字段 按钮,添加更多字段。
WordPress Gutenberg 自定义字段教程:插件与手动方法全解析

显示自定义字段(手动)

  1. 打开你的主题文件夹,找到并编辑 functions.php 文件。
  2. 使用 get_post_meta() 函数从数据库中获取自定义字段的值。
  3. 在模板文件中,使用 echo 输出自定义字段的值。

例如:

<?php 
$value = get_post_meta(get_the_ID(), 'your_custom_field', true);
echo $value;
?>

这段代码会获取并显示当前文章或页面的 your_custom_field 字段的值。

WordPress Gutenberg 自定义字段教程:插件与手动方法全解析

常见问题解答

如何在不使用插件的情况下在 WordPress 中添加自定义元字段?

可以使用 add_meta_box()update_post_meta() 函数在 functions.php 文件中手动添加自定义字段。手动方法适用于有编码经验的开发人员,但对于大多数用户来说,插件方式更加简便。

如何在 WordPress 中添加自定义用户元字段?

与帖子或页面字段类似,可以通过插件(如 ACF)创建自定义用户字段,并通过位置规则将它们分配给特定用户角色。

如何向自定义字段添加多个值?

使用 ACF 插件时,可以在字段组中使用“和”条件来添加多个值,并在前端展示它们。

如何使用自定义字段显示侧边栏?

可以在 ACF 插件的字段组中选择将字段显示在侧边栏,并通过位置规则调整显示位置(ACF Pro)。

© 版权声明

相关文章

暂无评论

none
暂无评论...