如何将其他内容插入氧气中继器和简易帖子 - 超级教程

Oxygen Builder 的Repeater 和Easy Posts 元素是显示帖子列表的快捷方式。

无论出于何种原因，本指南将向您展示在列表中插入“其他项目”的不同方法。

为避免混淆，我将对原始Repeater/Easy Post 查询未查询的项目使用“Other Item(s)”

为什么？

Repeater/Easy Posts 元素显示帖子列表。 该列表受用于获取帖子的查询中设置的参数的限制。

您可以格式化每个项目的外观和列表的布局，仅此而已。 有时这就是您所需要的，但有时您可能想要更改列表以包含最初未获取的其他项目。 其他项目如：

• 列表中间而不是列表末尾的号召性用语（例如指向整个档案的“阅读更多”链接）
• 一些信息性文本描述列表中的项目，打破信息流以保持有趣
• 一些装饰元素
• 列表中的另一个列表
• 广告横幅或其他促销品

氧气生成器课程- 即将推出！

Oxygen Builder Mastery 课程将带您从初学者到专业人士 - 包括 ACF、MetaBox 和 WooCommerce 模块。

获取发布通知和折扣

如何？

我将使用上面的一些示例向您展示将其他项目添加到列表的各种方法。

从超级简单到复杂的方法是：

• jQuery
• 使用the_posts钩子
• 编辑 PHP 模板 (Easy Posts)
• 再次使用the_posts钩子，但添加非 Post 项目，如术语（类别/分类法）

在我的示例中，我将使用自定义帖子类型 Destinations，它只是一个城市列表。

注意事项

• 另一个项目将是 Repeater/Easy Post 元素的子元素，因为它被插入其中，并且将受制于从父元素设置的任何布局规则，除非被覆盖，在我的示例中我不会这样做。
• 在氧气编辑器中不会看到列表更改。
• Easy Post PHP 模板方法访问一个未记录的变量，该变量可能在未来的 Oxygen 更新中发生变化，但不太可能。

使用 JQuery 在中继器中添加一些其他元素

我们将使用 JQuery 在 Repeater/Easy Post 内的某个索引处插入一个元素。

步骤

1. 使用带有帖子类型目标的自定义查询创建中继器或 Easy Post。 将其 ID 设置为example-repeater-1 。
2. 这些项目是作为背景的帖子标题和特色图片。
3. 在此示例中，我使用了网格布局并将第 4 项设置为跨行中的 2 列。 这是我的项目将被插入的地方。
4. 另一个项目是一个高度为 100% 和宽度为 100% 的div ，我将它做成了一个带有号召性用语按钮的简单横幅。 将其 ID 设置为guide-ad-banner 。
5. 我将另一个项目放在中继器下方，但它可以去任何地方，因为脚本会移动它。

jQuery

在您的页面中插入一个代码块并将以下内容添加到 Javascript 部分，或在 PHP / HTML 部分的<script>标记内。

 jQuery( ( $ ) => { const allRepeaterDivs = $( "#example-repeater-1 > div" ); const insertionIndex = allRepeaterDivs.length > 2 ? 2 : allRepeaterDivs.length - 1 ; allRepeaterDivs.eq(insertionIndex).after($( "#guide-ad-banner" )[ 0 ]); });
 代码语言： JavaScript （ javascript ）

这是脚本的快速解释。

1. 页面加载/准备好后，我们得到所有div的列表，它们是#example-repeater-1子级。 这些是转发器中的各个项目。
2. 计算插入此项的索引，理想情况下我想在第 3 项之后插入（索引 2，这里的索引从 0 开始），但如果项数小于 2，则在末尾插入。 当然，我事先已经知道结果的大小，所以这个计算只是一种预防措施，以防我将其更改为返回少于 3 个项目的查询。
3. 最后，它在第 3 项之后插入 id 为#guide-ad-banner的元素，使我的其他项成为第 4 项。

结果

在前端，它获取 ID guide-ad-banner的项目并将其插入 ID 为#example-repeater-1器的第四个位置。

使用the_posts钩子在中继器中添加其他项目

WordPress 中的the_posts过滤器挂钩可让您访问通过查询获取的帖子。 参考
我们可以使用这个钩子插入原始查询中未包含的其他帖子。

对于这个例子，我将在我的转发器末尾插入一个常规的帖子，它使用查询来查询我的目的地。

步骤

1. 为目的地帖子类型创建一个转发器，并将标题和特色图像设置为项目的样式作为 div 背景。
2. 在转发器上方和下方添加代码块。

代码块

第一个代码块

将此 PHP 代码添加到中继器上方的代码块中。

 <?php function b58_add_cta_last ( $posts, $query ) { $cta_post = get_post( 347 ); $posts[] = $cta_post; return $posts; } add_filter( 'the_posts' , 'b58_add_cta_last' , 10 , 2 ); ?>
 代码语言： HTML、XML （ xml ）

让我们回顾一下这段代码。

1. 我使用get_post获取 ID 为 347 的帖子。这是我想在转发器末尾插入的帖子。
2. 我将上一篇文章附加到$posts数组的末尾。
3. 返回修改后的数组。
4. 我将先前创建的函数添加到the_posts过滤器挂钩。

第二个代码块

将以下PHP添加到转发器下的代码块中

 <?php remove_filter( 'the_posts' , 'b58_add_cta_last' , 10 , 2 ); ?>
 代码语言： HTML、XML （ xml ）

这将删除先前添加的函数作为要使用的the_posts过滤器挂钩被调用。 如果它没有被删除，它将影响稍后运行的其他查询。

结果

我们收到的 ID 为 347 的帖子被附加到转发器的末尾。 从图像中您可以看到有一个目的地列表，最后是我们的常规帖子。 所以它可能是一篇关于旅行或如何预订的文章，或者其他什么。

如果您将自定义字段等动态数据添加到重复项，并且该元键在其他项上不存在，则该 div 中的它将为空。 因此，您应该使用条件来检查元键是否存在以避免任何奇怪的布局问题。

在 Easy Posts 元素中添加另一个列表

这将涉及编辑 Easy Posts 元素的 PHP 模板。

对于此示例，我将创建一个可重用部件，其中包含一个带有帖子列表的转发器，然后将其插入到查询不同帖子集的 Easy Post 元素中。 我不会为此使用 Destinations CPT。

将列表创建为可重用部件

1. 创建一个新的可重用部件，其中包含 3 个主要元素、一个标题、一个用于中继器的 div 和文本。
2. 转发器运行默认帖子类型和新闻类别的查询，我设置no_found_rows = true 以禁用分页。
3. 顶部文本元素只是说突发新闻，底部文本是新闻帖子存档的链接。
4. 在转发器上方和下方添加代码块，我们必须使用这些代码块更改转发器查询。

这就是 Reusable Part 的结构。

代码块

第一个代码块

虽然此转发器存在于 Easy Post 元素中，但它的查询应该独立于 Easy Post。 Easy Post 元素可以影响内部列表的一种方式是通过分页。 如果有人点击 Easy Post 元素的第 2 页，默认情况下内部列表也会获取第 2 页。我们必须防止这种情况发生。

转发器上方的第一个代码块将添加一个pre_get_posts操作，将分页查询参数设置为 1，这使其始终返回第一页。
如果此转发器位于静态主页上，则改用 page = 1。 （参考：WP_Query 文档）

 <?php function b58_set_paged ( $query ) { // use paged if the repeater is on an archive page // or page other than a static home page. $query->set( "paged" , 1 ); // use page if this repeater is on a static home page. // $query->set( "page", 1 ); return $query; } add_action( 'pre_get_posts' , 'b58_set_paged' ); ?>
 代码语言： HTML、XML （ xml ）

第二个代码块

第二个代码块删除了之前添加的操作，以防止它影响未来的查询。

 <?php remove_action( 'pre_get_posts' , 'b58_set_paged' ); ?>
 代码语言： HTML、XML （ xml ）

所以现在转发器将始终显示结果的第一页。

记下此 Reusable Part 的模板 ID，您可以从 WP Dashboard 中的地址栏中获取。

氧气生成器课程- 即将推出！

Oxygen Builder Mastery 课程将带您从初学者到专业人士 - 包括 ACF、MetaBox 和 WooCommerce 模块。

获取发布通知和折扣

简单的帖子

1. 在我想要添加简单帖子的实际页面上，我将其添加到该页面并选择了 Masonry 预设。
2. 我将查询更改为新闻以外的其他类别的帖子。
3. 我将每页的帖子数设置为奇数，因为我将手动添加 1 个额外的帖子以使其均匀，以便网格整洁。

模板 PHP

在 Easy Posts 样式面板中，我转到 Template PHP。 您可以在此处编辑用于 Easy Post 容器中的每个项目的模板（重复该模板。）

在默认模板下，粘贴以下php

 <?php $current_index = $this ->query->current_post; // Place this element after the 3rd post item, or // the last post if the # of posts is less than 3 // this ensure this element is added even if there // are less than 3 posts on the page. $other_post_index = $this ->query->post_count < 3 ? $this ->query->post_count - 1 : 2 ; if ( $current_index == $other_post_index ) { echo "<div class='oxy-post'>" ; echo do_oxygen_elements( json_decode( get_post_meta( 321 , 'ct_builder_json' , true ), true ) ); echo "</div>" ; } ?>
 代码语言： HTML、XML （ xml ）

让我们回顾一下这段代码。

1. 首先，我们获取当前正在显示的项目的索引并将其设置为$current_index 。 在幕后，Oxygen Builder 循环遍历从 Easy Posts 元素中的查询集返回的每个项目，并为列表中的每个帖子执行模板内的代码。 我们有一种使用$this->query访问查询变量的方法，当前处理项的索引是查询中的current_post 。
2. 我确定应该插入我的其他项目的索引。 我通过检查将要处理的项目总数来做到这一点，如果少于 3 个项目，那么我会将另一个项目添加为 Easy Post 的最后一个项目。 否则，我将在第 3 个元素之后添加它（索引从 0 开始），使我的另一个项目成为 Easy Post 网格中的第 4 个项目。
3. 如果我们在索引处添加我们的项目，那么我使用 Oxygen 的内置函数do_oxygen_elements来呈现可重复使用的项目（模板 ID 321）并将其包装在具有类oxy-post的 div 中。

结果

可重复使用的部分作为 Easy Posts 网格中的第 4 项放置。

可重用部分的列表可在列表内滚动。

可重用部分中的pre_get_posts挂钩使其始终加载帖子的第一页，因此我可以转到 Easy Post 的其他页面，结果保持不变。

使用此方法，您可以替换上述代码的do_oxygen_elements部分并编写自己的 HTML 以在 Easy Posts 元素中添加您想要的任何内容。

请记住，您添加的元素应该符合在 oxy-post 类中设置的任何大小规则，否则它可能会丢弃列表的其余部分。

在中继器中插入术语元素

此方法建立在使用the_posts挂钩以在按术语排序的帖子列表中插入术语链接的基础上。

所以想象一个重复的列表，如：
蓝色 A、蓝色 B、蓝色 C、查看所有蓝色、红色 X、红色 Y、红色 Z、查看所有红色等。

当您想列出一些特色项目然后链接术语存档时，在电子商务网站上非常有用。

此方法涉及很多步骤，但非常简单。

步骤

1. 设置自定义字段
2. 创建一组 Helper 函数
3. 添加一个转发器来查询我们想要的帖子类型。
4. 使用the_posts钩子修改通过上述查询获取的帖子列表

设置自定义字段

如果您想将特色图片与您的 Term 对象一起使用，这是一个可选步骤。

在我的示例中，我使用精选图像作为项目的背景。 默认情况下，术语没有特色图片，因此我在我的自定义分类中添加了一张带有高级自定义字段的图片。

自定义字段是一个返回 ID 的 Image 字段。

辅助函数

我在代码片段中添加了以下辅助函数，使用您喜欢的任何方法执行相同的操作。

function b58_create_post_from_term ( $term, $post_type= "post" ) { $post_id = -1 * $term->term_id; // negative ID, to avoid clash with a valid post $post = new stdClass(); $post->ID = $post_id; $post->post_author = 1 ; $post->post_date = current_time( "mysql" ); $post->post_date_gmt = current_time( "mysql" , 1 ); $post->post_title = $term->name; $post->post_content = $term->description; $post->post_status = "publish" ; $post->comment_status = "closed" ; $post->ping_status = "closed" ; $post->post_name = "regions/" . $term->slug; $post->post_type = $post_type; $post->filter = "raw" ; // important! $wp_post = new WP_Post( $post ); wp_cache_add( $post_id, $wp_post, "posts" ); return $wp_post; } function b58_get_the_featured_image ( $get_url, $size = 'thumbnail' ) { global $post; $post_id = $post->ID; $thumbnail_id = 0 ; if ( $post_id > 0 ) { // this is a regular post. $thumbnail_id = get_post_thumbnail_id( $post_id ); } else { // this is our fake post and it doesn't // have a thumbnail ID so we have to use the // custom field we set for this term. $pos_term_id = -1 * $post_id; $thumbnail_id = get_field( "term_background" , "term_" . $pos_term_id ); } if ( $get_url ) { return wp_get_attachment_image_url( $thumbnail_id, $size ); } return $thumbnail_id; } function b58_get_the_link () { global $post; $post_id = $post->ID; if ( $post_id > 0 ) { return get_permalink( $post_id ); } // post id is negative, we use a negative post id in our dummy post object $pos_term_id = -1 * $post_id; $term_link = get_term_link( $pos_term_id ); return $term_link; }
 代码语言： PHP ( php )

让我们回顾一下这个片段中的每个函数。

b58_create_post_from_term( $term, $post_type="post" )

这需要一个 WP Term 对象 ( $term ) 并创建一个在 $post_type 中设置的类型的假帖子。
它首先将 ID 设置为其实际 ID 的负数，作为一种“标志”，以表明这是一个术语而不是实际的帖子。
它设置了 WP_Post 对象所需的一些其他变量，但我们唯一需要注意的是 post_title。
然后它将这篇文章添加到 wp 缓存中，以防有东西请求这篇文章，并且由于它的 ID 为负数，如果它尝试访问数据库将会失败。

b58_get_the_featured_image( $get_url, $size = 'thumbnail' )
 代码语言： PHP ( php )

如果您没有为术语添加带有图像的自定义字段，则跳过此功能。
这个函数有 2 个参数， $get_url是一个布尔值，这决定了它是返回图像的 ID 还是 URL。
第二个参数设置大小。

首先，它检查当前帖子的 ID 是否为负数，如果为负数，则这是一个假帖子，这是一个术语，否则它是一个真实帖子。
如果它是假帖子，那么我们使用get_field检索图像 ID 以获得该术语的 ID。
如果它是真实的帖子，那么我们使用内置的get_post_thumbnail_id函数。

其次，如果$get_url为 false，则只返回 ID。 否则，我们使用wp_get_attachment_image_url来获取图像 url 并返回它。

b58_get_the_link()

这将返回此帖子的链接（永久链接或术语链接）。
如果帖子 ID 为负数，那么它是假帖子，我们使用get_term_link来获取链接，而不是get_permalink如果它是真实帖子。

这就是辅助功能。

中继器

我在页面上添加了一个转发器，其中包含目的地查询。 我使用与前面的示例相同的布局，带有特色图像背景的居中帖子标题，以及指向帖子永久链接或术语链接的 div 链接。

对于特色图片背景，我没有使用动态数据中常用的特色图片方法。 我使用 PHP 函数返回值方法是因为我想使用辅助函数而不是其他方式来获取图像，因为该项目可能是“假帖子”（术语。）所以对于 div 背景 URL，我使用 PHP函数返回值，函数名称为b58_get_the_featured_image ，参数为true 。 我也可以在这里指定尺寸，但我没有。

链接的想法相同。 我不能像往常一样使用永久链接动态数据，因为假帖子是错误的，所以我改用b58_get_the_link 。

the_posts钩子

就像在转发器之前和之后添加代码块之前一样，这样我们可以设置一个要使用钩子调用的函数，然后删除该函数，这样它就不会影响其他查询。

这是中继器上方代码块的代码

第一个代码块

 <?php function b58_add_tax_links ( $posts, $query ) { // ignore if in admin if ( is_admin() ) { return $posts; } try { $terms = get_terms([ "taxonomy" => "regions" , "hide_empty" => true , "orderby" => "name" , "order" => "ASC" ]); } catch ( Exception $e) { echo 'Caught exception: ' , $e->getMessage(), "\n" ; return $posts; } if ( empty ( $terms ) ) { return $posts; } $new_posts = array (); foreach ( $terms as $term ) { for ( $i = 0 ; $i < count($posts); $i++ ) { if ( has_term( $term->slug, "regions" , $posts[$i] ) ) { $posts[$i]->post_title = $posts[$i]->post_title; $new_posts[] = $posts[$i]; } } // create a post object from this term. $term_post = b58_create_post_from_term( $term, "destinations" ); $new_posts[] = $term_post; } return $new_posts; } add_filter( 'the_posts' , 'b58_add_tax_links' , 10 , 2 ); ?>
 代码语言： HTML、XML （ xml ）

让我们回顾一下这段代码。

1. 如果在管理仪表板中，什么也不做。
2. 否则，我使用 slug regions对分类法运行get_terms查询，按名称升序排序。 Regions 分类附加到 Destinations 自定义帖子类型，它是目的地所在的 7 大洲之一，因此内罗毕和开罗在非洲，香港在亚洲，等等。
3. 添加一些检查和错误处理，以防术语名称出现拼写错误或分类没有术语，然后我们只返回原始结果。
4. 如果 terms 查询通过了所有检查，则声明一个名为$new_posts的新空数组，我会将帖子添加到此数组中并返回它而不是实际的帖子数组。
5. 遍历$terms数组，对于每个术语，我遍历$posts数组并找到具有该术语的术语并将其附加到$new_posts 。
6. 在我完成$posts数组的搜索后，我用当前的$term创建了一个假帖子，并给它一个帖子类型的目的地（它可以是任何东西，真的。）然后我将这个假帖子添加到$new_posts 。

当函数返回时， $new_posts数组项应如下所示：
开罗、内罗毕、非洲、香港、亚洲、伦敦、欧洲……等等。 非洲、亚洲和欧洲都是假帖子。

最后，我们将上述函数添加到the_posts钩子中。

第二个代码块

中继器下方的代码块是：

 <?php remove_filter( 'the_posts' , 'b58_add_tax_links' ); ?>
 代码语言： HTML、XML （ xml ）

这会从钩子中删除函数。

格式化列表

至此，中继器完成。 具有相同分类的项目被分组在一起，并且在每个组的末尾都有一个指向术语存档的链接。 但是，列表有点混乱，它们都在一个大网格中运行。 我希望每组项目及其存档链接自己排成一行，这就是如何做到的。

设置元素

1. 选择repeater下的repeated item div并添加一个名为data-post-id的属性，并使用动态数据Post ID作为其值。
2. 选择中继器并给它一些 ID 或只是复制当前 ID，我的是_dynamic_list-5-343 。

jQuery

在顶部的代码块（一个有效，甚至一个新的）中，我将以下代码添加到 Javascript 部分。

 jQuery( ( $ ) => { $( "#_dynamic_list-5-343 [data-post-id^=\"-\"]" ).after( $( "<div />" ) .css({ height : "0px" , "flex-basis" : "100%" }) ) });
 代码语言： JavaScript （ javascript ）

这会在条款 div 之后添加一个 div（帖子 ID 以“-”开头，负数）并且该 div 具有flex-basis: 100%和height: 0px这就像在转发器行中添加一个换行符。

就是这样。

结果

每个重复的项目都有各自的帖子标题和特色图片作为背景。 对于条款项目，我添加了“探索”一词，并将其设置为在帖子 ID 为负数 (< 0) 时有条件地显示。

结论

希望通过这些技术，您可以为您的 Oxygen Builder 中继器或 Easy Posts 增添趣味。

如果您有任何问题，您可以在 twitter @robchankh 上给我发 DM，或者在 FB 上发表评论，我将在其中发布此内容。