如何在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
相关产品推荐
相关产品推荐

