ACF Pro和Loopers

在本文中,我们将讨论如何利用ACF Pro和Loopers来创建强大的数据驱动布局。

  1. ACF类型和设置
  2. 单一的领域
  3. 多维领域
  4. 定制的中继器
  5. 嵌套的中继器
  6. 关于示例页面模板

傻瓜,傻瓜,傻瓜。这似乎是最近大家都在谈论的话题...这是有原因的。循环器打开这么多为你的网站设计模式时的可能性,这就是为什么我们非常兴奋地宣布ACF Pro集成与环和动态内容!

年代吧!您现在可以利用ACF Pro的灵活性和强大功能并访问它直接在我们的建设者家族中创建令人惊叹的布局,可以插入您的自定义ACF数据,但您认为合适。

让我们想象这样一种情况,客户需要制作几十个模板,需要非常复杂的- - - - - -和公式化的- - - - - -布局。在这方面想到的可能是健身房或健身中心,它们提供许多不同的课程,所有这些课程都需要非常专业的输出集。为了帮助更清楚地演示其中一些概念,我们我创建了一个简单的页面模板,它采用了一些不同的技术来访问ACF Pro设置中的信息:

ACF Pro动态内容和循环程序示例

虽然这个例子在某种程度上简化了,但它有助于说明当我们利用ACF Pro所提供的所有功能时,我们如何能够打开许多内容管理的潜力。虽然我们当然可以混合和匹配信息的来源(例如,我们可以获得页面S标题使用{{dc:职位:标题}}动态内容字符串,如果我们需要),我们继续和设置每一个信息从ACF Pro:

ACF Pro动态内容和循环程序示例

ACF类型和设置

ACF Pro特性四种主要类型的字段,可以分配给它们各自的上下文:

  • 职位:可以分配到任何职位类型,包括自定义的(例如:帖子、页面、产品等)188金宝搏官网登录-首页
  • 术语:可以分配给分类法中的任何术语吗(例如标签,类别,产品标签,产品类别等等)
  • 用户字段:可以分配给任何用户吗年代概要
  • 选择字段:可以分配扩展主题吗S基本选项

扩展一下,a设置在ACF Pro中S词典是与您可能出于某种原因想要引用的特定字段相关联的任何元信息。例如,您可能希望访问字段标签在你的设计中输出它的实际值,或者也许你D喜欢用字段类型在动态元素条件表达式中。有许多用户知道为什么要访问这些参数,但现在我们将重点关注字段本身及其各自的值。

单一的领域

基于我们到目前为止看到的例子,一些例子单数字段包括:

  • 锻炼(文本输入)
  • 标题(文本输入)
  • 描述(文本区域)

这些场中的每一个在本质上都是单一的,这意味着它只是在返回一个显式值。其他领域可能是多维、也就是说他们会回来许多值或对象,然后可以循环访问每个项目的信息(稍后详细介绍)。

访问单个字段需要一个环形使者。控件开始检索单个字段动态内容弹出无论你试图访问这些信息,并找到ACF组。让S表示我们想要输出锻炼在我们的页面上面看到的领域。这是在我们安装的后端安装的字段名锻炼,因此这是我们将用于访问该字段的键。因为我们已经将它分配给了page,所以我们将使用场后动态内容字符串检索信息:

ACF Pro动态内容和循环程序示例

一旦你点击场后项,将显示一个窗格,您可以在其中输入您想要访问的键:

ACF Pro动态内容和循环程序示例

当访问这样的顶级字段时,我们能够通过ACF Pro拉入您指定的字段的api,使选择过程非常简单。如果你看到<选择>像这样的菜单,你可以做出选择,它会从字段标签其次是你的输入值在后台,让你很容易看到哪个字段是你我们正在寻找。完成后,单击+按钮将动态内容字符串添加到输入或编辑器中。在这种情况下,生成的字符串最终是:

{{dc: acf: post_field字段= "锻炼"}}

多维领域

基于我们到目前为止看到的例子,一些例子多维字段包括:

  • 教练(用户选择)
  • (自定义中继器)
  • 画廊(图片画廊)

访问多维字段需要一个循环程序,因为它不是返回一个简单的值,如字符串或整数。相反,这些字段可以包含一个或多个被引用的项,每个项都有自己的可访问信息分类。

例如,让S取教练从我们上面的线人那里。你会注意到这是a用户选择,允许我们将一个或多个用户分配到这个页面,作为我们的讲师,帮助引导这门课程:

ACF Pro动态内容和循环程序示例

为了访问每个用户的相关信息,我们完成任务后,我们首先需要设置我们的动态内容循环程序提供程序在父元素上,它将为我们提供所需的信息,用于链中某个位置的消费者。要设置它,我们将转到我们想要应用循环程序提供程序的元素,单击它定制control选项卡,打开Looper Provider并将其类型设置为动态内容:

ACF Pro动态内容和循环程序示例

这个动态内容提供程序是我们的ACF Pro与Loopers集成的核心和灵魂。在这里,可以指定任何多维数据源,然后使用它们从每个条目输出数据点。在我们的例子中,如果我们想要循环我们的教练,我们会再次点击动态内容图标来显示弹出窗口,找到场后ACF部分时,我们希望引用添加到页面中的字段,然后选择教练字段从<选择>,它将在单击+按钮:

{{dc: acf: post_field字段= "教师"}}
ACF Pro动态内容和循环程序示例

这些数据将需要消耗在Element树的某个位置,这将使我们能够访问我们想从每个项中提取的信息。在这个特殊的例子中,我们设置了一个图像字段分配给安装中的所有用户,这样我们就可以将自己的缩略图与WordPress试图拉进来的Gravatar分开,让我们对网站前端的输出有更多的控制。那块地分配给所有人用户用一把钥匙图像.因此,我们要访问那个字段- - - - - -你猜对了- - - - - -用户字段动态内容字符串。

为了包含这个ACF数据,我们将转到图像元素并单击动态内容图标,显示友好的弹出框。定位用户字段项,并单击它以指定适当的键(获取信息的一个细微差别是嵌套的在这些更深层次的问题是,ACF Pro没有一个API,将允许我们填充这些子字段值在<选择>正如我们之前看到的,所以这些密钥将需要手写):

ACF Pro动态内容和循环程序示例

这就是我们如何填充示例设计的以下部分。瞧!我们的杰作是一次一个环形使者

ACF Pro动态内容和循环程序示例

处理某些多维字段时要注意的另一个信息是返回格式可以在设置过程中指定。无论何时处理数组或对象的字段,我们建议将此控件切换到对象设置,以允许在使用者中访问动态内容。对于user字段,你需要将这个值设为用户对象在后端,像这样:

ACF Pro动态内容和循环程序示例

多维域的另一个例子是画廊字段类型,它允许我们添加一个图像集合,我们可以在以后的设计中访问和输出相应的图像:

ACF Pro动态内容和循环程序示例

正如我们之前所做的,循环这些图像是通过在元素链的某个地方建立一个动态内容提供程序来完成的,该程序可以访问我们设置中的字段:

{{dc: acf: post_field字段= "美术馆"}}
ACF Pro动态内容和循环程序示例

然后可以在链的另一端的子元素上使用。在这个特殊的例子中,我们使用了Div元素作为我们图像的父类,所以我们在那个层面上启用了消费者:

ACF Pro动态内容和循环程序示例

你也会注意到我们只是在消费3.我们画廊里的照片。这样做是为了实现我们在设计中想要的外观,即两条线的交错外观。每一行都具有相同的图像风格方法和布局,只是相反,这就是为什么它需要分成两个单独的消费者。

类中来自图库的数据被我们的父Div使用之后图像元素我们可以用它来访问图像资产{{dc:电影:条目}}的弹出窗口中可以找到厕所部分:

ACF Pro动态内容和循环程序示例

我们可以以这种方式访问数据的原因归结为我们如何设置返回格式对于后端的字段:

ACF Pro动态内容和循环程序示例

因为我们只是返回图像URL- - - - - -这是一个字符串- - - - - -我们可以使用它{{dc:电影:条目}}由于没有具体的键来参考。当你想要做的只是访问全尺寸图像时,这非常有用,这是ACF Pro在使用此设置时的默认值。

但是,如果我们将库设置为返回图像阵列,可以然后从返回的数据中访问一个特定的键,其中包括许多有用的信息,如图像S标题,Alt文本,标题,各种大小,等等。例如,如果你想要得到一个特定的图像大小这是由WordPress创建的,你可以使用以下:

{{dc:电影:字段密钥= " sizes.thumbnail "}}

对于这个特定的场景,大小Key本身是一个数组,其中有许多不同的键,表示我们可用的不同大小。因此,我们需要使用点表示法来访问子键并提取到该大小的引用。在这个特殊的例子中,我们的目标是图像年代缩略图大小,但可能有许多其他可用的版本。

与前面的user字段一样,在处理多维字段时要记住这种返回格式。它将在……中发挥重要作用什么你能接触到的信息还有如何您可以在设计过程中访问它。

定制的中继器

ACF专业功能的字段类型称为中继器,哪个为重复内容提供了简洁的解决方案- - - - - -比如幻灯片、团队成员、CTA贴图等等。

此字段类型充当一组子字段的父字段,这些子字段可以反复重复。这种字段类型的特别之处在于它的多功能性。任何类型的字段都可以在Repeater中使用,并且没有重复次数的限制(除非在字段设置中定义)。你甚至可以放置中继器其他中继器...如何对于初始级别的内容管理,这是什么?

关于嵌套中继器的主题,您可能会想:“我什么时候需要它?”我们能想到的一个最简单的例子是,如果你设置了一个Repeater,它只有一个文本字段输出,作为列表的一部分;然而,如果你需要列表的在某些行项目下面,像这样:

  • 顶级项目#1
  • 顶级项目2
    • 次级项目#1
    • 次级项目2
  • 顶级项目3

在这种情况下,在每个顶级Repeater条目中,您可能希望添加一个可选的嵌套Repeater,以使您能够输出子项列表。事实上,这正是我们在示例设计的最后部分所做的:

ACF Pro动态内容和循环程序示例

我们想要创建一种方法来输出特定锻炼中所有可用课程的注册链接列表,并且我们想要按照每周提供的日期来组织这些课程:

  • 类:顶级中继器,将用于表示每天提供的课程。
    • 一天:一个<选择>通过预定义的选项指定子分组的课程发生的星期几。
    • 时报》:一个嵌套的中继器,包含每个提供的类的以下信息:
      • 时间:一个时间选择器,用于指定上课当天的时间。
      • 教练:用户输入,用于指定指导特定班级的教师。
      • 注册链接:一个简单的文本输入,用于指定URL,将用户转到特定时间的注册页面。

那么我们如何访问所有这些级别的信息呢?我们要做的第一件事是设置我们的主Looper以开始处理顶级数据。对于这种特殊的情况,我们最终使用一个Row,其中只有一个全宽的Column来表示每个Column一天在我们的设计中(设计技巧:这意味着我们可以使用Row年代差距设置为只添加空格之间的我们的日子随着一天的增加而增加)。这一切都是通过使用一个包含以下值的动态内容提供程序启动的:

{{dc: acf: post_field字段= "类"}}

这给了我们整个中继器Re想要工作,所以我们可以开始处理它的子字段。接下来,我们立即在相同的Element上使用这些数据,因为我们知道Column本身就是我们想要重复的内容。你可以从下面的截图中看到整个设置:

ACF Pro动态内容和循环程序示例

现在我们在顶层中继器中,访问一天子字段相当简单。因为我们已经开始循环这个中继器S数据,我们可以引用当前的项目使用我们之前的动态内容字符串:

ACF Pro动态内容和循环程序示例

因为我们想要访问一个特定的键(即一天key),我们需要确保在动态内容字符串中显式引用它:

{{dc:电影:字段密钥= "天"}}

嵌套的中继器

要访问我们嵌套的中继器,我们需要设置另一个专门引用的动态内容提供程序一组可供我们使用的数据。为此,我们需要访问我们的具有以下动态内容字符串的中继器:

{{dc:电影:字段密钥= " * "}}

请记住,这里我们可以使用Looper Field字符串,因为我们已经在来自顶级数据源的另一个Looper中,因此这是访问该子字段的适当方式。在这个例子中,我们将Provider和Consumer都设置在Grid中的同一个Cell上,这个Cell用于为这些注册链接提供结构:

ACF Pro动态内容和循环程序示例

现在我们在这个嵌套的Repeater中,大部分的字段都可以使用Looper Field语法(例如。{{dc:电影:字段}})在动态内容中引用特定的键。例如,输出我们的时间哪个有钥匙时间,我们会使用:

{{dc:电影:字段密钥= "时间"}}

参考我们的注册链接,键值为registration_link,我们会使用:

{{dc:电影:字段密钥= " registration_link "}}

事情有点棘手的地方是我们的教练字段。因为这个特殊的场多维、这意味着我们需要遍历它的内容来输出信息,即使在这种情况下我们只使用它来指定一个教员。正因为如此,我们我们需要引用我们的输入作为另一个动态内容提供程序在某种类型的父元素上。在本例中,我们选择将图像封装在Div元素这样我们就可以设置正确的Provider并立即使用它的数据:

ACF Pro动态内容和循环程序示例

那时,我们我们现在回到消费我们的用户字段,就像我们之前,这意味着我们可以访问我们的自定义图像使用以下动态内容字符串:

{{dc: acf: user_field字段= "形象"}}

就像我们之前访问自定义用户字段的示例一样,您也可以这样做你必须自己格式化这个字符串。单击图像控件中的动态内容图标将显示一个弹出窗口,您可以在其中找到用户字段项,然后转到子窗格指定需要引用的键:

ACF Pro动态内容和循环程序示例

关于示例页面模板

示例页面模板我们你在这里引用的是可通过设计云和标签更好更快更强一个细微差别.tco模板在这个时候是我们无法传输测试数据的东西,如ACF Pro字段- - - - - -你也不希望这些数据在你的WordPress安装时随处可见。因此,所有ACF pro支持的动态内容循环程序提供者都已被替换JSON提供者,模拟本例中看到的数据结构。这可以让你准确地看到我们把所有的提供者和消费者放在哪里,以及我们是如何重新访问不同的数据位。如果您希望使用实际的ACF pro驱动字段重新创建这里看到的一些结构,您将需要手动执行此设置并符合您的规格。

看到不准确的东西了吗?让我们知道

Baidu
map