You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在WP后台新页面生成ACF Flexible Content布局数组并展示?

获取并展示ACF Flexible Content布局的简便PHP方案

没问题,ACF本身提供了一套内置函数和API,完全可以不用碰插件核心文件,就能轻松获取所有Flexible Content布局并在自定义后台页面展示。下面是具体的实现思路和代码:

核心思路

ACF把所有字段组和字段的信息都存在数据库里,我们可以用官方提供的函数直接读取这些数据,筛选出Flexible Content类型的字段,然后提取它们的布局数组即可。

完整实现代码

把这段代码放到你的主题functions.php里,或者单独做成一个小插件:

// 注册自定义后台设置页面
add_action('admin_menu', 'acf_flex_layouts_settings_page');
function acf_flex_layouts_settings_page() {
    // 在「设置」菜单下添加子页面,只有超级管理员能访问
    add_submenu_page(
        'options-general.php',
        'ACF Flexible布局管理器',
        'ACF布局管理',
        'manage_options',
        'acf-flex-layouts',
        'acf_flex_layouts_render_page'
    );
}

// 渲染后台页面内容
function acf_flex_layouts_render_page() {
    // 权限校验
    if (!current_user_can('manage_options')) {
        wp_die(__('你没有足够的权限访问此页面。'));
    }

    // 初始化存储布局的数组
    $flex_layouts = [];
    
    // 获取所有ACF字段组
    $field_groups = acf_get_field_groups();
    
    foreach ($field_groups as $group) {
        // 获取当前字段组下的所有字段
        $fields = acf_get_fields($group['ID']);
        
        foreach ($fields as $field) {
            // 筛选出Flexible Content类型的字段
            if ($field['type'] === 'flexible_content' && !empty($field['layouts'])) {
                $flex_layouts[$field['name']] = [
                    'label' => $field['label'],
                    'layouts' => $field['layouts']
                ];
            }
        }
    }

    // 输出页面HTML
    ?>
    <div class="wrap">
        <h1><?php echo esc_html(get_admin_page_title()); ?></h1>
        
        <?php if (!empty($flex_layouts)) : ?>
            <?php foreach ($flex_layouts as $field_name => $field_data) : ?>
                <div class="postbox">
                    <h2 class="hndle">
                        <span><?php echo esc_html($field_data['label']); ?> (字段名: <?php echo esc_html($field_name); ?>)</span>
                    </h2>
                    <div class="inside">
                        <ul style="list-style-type: disc; margin-left: 20px;">
                            <?php foreach ($field_data['layouts'] as $layout) : ?>
                                <li style="margin: 8px 0;">
                                    <strong><?php echo esc_html($layout['label']); ?></strong>
                                    <code style="margin-left: 10px; background: #f0f0f1; padding: 2px 6px; border-radius: 3px;">
                                        <?php echo esc_html($layout['name']); ?>
                                    </code>
                                    <?php if (!empty($layout['min'])) : ?>
                                        <span style="margin-left: 10px; color: #646970;">最小数量: <?php echo esc_html($layout['min']); ?></span>
                                    <?php endif; ?>
                                    <?php if (!empty($layout['max'])) : ?>
                                        <span style="margin-left: 10px; color: #646970;">最大数量: <?php echo esc_html($layout['max']); ?></span>
                                    <?php endif; ?>
                                </li>
                            <?php endforeach; ?>
                        </ul>
                    </div>
                </div>
            <?php endforeach; ?>
        <?php else : ?>
            <p><?php _e('当前网站未设置任何Flexible Content字段。'); ?></p>
        <?php endif; ?>
    </div>
    <?php
}

扩展:添加禁用布局的功能

如果你需要让超级管理员能直接在这个页面禁用布局,可以再加上保存选项和过滤布局的逻辑:

// 保存禁用的布局设置
add_action('admin_post_save_acf_disabled_layouts', 'save_acf_disabled_layouts');
function save_acf_disabled_layouts() {
    if (!current_user_can('manage_options')) {
        wp_die(__('权限不足。'));
    }

    check_admin_referer('acf_disabled_layouts_nonce');
    
    $disabled_layouts = isset($_POST['disabled_layouts']) ? array_map('sanitize_text_field', $_POST['disabled_layouts']) : [];
    update_option('acf_disabled_flex_layouts', $disabled_layouts);
    
    wp_redirect(add_query_arg('page', 'acf-flex-layouts', admin_url('options-general.php')));
    exit;
}

// 过滤Flexible Content布局,移除禁用项
add_filter('acf/prepare_field', 'filter_disabled_acf_flex_layouts');
function filter_disabled_acf_flex_layouts($field) {
    if ($field['type'] !== 'flexible_content') {
        return $field;
    }

    $disabled_layouts = get_option('acf_disabled_flex_layouts', []);
    
    // 过滤掉禁用的布局
    $field['layouts'] = array_filter($field['layouts'], function($layout) use ($disabled_layouts) {
        return !in_array($layout['name'], $disabled_layouts);
    });

    return $field;
}

你只需要在页面渲染函数里给每个布局项添加复选框,再加上提交按钮,就能让管理员勾选禁用的布局并保存。这样一来,超级管理员完全不需要修改ACF插件的任何文件,就能在后台管理所有Flexible Content布局的启用/禁用状态。

内容的提问来源于stack exchange,提问作者Andy Holmes

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.15 07:56:04