电影
在本文中,我们将讨论如何利用Loopers来创建强大的数据驱动布局。
Cornerstone的一个强大功能是添加了电影。“什么是循环器?”我听到你在问...great question. There are many times in web development where we need to output and style things as a group or in a specific order. The most common instance of this that might come to mind would be a recent posts module or a blog index:

为了实现这种模式,你可以设置一个三列布局,包括三个不同的图像元素,并使用动态内容在你的帖子上拉出特色图像。然后,您需要设置三个标题元素,并在那里动态地拉出标题。所有这些都存在一些问题:
- 您必须手动为您想要的文章定义id,并在每次添加新文章时更新它。
- 你必须对所有内容(即输入内容)重复3次
{{dc:职位:标题}}
每个标题元素的内容,并指定所需的id)。 - 对于这些类型的模式,您通常希望所有like element的样式都是相似的。例如,如果有特色的图像有一个轻微的边界半径,标题有字体大小的碰撞和一些顶部边距,以使其远离图像,你将不得不复制和粘贴这些完全相同的样式在所有元素,每次你想要做出改变。
基本上,从设计/数据的角度来看,这些都不适合实现这种类型的铺设,并使其保持一致。相反,更容易的是建立一个”实例”每篇文章应该是什么样子,需要什么数据,然后根据你的需要重复多次。我们将在下面的电影消费部分。
或者,在web开发中有很多其他的例子,你想要多次重复一些东西,真正改变的只是每个部分的内容,但你希望样式保持一致。以特性列表为例:

我们在这里得到了一个人造产品的四种风格的功能框,包括顶部的图像、主标题和子标题。这不是很棒,如果不是必须应用你的样式四次或不断复制和粘贴变化,你可以代替建模一个”实例”每个功能框,然后只是管道自定义数据和重复的必要吗?像这样的一次性情况也可以使用我们的打环的供应商,我们也将在本文后面讨论。
电影消费者
要在构建器中创建循环内容,您可以转到任何布局元素(即节,行/列,网格/单元格和div)并打开电影消费控制定制对照组:

这就是启用一个新的Looper所需要做的一切。默认情况下,Consumer将从当前输出数据WordPress查询.这意味着除非另有说明,否则您可能会访问全局WordPress查询,并能够循环查看当前的帖子。如果要访问备用数据或过滤数据,则需要设置打环的提供者,我们将在本文后面介绍。
请注意,您还可以指定是否应该输出循环程序消费者一个,许多人,或所有当前查询中可用的数据点。如果”许多”时,将出现一个输入,允许您指定计数。
循环器消费者被启用的元素就是元素- - - - - -连同里面所有的东西- - - - - -这将是重复的。基于之前的post示例,启用消费者的最合适元素是行中的Column。
一旦在元素上启用了循环程序消费者,该元素的观察者将突出显示黄色(类似于前面提到的动态内容),循环程序图标将被添加到标签前,帮助表明这是循环内容(在下面的截图中,我们已将列元素重命名为”帖子”为了帮助在预览中识别它):

既然Consumer在列上启用了,那么我们在Consumer中放置的任何东西都将在每个循环项中重复。看看上面的例子,我们将需要以下项目来完成我们的设计:
- 一个相关元素允许用户点击进入文章。在这种情况下,我们将打开链接控制列和输入
{{dc:职位:永久链接}}
作为值。这将整个专栏的内容包装在一个链接中,允许用户点击任何地方访问文章;但是,如果需要,您可以将此链接放置在单个元素周围。 - 一个图像元素使用拉出特征图像
{{dc:职位:featured_image_id}}
为src
而且”特色图片{{dc:职位:标题}}
”为alt
文本。 - 一个标题元素通过标题的帖子使用
{{dc:职位:标题}}
.
记住,上面提到的动态内容字符串不需要手动输入或记住。您可以使用Dynamic Content按钮来帮助您在必要时填充适当的值。一旦所有这些元素都被设置和设计成你想要的样子,你会在实时预览中看到如下内容:

请注意,第一篇文章及其所有子元素都是可以正常检查的,但后面的每一项都是灰色的,略带透明。这是因为每个循环项所使用的设计和数据都是根据循环中的第一个项建模的,因此对循环内容外观的任何更改只能对第一个项进行。的”禁用”以下物品的感觉有助于在视觉上强化这一想法。
打环的供应商
每当您希望输出经过筛选的数据集时,都需要启用打环的供应商去你想去的地方消费这些数据。如果您愿意,还可以在与消费者相同的级别上启用提供者。每当一个提供程序在一个元素上被启用时,该元素的观察者将在实时预览中显示红色,除了在它的标签前有一个循环器图标:

这是为了帮助您识别哪些元素(如果有的话)正在通过新的Provider利用或覆盖当前查询。现在,让我们来讨论不同之处类型您可以在构建程序中使用。
最近的帖子
默认情况下,启用的提供程序被设置为最近的帖子查询:

我们提供这个简化选项,因为它可能是一个循环程序最常见的用途- - - - - -但是你可以用它们做更多的事情(稍后会详细介绍)。另一个可用的选项是调整计数。当设置为默认的它将拉入查询计数设置在你的WordPress管理,但它可以通过选择改变自定义,这将换出一个输入供你调整:

我们所有的帖子的元素在布局树的某个点上使用父元素和消费者上的预设来构建。
最后,抵消控件允许您指定在输出内容之前要跳过的特定数量的post。默认情况下,该控件为了,但选择数将显示一个类似于上面为”数”控件,您可以在其中输入所需的偏移量(此控件也存在于某些其他提供者类型上)。
查询构建器
如果您希望对提供程序进行任何形式的严格过滤,则需要选择查询构建器选项。类型控制。这样做将显示以下一组控件:

Count控件仍然位于列表的末尾,但在列表之间将出现一组新的选项供您使用。您可以看到切换到Query Builder,我们只选择帖子条目和它们的排序日期在下行秩序。这将产生与最近的帖子前面提到的Type控件的选项。此外,请注意,当您更新这些过滤器时,其关联控件上的标签也将更新,以帮助您提供与上下文最相关的信息。
让我们从点击的帖子过滤器:

默认情况下,WP Query要求您至少指定一个要从中提取的帖子类型,因此必须始终至少有一个值出现在类型控制。如果您希望从多个文章类型中提取,请单击而且按钮,显示一个额外的选择菜单(此模式也用于整个其他弹出窗口)。所以如果你想包括所有页面发布类型在你的查询以及,你可以做以下:

除此之外,您还可以进一步细化您的WP查询包括或排除之前指定的帖子类型中的特定id,以及包括粘性帖子(默认情况下被忽略)。
继续,我们有分类法控件,它将允许您通过任何可用的分类法筛选所选的文章类型。这意味着对于帖子,你会看到类别和标签显示出来,如果你安装了WooCommerce,并根据产品进行过滤,你会看到产品类别和产品标签显示出来,等等。188金宝搏官网登录-首页如果在这个弹出窗口中什么都没有选择,将会看到以下内容:

请注意,您可以选择使用所选的分类法包括或排除结果来进行筛选。此外,如果选择了多个分类法,则会出现以下复选框:

如果必须有所有选定的项目复选框与包括在上面的切换中,这意味着post类型的条目必须具有所有选择要包含在查询中的分类法。如果这个复选框和被排除在外被选中,是否意味着一个帖子类型的条目不能包含任何要包含在查询中的所选分类法的。
继续,我们有作者Filter,看起来很像前面的控件,允许你根据所选的作者包括或排除条目:

再往前就是日期过滤器,在这里您可以指定一定的时间范围,您的条目必须落在查询中:

最后,我们有命令控件,它将允许您指定您的内容应该使用什么元值来排序其输出,以及应该朝哪个方向移动(即升序或降序):

这里可用的字段包括:
- 日期
- 修改日期
- 标题
- 鼻涕虫
- 文章类型
- ID
- 父ID
- 随机
- 评论数
- 页面订购(菜单)
如您所见,这里有许多选项可以帮助定制查询条目的输出!
查询字符串
的查询字符串选项是一种先进的技术,它提供了一个逃生口,可以直接使用WP查询API。选择这个类型将显示以下输入:

方法中的任何可用参数都可以使用此输入手动构造查询字符串WP查询WordPress类。例如,如果你想获得你所有的帖子与一个类别,有一个鼻涕虫旅行,你可以这样做:

在构造这些查询时,请记住它必须是一个有效的“查询字符串”,这是组织参数的另一种方式,就像在URL中一样。WordPress并没有关于这项技术的具体文档,因为他们建议在自定义PHP代码中传递一个数组。为了帮助生成查询字符串,在开发环境中使用PHP代码段是很有帮助的。例如:
回声http_build_query ([' meta_query ' = >['与' = > '或',(“关键”= >“meta-1”,“价值”= > ' 1 '],[“关键”= >“meta-2”,“价值”= > '值2 ']]]);
这个PHP将产生以下字符串:
meta_query % 5 brelation % 5 d = OR&meta_query % 5 b0 % 5 d % 5 bkey % 5 d = meta-1&meta_query % 5 b0 % 5 d % 5 bvalue % 5 d = value-1&meta_query % 5 b1 % 5 d % 5 bkey % 5 d = meta-2&meta_query % 5 b1 % 5 d % 5 bvalue % 5 d =值2
该字符串将作为循环程序提供程序的输入。
现任职位
“是的,但是我们能巢电影?”我听到你在问。问得好,勇敢的互联网询问者...答案是:“是的,你可以!”可能需要循环遍历嵌套数据的更常见情况之一是使用分类法。
想象一下,您有一组已经循环遍历的帖子,在每个条目中,您希望显示应用于该帖子的类别列表。您将需要第二个内部循环来获取该帖子的分类并相应地输出它们。要执行此操作,请选择现任职位Type控件中的选项:

一旦你在你想要的父元素上应用了这个Provider,在任何可用的元素上启用一个Consumer来开始重复它。对于这种特殊的情况,你很可能想直接重复按钮元素之类的东西,我们已经在下面的截图中做过了:

要得到上面看到的输出,您可以按照您想要的样式设置按钮,然后应用适当的Dynamic Content字符串。在这种情况下,我们使用{{dc:术语:标题}}
对于文本和{{dc:术语:url}}
来输出指向该类别存档页面的永久链接。同样,请记住,在第一个按钮之后的后续按钮是灰色的,因为它们是由循环器创建的“虚拟”元素,所以要调整任何东西,你需要做的就是调整第一个元素上的这些设置。
所有条款
操作类似于”现任职位”这样,您就可以指定一个分类法,并从中提取所有相关术语。这里的主要区别是所有条款会给你每一个词条:从全局角度来看属于一个分类学的术语,而不仅仅是分配给一个post类型条目的术语:

从上面的屏幕截图中可以看到,我们还有额外的控件空的,这允许我们包括或如果项为空或非空,则排除添加项。例如,你可能已经在你的网站上创建了一个类别,但还没有分配给它一个帖子,这将使它”空”从计数的角度来看。根据您应用术语的用例,您可能希望也可能不希望以不同的方式利用此控件。
当前页子
如果您在页面上,则当前页子循环程序提供程序类型将遍历任何存在的子页面。这些页面的顺序由订单设置在页面属性同时在WordPress仪表板中编辑页面。这个循环程序对于在侧栏或其他类似模式中输出祖先导航特别有用:

JSON
现在,对于循环程序提供程序的pièce de résistance(好吧,可能不完全是...但有点...).Looper系统中我们最喜欢的部分之一就是JSON从Type控件中选择:

我们对这个功能如此兴奋的原因有以下几个:
- 正如本文前面提到的,在您的设计中有许多情况,您可能希望“循环”某些内容,并为每个元素保持相同的设计和布局,而只是简单地交换内容。
- 您几乎可以将此选项视为必须添加自定义发布类型来管理数据的轻量级替代方案。例如,也许你正在为一个乐队网站工作,你想轻松地管理他们的唱片,并将其输出到一个页面上。你可以完全按照自己的需要构建自己的数据结构,并根据需要输出,而不是设置自定义的文章类型和处理可能给你的网站带来的麻烦和重量。
在本文前面展示的例子的基础上:

该输出使用以下JSON输出:

这里的输入必须是有效的JSON,这是一种相当直接的数据结构方式。在上图中,我们有一个数组([…]
),包含多个以逗号分隔的对象({…}
),拥有一组逗号分隔的关键/价值对来标记每个数据点。你可以看到我们在每个对象中都有以下键:
图像
:引用所使用资产的字符串。标题
:作为项目标题输出的字符串。文本
:要作为该项的主副本输出的字符串。
为了输出所有这些内容,我们在同一个元素(在本例中为列)上打开循环程序提供者和消费者。这允许我们在一个地方指定数据并管理其输出(但如果需要,也可以将其拆分为多个element)。方法访问每个项的键{{dc:电影:字段密钥= "标题"}}
动态内容字符串。你所需要做的就是换出关键
到您想要访问的适当值(因此,如果您想要本例中的主副本,您将使用{{dc:电影:字段密钥= " text "}}
相反)。
自定义
的自定义循环程序提供程序类型允许您使用WordPress过滤器返回一个自定义数组,然后可以循环:

滤镜将是cs_looper_custom_ {{your_hook}}
,在那里{{your_hook}}
是替换为您输入的钩子。例如,让'假设您在子主题中输入了以下代码'年代显然也
文件:
add_filter('cs_looper_custom_my_data', function($result) {return [['text' => '这是第一项的一些文本。'], ['text' => '这是第二项的一些文本。']]});
然后设置钩上述输入见my_data
因为过滤器的命名方式。接下来,在Looper Consumer中,您将希望使用电影
→场的动态内容字符串关键
设置为文本
(如。{{dc:电影:字段密钥= " text "}}
)以参考文本
数据见上述各项。
的参数个数控件输入打开一个JSON文本编辑器,它可以将独特的、一次性的上下文数据块引入过滤器'S原始数据。例如,也许你想在每次访问这个特定的过滤器时引用不同的API端点,你可以像这样在Params控件中引入唯一的API调用:
{"url": "https://your-api"}
然后美元的参数
是否可以在过滤器中引用,包括它作为第二个参数,并添加适当的优先级而且接受参数值add_filter ()
,像这样:
add_filter('cs_looper_custom_my_data', function($result, $params){//使用$params['url']访问“https://your-api”返回$result;}, 10, 2);
数组
如果您刚刚从JSON或自定义提供程序类型中消费了一个项,则数组循环程序提供程序类型将允许您迭代该数据中的一个键,返回一个数组,可用于创建深度嵌套的树:

动态内容
的动态内容循环程序提供程序类型可用于提供任何动态内容字符串,该字符串返回要循环遍历的信息数组或对象。实现这个循环程序提供程序的主要用例是ACF Pro,在这一点上,它已经成为一个行业标准,可以轻松地为帖子类型、用户配置文件、术语等添加自定义元字段。要了解更多关于设置ACF Pro的一般信息,看看这篇文档文章.要了解有关具体使用ACF Pro与Loopers和动态内容的更多信息,查看这篇文档文章.
用环形笔思考大问题
以下是我们将循环器分为提供者和消费者的几个具体原因:
- 提供者的灵活性:强迫用户在同一个元素上同时使用这两个函数并不适用于所有情况。虽然您当然可以以这种方式使用Loopers,但在其他情况下,您可能希望将Provider指定为父元素,然后在页面上的多个位置访问相同的数据。使用这种方法,您不必多次定义查询,而是可以按照最适合您的构建的方式进行划分。
- 消费者的灵活性:从设计的角度来看,我们意识到以灵活的方式使用查询也是必要的。例如,也许你想有一个查询,但希望有不同风格的第一篇文章真正脱颖而出。您可以通过父节点上的一个Provider来实现这一点,然后使用一个只输出一个项的Consumer,然后使用另一个输出所需查询其余部分的Consumer。
- 性能:根据我们前面的观点,能够从消费者中分离出提供者有助于我们减少数据开销。我们可以指定一个查询,然后在多个点上访问它,而不是在一个页面上定义多个查询来获取相同的数据,这使事情非常简化。
开箱即用
循环器搭配动态内容是一个强大的一个,两个打击在你的布局建设冒险!但对那些需要的人来说只是工作我们会帮你的。
有几个动态元素可供您使用(在处理布局时直接从您的元素窗格中),您可以拖动并立即使用。不需要设置!这可以让你快速地击中地面运行与设计精美,预配置的环形使者魔法。然后,随着时间的允许或设计的要求,你可以进入上面描述的一些原始力量。无论哪种方式,您都有几个新的选择来利用这些令人难以置信的功能。
Looper视频教程
我们把它们放在一起关于环形使者的完整系列视频帮助你看到这在行动!花几分钟看一下,尤其是这个视频设置第一个循环.
看到不准确的东西了吗?让我们知道