您不知道可以使用高级自定义字段做的 7 件事

已发表: 2023-04-09

高级自定义字段 (ACF) 几乎是 WordPress 开发的代名词。 这个插件为超过 450 万个站点提供支持，帮助 WordPress 发展到新的高度。 你知道插件。 您可能已经使用该插件进行构建。 但你是否充分利用了它？

在本次会议中，我们将快速了解一些鲜为人知的方法，您可以利用 ACF 来构建您迄今为止最动态、最强大和最引人入胜的 WordPress 体验。

视频：您不知道可以使用高级自定义字段做的 7 件事

演讲嘉宾：

  • WP Engine 高级产品经理 Iain Poulson
  • WP Engine 产品营销经理 Rob Stinson

会议幻灯片：

7 件你不知道的事，你可以用高级自定义字段做这些事下载

成绩单：

Iain Poulson：大家好，欢迎来到我们关于高级自定义字段插件的会议。 我是 WP Engine 的 ACF 产品经理 Iain Poulson，我们的产品营销经理 Rob Stinson 也加入了我的行列。 今天，我们将带您快速完成七件您不知道可以使用高级自定义字段插件完成的事情，一些是相当新的，一些是鲜为人知的。 我们将以 Rob 设计的一个虚构网站为中心的功能，所以我们基本上是真实示例的粉丝，而不是抽象的东西，但我们也是电影的忠实粉丝。

所以这个网站是为了庆祝电影的最佳时期，可以说，可能是 90 年代的电影，所以这个网站的基础是表彰和奖励 90 年代最受欢迎和最受欢迎的电影。 该网站需要展示电影并允许用户投票选出他们最喜欢的电影，并且以真正的 Rob 风格，该网站看起来很棒。 那么让我们开始吧，从头开始，安装 ACF。 告诉我怎么做，罗伯。

ROB Stinson：很好，谢谢，Iain。 是的，谢谢，伙计。 它看起来确实不错，不是吗？ 设计它花了很多时间，玩得很开心。 所以我们赢得了合同。 我们已经有了这个项目，我们正在开始，我们做的第一件事就是如果它确定，这首先对 ACF 有意义。 我们将需要为一些自定义帖子类型设置一大堆自定义字段，并做一些有趣的模板和类似的事情。 ACF 是这里工作的工具。 所以当然，我们首先需要安装 ACF，这是这里的第一位。 所以通常我们知道您可以将插件作为 zip 文件获取，然后将其上传到 WordPress 管理员，既简单又好用。

这是安装插件的标准方式，但我们也知道如今的开发人员喜欢以稍微不同的方式管理他们的依赖项。 我通常喜欢在代码中管理它，在 PHP 世界中，这通常是使用 Composer 完成的。 现在，您已经能够使用 Composer 从 WordPress.org 存储库轻松安装 WordPress 插件一段时间了，但是使用 ACF Pro 等高级插件安装起来有点困难。

但是几周前的最新版本，实际上，大约一个月前，我们实际上已经启用了通过 Composer 安装 ACL Pro 的能力，这太棒了，所以我们现在就去做。 那么如何做到这一点，第一步，您需要将 ACF Pro Composer Repo URL 添加到您的 composer.JSON 文件中。 第二步是，你要为你的凭据创建一个 auth.JSON 文件，你要把它放在项目的根目录中，既在本地，也在我们部署到的地方和该文件所需的凭据现在可在 advancedcustomfields.com 上的帐户区域中获得。

所以如果你登录，你会看到一个许可证区域，还有一些额外的选项卡和类似的东西，你实际上可以获取整个代码块，复制并粘贴整个内容，或者你可以获取个人用户名和密码，并将其带到您创建的文件 auth.JSON 文件中。

第三步，我们运行 Composer 命令，这很好也很简单，一个 3 步的过程，但是很棒，因为这意味着，就像我说的，喜欢的开发人员可以对如何进行更精细的控制他们管理他们项目的依赖关系，你现在可以使用 ACF Pro 来做到这一点，这太棒了。 当然还有更多关于它的文档，所以只是为了更深入地了解它是如何解压的，跳转到网站上的文档，你应该可以开始了。 太棒了，我要放弃第二名的伊恩。

Iain Poulson：好的，现在让我们谈谈为站点设置数据。 所以自定义帖子类型，它们在 WordPress 中非常基础，可以帮助您构建不仅仅是帖子或页面的网站。 这是自定义帖子类型功能，无论 WordPress 版本如何将其转变为合适的 CMS，这通常是开发人员在构建网站时要做的第一步。 这一直是 ACF 之外发生的事情。 从历史上看，您要么使用代码注册帖子类型，要么使用另一个插件来执行此操作，但这是与 ACF 连接得很好的旅程的一部分。 因此，作为 ACF 6.1 的一部分，该功能将出现在插件中，因此它是旅程的自然起点。

你想用数据结构数据构建一个站点，你将构建一个帖子类型。 您将向其中添加字段，然后您可能会添加一些分类法，然后开始编辑该数据。 所以，是的，这就是我们在 6.1 中加入的东西，在 CMS 中拥有完整的构建流程是非常令人兴奋的。 因此，让我们寻找 VHS 颁奖网站。 我们将需要构建我们的数据并让 WordPress 做我们需要它做的事情，所以在帖子类型方面，因为我们不想使用帖子和页面，我们将创建一个自定义帖子电影类型，用于存储电影数据、数据对象或数据模型，但显然在 WordPress 术语中，这是自定义帖子类型。

我们想用分类法对电影进行分类，这样我们就可以让用户轻松地看到一种类型的电影，然后你会得到简单的前端查看，简单的 URL 允许你访问某些类型的电影流派。 我们将需要一些额外的字段来存储电影周围的结构化数据，因此我们希望，例如，导演是一个文本字段。 我们需要电影上映的年份，我们需要某种形式的关系来将电影相互关联，当然，我们需要存储它将获得的票数，那就是数字字段。

那么让我们快速浏览一下 ACF 6.1 我们将如何做到这一点。 这是 ACF 6.1 屏幕，您会注意到略有不同，我们在侧边栏上有菜单。 现在是 ACF，不仅仅是自定义字段，这是帖子类型屏幕。 所以这只是我设置电影帖子类型。 这是这里最简单的工作流程，只需为帖子类型添加一个单数标签，即电影，复数标签，它会自动生成帖子类型键。 公共设置默认设置为打开，因为我希望它在前端、帖子类型中可见，并且我希望能够在管理员中对其进行编辑。

所以一旦保存并添加，这里与 ACF 的连接的好处是旅程的下一步是我们已经创建了帖子类型，我们是想向帖子类型添加字段，还是我们想要将现有字段链接到帖子类型，或创建分类法？ 所以我们可以从这里开始做所有这些，所以很明显我们确实需要去添加这些字段。 好的，所以单击该通知以将新字段添加到电影帖子类型，我们得到字段组编辑器，它已预先填充在设置 Metabox 的底部。

所以位置规则已经设置好，显示这些字段，当你编辑电影的帖子类型时，然后你可以继续添加你的字段，我已经在屏幕截图中完成了。 所以我们有导演、年份、票数和相关电影。 然后当然，我们可以注册我们谈到的自定义分类法，添加流派，并将流派分类法连接到电影的帖子类型。 但是这些是我们添加的附加到电影对象的字段，但是我们需要存储可能更全局或站点范围的数据的字段呢？ 罗伯，我们有什么用？

Rob Stinson：太好了，谢谢 Iain，看起来不错。 我们的内容模型进展顺利，但我们还没有完成。 现在我们已经介绍了通过 Composer 安装 ACF Pro，我们只查看了 ACF 中的自定义帖子类型和自定义分类法。 现在这两件事非常非常新鲜，但我现在想说的第三件事是老歌，但很好听。 所以它已经在插件中存在了很多年，但并不是每个人都知道它，也不是每个人都完全理解它的价值，所以我们现在要通过选项页面查看全局字段。

现在通常，您会考虑自定义字段以及它如何存储特定帖子、页面或自定义帖子类型的数据。 但有时我们需要存储与站点范围相关的数据，在我们精彩的 VHS 奖励网站上，一个很好的例子就是这种顶部通知或促销栏。 这是一个我们希望在网站主页的每个页面上都保留的栏，你去电影页面，它就在那里。 你转到“关于”页面、“联系”页面或“博客”页面，无论用户导航到哪里，这个小栏都会横跨整个网站，因此将相关数据与帖子或帖子相关联是没有意义的电影。

它应该与网站相关联。 所以我们希望能够打开和关闭此栏，因为我们想要进行设置，但也许我们想要在一年中的特定时间打开它。 我们可能有一个特定的促销或活动，所以我们希望能够有一个布尔字段，这样我们就可以打开和关闭这个东西。 此外，我们希望能够更新被调用操作本身或按钮中的文本，因此自定义字段当然对此很有意义。

现在要设置一个选项页面，这是 ACF 中允许我们执行此操作的功能，第一步通常是在您的函数中，.PHP 文件中，或者您当然可以在其他地方注册它，也许是您正在开发的插件。 但是您要注册选项页面本身，您可以在设置中进行一些小配置。 你可以有一个选项页面，但实际上你也可以有多个，你可以让它们嵌套，所以子页面，或父页面等等，所以你可以做有趣的事情。

对于我们来说，我们的非常简单。 我们只是在这里设置一个通知栏，所以我们只需要单个页面，所以第一步是注册该选项页面。 第二步，像往常一样，我们将创建一个字段组。 我们称之为促销栏字段，或类似的东西，或通知栏字段，你可以看到我在顶部有我的布尔字段，所以 true 或 false 是活动的促销栏。 然后我有一个用于消息的文本字段，一个用于按钮文本的文本字段，一个用于按钮链接的 URL 字段，然后我们可能还有一个通知类型，但也许我们想要警报或促销风格通知，也许我们会根据那里选择的任何一个来做一些有趣的条件样式。

所以我们添加我们的字段组，然后我们添加我们的字段，第三步就在它下面。 如您所知，在位置规则中，我们现在可以选择选项页面等于——您会看到我在那里的站点设置——这是我在第一步中注册的选项页面。 完成所有这些后，现在我们在 WordPress 管理中看到左侧，在我们的管理栏中我们有站点设置，我们单击它，我们会看到所有字段，正如我们所期望的那样。

我们可以打开或关闭通知栏。 我们可以更新文本，更新按钮，然后这些数据将可用于我们的模板，因此选项页面中数据字段的模板体验与您在其他情况下所做的大致相同。 关于您如何具体定位这是一个选项页面而不是帖子这一事实，有一些细微差别，但跳转到 advancedcustomfields.com 上的文档，它会引导您完成如何处理它。 第四，我会把它还给你，伊恩。

伊恩·波尔森：谢谢，罗布，是的。 我现在只想谈谈我们如何以编程方式使用 ACF 注册字段。 因此，使用 Field Editor 用户界面在 ACF 中创建字段非常容易，这是我们熟悉和喜爱的东西，我们之前已经看到过，但还有其他定义字段的方法。 ACF 允许我们导出带有字段定义的 JSON 和 PHP 文件，这些文件可用于创建字段。

但是您知道吗，实际上，在 ACF 社区中有一个名为 ACF 构建器的程序包，它允许您使用一种带有 PHP 代码的流畅 API 来创建字段？ 它实际上是一个第三方包，它被称为 StoutLogic 的 ACF Builder 包。 是的，GitHub 链接在那里。 基本上，它允许您直接从代码创建字段，而无需了解 ACF 如何在 PHP 中需要字段数据的复杂性。 它使用了一种非常有表现力的方式来做到这一点。 它使它可重复使用和便携。

您可以提交字段定义，因为将 PHP 文件添加到您的版本控制中，协作起来很容易。 很容易发送到你的部署机制，你也可以拿走 Field Group 编辑器 UI，所以你在代码中定义这些字段，然后阻止客户端接触 UI，所以让我们快速看看我们是如何做吧。 要安装它，因为它是一个包——我们之前已经讨论过 Composer。 这是一个 Composer 包，您可以使用以下命令安装它，Composer acquire StartLogic、vendor、ACF Builder，然后这就是代码的样子。

您在某种程度上实例化了 Fields Builder 的实例，并为它提供了字段组的 slug。 然后你说，在这个字段组中，让我们添加一个名为 Director 的文本字段。 让我们添加一个名为 Year 的数字字段，然后重要的是，我们将设置字段组的位置以显示在电影的帖子类型上。

所有这一切都为您做了很多事情，您无需考虑它，因此您为它指定字段标签的导演名称，它会继续，显然，无需您补充一点，这样就省去了很多打字、很多思考和很多容易出错的创作。 然后第二部分是您将该字段定义加载到 ACF 中，它将为您构建字段组。

Rob Stinson：好吧，这里是第 5 个，双向关系。 现在，这很有趣。 我想我记得我在代理机构工作的那一天从事的这个特定项目，我实际上已经弄清楚了这一点，它有点改变了游戏规则。 所以如果这不是你以前用 ACF 做过的事情，请注意，因为这是一个非常有用的东西，所以让我们看一个例子。 当然，看看我们的 VHS 颁奖网站，我们有大约 100 部电影的花名册，显然，有不同的方式将这些东西联系起来。

我们之前有我们的流派自定义分类法。 我们可能有几个不同的字段来处理诸如标签或分组之类的事情，因此当您想在两个帖子之间创建特定类型的双向连接时，双向关系很有用，或者在我们的例子中，是两部电影。 所以对于我们的例子，假设我们的数据库中有这三部电影，它们都是动画片，所以我们想与它们建立双向关系。

现在这意味着我们在这里有了我们的第一部电影，“玩具总动员”，一部很棒的电影，我们确定还有另外两部我们想要关联的相关电影。 所以我们可以为我们的自定义帖子类型（电影）创建一个关系字段，我们会在那里有一个关系字段，我们会选择电影“狮子王”和莫农王子——我很抱歉。 我一直被这个词绊倒。 我正在屠杀它，但这部电影叫做“幽灵公主”。 哈，哈，哈。 请不要恨我。 出于某种原因，我只是在努力发音这个词。

并且我们确定这两部电影是相关的，因此我们从 Relationship Field 中选择它们。 现在在这种情况下，是的，例如，“狮子王”与“玩具总动员”相关，因此“玩具总动员”与“狮子王”相关。 所以也许通常我们会转到“狮子王”编辑屏幕，然后我们会找到“玩具总动员”，然后将其添加到那里，但我们正在那里加倍工作。 所以双向关系的作用是自动为我们创建连接，这真的非常有用。

因此，例如，一旦我们将“狮子王”添加到“玩具总动员”，“玩具总动员”就会自动添加到“狮子王”，这真的非常有用。 它为内容创建者和内容管理者节省了大量时间。 它降低了忘记的风险，或者您可能会从一个帖子中删除一个，然后忘记从另一个帖子中删除它。 它真的非常简化了内容编辑体验，因此是一个非常有用的东西，尤其是在像这样的有趣网站上。 那我们该怎么做呢？ 好吧，目前有两种方法可以做到这一点，我会谈谈第三种方法，也许，它会在今年晚些时候出现。

所以它是如何完成的，第一，你可以在代码中做到这一点。 因此，只需安装 ACF Pro 插件，您就可以编写代码来执行此操作。 你可以编写一个挂钩到 ACF 更新值过滤器的函数，这个过滤器在保存值之前运行，基本上它所做的是，它获取你正在编辑的当前帖子，并识别帖子的帖子 ID已添加，然后更新另一篇文章，并在后台为您进行那种匹配，非常有用。

一些代码，所以只要您对此感到满意，就不会太繁重。 但同样，那里有一个链接或一个 URL，您可以在高级自定义字段文档中查看该链接以了解如何执行此操作。 不过，选项二是没有代码，这在某些时候是一种不错的选择。 所以这其实是一个叫做ACF Extended的生态系统插件。 它在 WordPress.org 上可用，它所做的只是将该功能引入 ACF UI 本身。

所以如果你已经安装了这个扩展，ACF Extended，并且你已经安装了 ACF Pro，你会看到一个选项，当你创建一个关系字段时，有一个你可以打开的双向切换，然后你可以从 UI 中将其建立到集合中，这非常方便。 现在这个项目的进展非常有趣，但我们不要为此失去理智，或者我们应该这样做吗？ 伊恩，交给你了。

Iain Poulson：是的，谢谢 Rob。 在谈到 ACF 时，值得一提的是 headless。 ACF 有无头支持，所以是的，底层无头站点，站点的解耦性质。 有很多 API 通信正在进行，ACF 有 API 支持。 我们从 5.11 或 5.11 开始将 REST API 本机添加到 ACF 中，并且我们通过 WP GraphQL 插件支持 GraphQL，该插件具有用于 WP GraphQL 的 ACF 附加组件，因此 ACF 支持无头站点。 它与适用于无头 WordPress 站点的 WP Engine Atlas 程序集成，但我们只讨论一个真实世界的示例，说明如何获取我们的 VHS WordPress 站点中的数据，并以分离的方式使用它。

因此，例如——听我说完——人们基本上是在 VHS 颁奖网站上投票，他们将是——我想我们设定了一个任意日期——他们必须在特定日期结束前投票，我们看看什么是最受欢迎的。 我们有我们当地的电影院，它正在制作票数最高的 90 年代电影的双重票据。 所以他们有，在电影院，他们有他们的广告牌，而且是在线的。 它连接到网络，我们可以动态地支持广告牌上显示的内容，因此我们需要连接到我们的 WordPress 网站。

例如，广告牌是一个简单的节点应用程序，我们需要从 VHS 站点获取数据，所以让我们快速看一下我们如何使用自定义 REST API 端点来实现这一点，正如我之前所说，我们已经获得了 GraphQL 支持。 这两种方式都可以完成，但这可能是一个更简单的示例。 所以首先，我们将创建一个基本上获取我们需要的数据的函数，所以只是通过这个，它是一个 WP 查询，它说，我想要电影，或者发布一种类型的电影，但我只想要两个但是我也想按ACF字段来排序，也就是字段名是votes，我们是降序排序，所以要排在前面，排在前面二。

接下来，我们将创建一个自定义 REST 端点，它使用我们在上一张幻灯片中创建的回调函数，这只是给我们一个端点，我们可以点击它来获取两部电影。 所以这实际上看起来像什么——这只是测试——所以 URL 是 vhsawards.com，WP-JSON，然后我们给它一个 VHS 版本 1 的命名空间，以防我们想要更改 API，并且我们刚刚得到一个非常简单的 popular URL 结构。

这只是返回一个包含两个项目的 JSON 对象，前两个投票的项目恰好是“搏击俱乐部”和“好家伙”，它们非常好，是的。 这绝对很好地展示了 ACF 如何为解耦和无头站点提供支持，但目前很难不提及块就谈论 WordPress。 我不敢相信我们已经走到这一步了，甚至没有提到块。 Rob，你对我们有什么改变呢？

Rob Stinson：我们绝对需要谈谈区块。 在我这样做之前，我意识到就在我们讨论双向关系的第五个问题之前，我暗示了第三种方法。 我没有介绍它，所以我想说的是关注这个空间，因为我们正在计划，我们在路线图上，看看在插件本身中添加更好的双向关系支持，这样你就可以促进这些东西ACF 插件内不需要第三方的东西，所以只看这个空间，不承诺时间。 这是我们正在研究的事情。

所以第七，是的。 让我们看看使用 ACF 创建自定义块。 现在大多数人都知道你现在可以在 ACF 中做到这一点，但不一定每个人都尝试过。 因此，如果您在那个阵营并且是 ACF 的长期用户，并且您现在还没有使用自定义块功能，请观看此视频，因为它可能会提示您看到此功能的价值。 但是我们如何将它用于 VHS 奖呢？ 也许我们想为我们的站点提供一个块组件，我们可以在不同的地方添加它，这就是自定义块或任何块的美妙之处在于它可以在整个站点的页面和帖子上使用和放置，我们想要创建自定义号召性用语块。

现在这是一个非常简单的块，您绝对可以使用自定义块做更多有趣的事情。 我们现在将保持简单。 但是这个蓝色横幅，调用操作块，我们希望能够放置在主页上，或者可能放在一些博客文章和类似的东西上，鼓励读者和网站访问者点击那个按钮，然后通过，然后投票选出他们最喜欢的 90 年代电影。 那么我们如何使用 ACF 构建这个自定义块呢？ 我们将其作为自定义块来做的原因是它具有独特的设计。

对于这个重复的点图案，它有这个有趣的背景渐变，我们意识到我们更容易将它构建为具有微调控制的自定义块，而不是我们可以用关闭的块做的事情架子与 WordPress 核心。 那么我们该怎么做呢？ 第一步是我们注册我们的自定义块，通常在 functions.PHP 中，或者在您编写此类代码的任何地方。 很好很简单，我们指向模板文件最终将用于我们的自定义块的目录，所以这是第一步。

第二步，我们创建我们的字段组，并添加我们的字段。 因此，对于我们的 Called Action 块，我们还需要文本、按钮文本、按钮链接和背景颜色。 也许我们想为此提供一些样式变化的选项。 第三，我们要在位置规则中选择块，我们要说等于，我们之前已经注册了 CTA 块，这就是为什么它可以用于我们在那个下拉列表中。 现在我们转到我们的模板文件，所有字段和所有内容都已设置，现在我们将进行一些模板制作。 现在，模板在某些方面与您可能使用 ACF 的传统模板不同。

但在许多其他方面，它非常非常相似，所以您通常用于开发的许多模式，您将在构建自定义块时使用，这太棒了。 因此，在我们的项目中，我们会说这是我们的自定义主题。 我们有一个块目录，然后我们有一个 CTA 目录，它与我们注册的块相匹配，然后通常你会有三个模板文件，block.JSONsomething.PHP，这是我们的 HTML 标记，然后是我们的点 CSS造型。

所以这是块类型 JSON，这是我们注册块的地方，但这是我们可以更深入地了解事情的方式，您可以在这里围绕配置和各种原生核心功能做很多事情您可以打开或关闭，使您的自定义块可用。 因此，一定要查看有关此的文档并了解可以做什么，因为就像我说的那样，您真的可以在这里配置该块的可用方式、显示方式，以及您可以通过的功能和核心功能到您的自定义块。

然后我们有我们的模板文件，我们的 PHP 文件，你可以在这里看到我只是设置与 Get 字段交互的变量，在那里与我们的字段数据交互，我们的样式有一些非常简单的条件逻辑，然后是我们块本身的 HTML。 然后我不打算遍历 CSS。 你知道 CSS 是什么，我相信你可能会写出比我在这里写的更好的 CSS，但你明白了。 你有一个用于块样式的 CSS 文件，你可以看到我们有一些有趣的字体，以及用于那种点背景的径向渐变背景，这很有趣。

但同样，我们创建这个自定义块的原因是因为我们希望它能够真正微调我们的 CSS，我们的样式，这样我们才能真正实现我们正在努力的设计。 只是为了向您展示这在编辑器中的样子，您可以看到，我们可以选择我们的 Called Action 块，您可以将其调亮。 我们可以与我们的字段交互，为文本和按钮添加文本，也为按钮添加链接，这是一个非常漂亮的自定义块，我们可以将其传递给我们的内容编辑器。

伊恩·波尔森：是的，谢谢，罗伯。 多么好看的景象。 我们确实需要让它生效。 太棒了。 好吧，让我们回顾一下我们今天讨论的内容。 所以我们了解了如何安装 ACF Pro，但使用 Composer。 我们讨论了如何在 ACF 中注册自定义帖子类型和分类法。 我们研究了使用选项页面注册全局或站点范围的字段，我们研究了一种不同的方式来通过程序包以编程方式注册字段。

Rob 深入研究了关系以及如何创建双向关系。 我们已经接触过 ACF 的无头，Rob 现在刚刚做了一个很好的例子，用 ACF 创建一个自定义块，除了一些 PHP、HTML 和 CSS 之外几乎没有任何东西，并且没有任何反应，所以这真的很好。 这太棒了，罗伯。 票数是多少？ 我们变成了什么？

Rob Stinson：看，对我来说，归结为这一点——不可否认，90 年代最伟大的电影是 Robin Williams 的《胡克》。 我很怀旧，我喜欢那部电影。 你呢，伊恩？

伊恩·波尔森：对我来说，一定是凯文·科斯特纳的《盗贼王子罗宾汉》。 这是一个经典。 忘掉糟糕的头发、鲻鱼、连英国口音都算不上的狡猾的英国口音。 这是有史以来最伟大的罗宾汉电影，那是一座我愿意死在上面的山。

Rob Stinson：哈，哈，不，很公平。 看，谢谢大家一起出去玩。 我希望你学到了一些东西，我们真的很期待看到你用 ACF 构建的东西，干杯。