如何在单页面中重复显示ACF Flexible Content？

嘿，针对你用ACF Flexible Content搭建100%模块化网站的需求，我整理了一套贴合你场景的字段组设置和代码实现方案，完全适配你的页面类型+自定义文章类型的架构👇

一、页面通用Flexible Content字段组（首页/关于我们/服务等页面类型） #

这个字段组是给所有「页面」类型定制的，核心是通过Flexible Content实现任意拖拽组合的模块化布局。

字段组基础配置 #

• 字段组名称：Page Flexible Modules
• 位置规则：显示在「页面」类型（所有页面）
• 样式：标准（或根据后台UI偏好选择“无缝”）

Flexible Content核心字段：page_modules #

在这个字段里添加你需要的所有通用模块，示例模块如下：

• Hero模块：
  • 子字段：标题（文本）、副标题（文本）、背景图（图片）、按钮文本（文本）、按钮链接（URL）
• 文本区块模块：
  • 子字段：区块标题（文本）、内容（富文本编辑器）、文本对齐（选择框：左/中/右）
• 服务列表模块：
  • 子字段：模块标题（文本）、服务项目（Repeater字段：项目标题、项目描述、图标）
• 作品集预览模块：
  • 子字段：模块标题（文本）、显示数量（数字）、排序方式（选择框：最新发布/热门推荐）

前端调用代码（页面模板中） #

用模板拆分的方式维护更清晰，主模板中写入：

<?php
// 检查是否存在Flexible Content模块
if( have_rows('page_modules') ):
    // 遍历每个模块，加载对应模板片段
    while( have_rows('page_modules') ): the_row();
        get_template_part( 'template-parts/modules/module', get_row_layout() );
    endwhile;
endif;
?>

比如Hero模块的模板片段template-parts/modules/module-hero.php：

<section class="hero-module" style="background-image: url('<?php echo esc_url(get_sub_field('background_image')['url']); ?>')">
    <div class="container">
        <h1><?php the_sub_field('title'); ?></h1>
        <p class="subtitle"><?php the_sub_field('subtitle'); ?></p>
        <?php if( get_sub_field('button_text') ): ?>
            <a href="<?php echo esc_url(get_sub_field('button_link')); ?>" class="btn btn-primary">
                <?php the_sub_field('button_text'); ?>
            </a>
        <?php endif; ?>
    </div>
</section>

二、服务/作品集自定义字段组（自定义文章类型） #

假设你已经创建了service（服务）和portfolio（作品集）两个自定义文章类型，以下是对应的字段组设置：

1. 服务项目字段组 #

• 字段组名称：Service Details
• 位置规则：显示在「服务」自定义文章类型
• 字段列表：
  • 服务图标（图片字段）
  • 服务详情（富文本编辑器）
  • 服务价格（数字/文本字段，按需选择）
  • 适合人群（多选框：小型企业/个人创业者/大型企业）

2. 作品集项目字段组 #

• 字段组名称：Portfolio Project Details
• 位置规则：显示在「作品集」自定义文章类型
• 字段列表：
  • 项目缩略图（图片字段）
  • 项目描述（富文本编辑器）
  • 项目标签（多选框：UI设计/网站开发/品牌设计）
  • 项目演示链接（URL字段）
  • 项目截图库（画廊字段）

WP Query调用示例（服务列表页面） #

<?php
// 查询所有服务项目的WP Query参数
$service_args = array(
    'post_type'      => 'service',
    'posts_per_page' => -1, // 显示全部服务
    'orderby'        => 'title',
    'order'          => 'ASC'
);

$service_query = new WP_Query( $service_args );

if( $service_query->have_posts() ): ?>
    <div class="services-grid grid-cols-1 md:grid-cols-3 gap-6">
        <?php while( $service_query->have_posts() ): $service_query->the_post(); ?>
            <div class="service-card p-6 rounded-lg shadow-md">
                <img 
                    src="<?php echo esc_url(get_field('service_icon')['url']); ?>" 
                    alt="<?php echo esc_attr(get_the_title()); ?> 图标"
                    class="w-16 h-16 mb-4"
                >
                <h3 class="text-xl font-semibold mb-2"><?php the_title(); ?></h3>
                <p class="text-gray-600 mb-3"><?php wp_trim_words(get_field('service_details'), 20); ?></p>
                <span class="text-primary font-bold"><?php the_field('service_price'); ?></span>
            </div>
        <?php endwhile; ?>
    </div>
<?php
    // 重置查询，避免影响后续全局循环
    wp_reset_postdata();
endif;
?>

单个作品集项目页面调用示例 #

<article class="single-portfolio max-w-4xl mx-auto p-8">
    <h1 class="text-3xl font-bold mb-6"><?php the_title(); ?></h1>
    
    <div class="project-thumbnail mb-8">
        <img 
            src="<?php echo esc_url(get_field('project_thumbnail')['url']); ?>" 
            alt="<?php echo esc_attr(get_the_title()); ?>"
            class="w-full h-auto rounded-lg"
        >
    </div>
    
    <div class="project-content mb-8">
        <?php the_field('project_description'); ?>
    </div>
    
    <div class="project-tags mb-8">
        <h4 class="text-lg font-semibold mb-2">项目标签：</h4>
        <?php
        $tags = get_field('project_tags');
        if( $tags ): ?>
            <div class="flex flex-wrap gap-2">
                <?php foreach( $tags as $tag ): ?>
                    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm"><?php echo $tag; ?></span>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>
    </div>
    
    <?php if( get_field('project_demo_link') ): ?>
        <a href="<?php echo esc_url(get_field('project_demo_link')); ?>" class="btn btn-primary" target="_blank">
            查看项目演示
        </a>
    <?php endif; ?>
</article>

内容的提问来源于stack exchange，提问作者Aurelian Spodarec