用 ACF Pro 与 Bricks 从前端提交表单动态填充嵌套轮播

本教程提供可粘贴的构建器设置、PHP 与 CSS 代码，用来在 Bricks 编辑器中，借助 ACF PRO 从一个自定义前端提交表单动态填充一个嵌套轮播（nested slider）。关于在 Bricks 中用 Pro Slider 配合查询循环做推荐轮播，也可参考 用 BricksExtras 与 WP Grid Builder 实现动态文章轮播。

前置要求

在深入细节之前，请确保你已具备以下环境：

• Bricks 1.5 beta 或更高版本
• 已启用 Bricks 子主题
• 为推荐内容（testimonials）添加了一个专用的自定义文章类型（本例中命名为 testimonials）
• 已启用 ACF PRO
• 已将自定义字段分配到我们的自定义文章
• 一个 Nestable Slider，其查询循环设置为在我们的自定义文章中循环所有元素（姓名、职位、图片等……），并使用自定义字段中的动态数据

创建 Thank You 页面

这是最简单的一步！在 Bricks 中新建一个页面，做一个静态的致谢页。本例中我们保持非常简单：一个标题、一张图片，以及一个跳转到我们轮播的按钮：

创建页面模板

在我们的子主题目录根目录新建一个名为 page-acf_form.php 的文件，并粘贴以下代码：

<?php
/**
* Template Name: ACF Form
*
* @package WordPress
* @subpackage Bricks
* @since Bricks 1.0
*/
acf_form_head();
get_header();

$bricks_data = Bricks\Helpers::get_bricks_data( get_the_ID(), 'content' );

if ( $bricks_data ) {
	echo '<main id="brx-content">' . Bricks\Frontend::render_data( $bricks_data ) . '</main>';
} else {
	if ( have_posts() ) :
		while ( have_posts() ) :
			the_post();
			get_template_part( 'template-parts/page' );
		endwhile;
	endif;
}

get_footer();

在 WordPress 中编辑将要显示表单的页面。在「移至回收站」右侧，你现在应该能看到如下的元框：

从此以后，每当你需要在某个页面插入 ACF 表单时，记得选择 ACF Form 模板并保存。

ACF 表单代码

在 Bricks 中添加你想放置表单的代码元素，并粘贴以下代码：

<!-- PHP CODE -->
<?php 
//load the ACF frontend form
acf_form(array(
  'id'            => 'testimonial_form',
  'post_id'       => 'new_post',
  'new_post'      => array(
     'post_type'     => 'testimonials',
     'post_status'   => 'pending'
     ),
  'post_title'    => true,
  'return'        => '/testimonial-submission-confirmed/', //make sure to update the slug to your own thank-you page.
  'submit_value'  => false,
));
?>
<!-- CSS CODE -->
<style>
  /* hide the default ACF input */
  .acf-form-submit input.acf-button{
  	display: none;
  }
</style>
<!-- CUSTOM INPUT USING BRICKS STYLES -->
<input type="submit" id="mySubmitBtn" class="brxe-button bricks-button bricks-background-primary" value="Submit my testimonial" onclick="document.getElementById('testimonial_form').submit();">

请根据你的需要审查并调整代码：

• 仔细检查 post_type 名称拼写是否正确（本例中 testimonials 是我们的 CPT 名称）。
• 如果你不打算在发布前审核推荐内容，可以把 post_status 改为 publish。
• 记得把 slug 改成你自己的致谢页。
• 如果想更改提交按钮的文字，把 input 标签里的 value="Submit my testimonial" 改成你想要的值。

如果一切正常，你就能在编辑器中看到如下表单：

小结

通过「子主题页面模板（用 Bricks\Helpers::get_bricks_data 渲染 Bricks 内容）+ ACF Pro 前端 acf_form 提交到 testimonials 自定义文章 + 一个 Nestable Slider 查询循环读取这些文章」的组合，访客在前端提交的推荐就会自动出现在轮播中。把默认 ACF 提交按钮隐藏、改用 Bricks 样式按钮，可让表单与站点视觉保持一致。

站长

Ray Chan

WordPress Developer & Bricks Specialist

WordPress developer with 10+ years of client builds. Switched to Bricks in 2023 — now builds fast WordPress sites and migrates legacy Elementor/Divi projects.

获取报价 →浏览全部教程