列出可用的 ACF 灵活布局选项

Question

我正在为 Wordpress 安装创建一个设置系统，如果当前网站不需要，超级管理员可以禁用一些 ACF 灵活内容布局，而无需修改插件的结构。

我正在寻找一种方法来在新的管理页面中列出所有可用的 ACF 灵活内容布局。

查看插件的文件夹后，我在 class-acf-field-flexible-content.php 中找到了以下代码：

<script type="text-html" class="tmpl-popup"><?php 
    ?><div class="acf-fc-popup"><ul><?php foreach( $layouts as $layout ): 

        $atts = array(
            'href'            => '#',
            'data-layout'    => $layout['name'],
            'data-min'         => $layout['min'],
            'data-max'         => $layout['max'],
        );

        ?><li><a <?php acf_esc_attr_e( $atts ); ?>><?php echo $layout['label']; ?></a></li><?php 

    endforeach; ?></ul></div>
</script>

它构建了一个可用布局列表，供客户端在创建新布局时使用 posts/pages。

有谁知道我可以在 PHP 中构建 ACF 布局数组的简单方法，我可以在 WP Admin 中的不同页面上显示这些布局？

抱歉，我真的没有任何代码可以显示，这是一个有点独特的请求

Answer 1

那么您正在寻找的似乎是以下内容：

客户网站有一个自定义字段，其中列出了多个选项供他们 select 以更改页面布局（有点像模板）。
您希望能够在不编辑自定义字段 and/or 插件代码的情况下为某些客户网站禁用某些布局。

我对此的回答是使用 ACF User Role Plugin 并限制可以看到某些字段的帐户，即将这些字段限制为您的用户角色，这样只有您可以访问它（可能必须创建一个新用户角色（如果他们与您具有相同的角色）。

然后，您可能希望为每个布局添加另一个部分到您当前的自定义字段，该部分是一个显示类似 "Enable" 和 "Disable" 的单选按钮。然后您想编辑您的布局字段以具有条件格式，它会检查此字段的值，如果它不等于启用则不显示。

安装插件
使用选项 enable/disable
限制可以看到单选按钮字段的用户角色
为布局添加条件，仅在匹配的单选按钮等于启用时显示
启用/禁用您不想显示的布局

其他步骤 - 如果他们共享相同的角色，您可能需要为此方法创建另一个用户角色。

您可以使用多个插件，只需在 wordpress 中搜索创建一个新用户角色即可。您所要做的就是赋予它与您的角色完全相同的权限，但它允许您 select 一个只适用于您的角色，因此他们看不到该字段。

我希望这对您有所帮助，如果没有，我可以进一步澄清。

选项 2：

创建选项页面，将其视图限制为超级管理员
将复选框添加到 disable/enable
连接到灵活字段下拉列表
运行 if 语句运行 remove from array php on checkbox value = disable
更新灵活字段下拉列表
完成

既然您对其他人的回答感到满意，我不会为此查看代码，只是减去了 json 部分和成功消息。

Answer 2

我想出了一个解决方案，在设置页面上，将在复选框旁边显示所有灵活的内容布局名称，您可以在其中取消 select 当您按下时从列表中删除哪些布局'Add' 按钮，当您尝试添加新布局时。

作为简要介绍，我使用 acf-json 获取所有灵活布局名称，然后创建另一个 json 文件，其中包含我希望禁用的布局名称。然后我运行一个查看每个布局名称的函数，检查它是否不在禁用列表中，如果是，它将被删除。

首先，我在 ACF 中初始化了本地 JSON。为此，请按照 https://www.advancedcustomfields.com/resources/local-json/.

上的步骤操作

然后我在 functions.php:

中创建了一个新的设置页面

<?php
function add_theme_menu_item()
{
    add_options_page("Flexible Layouts", "Flexible Layouts", "manage_options", "flexible-layouts", "theme_settings_page", null, 99);
}

add_action("admin_menu", "add_theme_menu_item");
?>

在 theme_settings_page 函数中，您需要为灵活内容组解码 JSON：

<?php
$jsonURL = get_template_directory_uri(). "/acf-json/flexible_content_group.json";
$contents = file_get_contents("{$jsonURL}");
$data =  json_decode($contents);
?>

然后我对一个 JSON 文件做了同样的事情，该文件将包含所有禁用的字段（我将很快解释这个文件是如何创建的）：

<?php
$jsonDisabledFieldsURL = get_template_directory_uri(). "/acf-json/disabledFields.json";
$disabledFieldsContents = file_get_contents("{$jsonDisabledFieldsURL}");
$disabledFieldsData =  json_decode($disabledFieldsContents);
?>

然后我将所有布局名称推送到数组 $availableOptions:

<?php
$availableOptions = [];
foreach($data->fields as $field) {
    foreach($field->layouts as $layout) {
        array_push($availableOptions, $layout->name);
    }
}
?>

所以我们需要一个包含所有带有复选框和提交按钮的字段的列表。使用提交按钮，我使用 ajax 到 post 我放置在数组中的禁用字段：

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/lib/sweetalert2.js"></script>
<script>
    jQuery('.submit_json_handler').click(function(e){
        e.preventDefault();
        var self = jQuery(this);
        var array = [];

        jQuery('input:checkbox:not(:checked)').each(function() {
            array.push(jQuery(this).val());
        });

        jQuery.ajax({
            type:'POST',
            url:'<?php echo get_template_directory_uri(); ?>/acf-json/custom_json_handler.php',
            data: {
                'disabled_fields' : array
            },
            success:function(data){
                console.log(data);
                swal(
                  'Success!',
                  'The active layouts have now been updated.',
                  'success'
                )
            }
        });
    });
</script>

我使用 SweetAlert2 插件 (https://sweetalert2.github.io/) 以便在字段修改后处理成功消息。

我的 custom_json_handler.php 代码获取 posted 禁用字段并将它们推送到数组中。然后将该数组编码到前面提到的 JSON 文件中 (disabledFields.json):

<?php
    $disabledFields = $_POST['disabled_fields'];
    $disabledFieldsArray = [];

    try {   

        foreach($disabledFields as $field) {
            array_push($disabledFieldsArray, $field); 
        }

        $fp = fopen($_SERVER['DOCUMENT_ROOT']."/wp-content/themes/pblite-theme/acf-json/disabledFields.json","wb");
        fwrite($fp,json_encode($disabledFieldsArray));
        fclose($fp);

    }
    catch(Exception $e) {
        return $e;
    }

    echo "Success!";
?>

theme_settings_page 函数中的最后一块拼图是创建将显示所有布局的表单，旁边的复选框可以 checked/unchecked 基于 select编辑禁用字段：

<?php
$activeLayouts = array_diff($availableOptions, $disabledFieldsData);

echo "<form action=\"post\">";
echo "<table>";
foreach($data->fields as $field) {

    foreach($field->layouts as $layout) {

        if(in_array($layout->name, $activeLayouts)) {
            $checked = "checked";
        } else {
            $checked = "";
        }

        echo "<tr><td><input type=\"checkbox\" {$checked} name=\"disabled_flexible_layouts[]\" value=\"{$layout->name}\" /></td><td>{$layout->label}</td></tr>";

    }

}

echo "</table>";
echo "<p class=\"submit\"><input type=\"button\" value=\"Submit\" name=\"submit\" class=\"button button-primary submit_json_handler\" /></p>";
echo "</form>";
?>

这将为您提供布局列表，其中禁用的字段将被取消选中。

最后，我需要使用禁用的字段 JSON 以便在您 select 布局的页面中删除 'Add' 按钮内的列表项。为此，我在 functions.php 中创建了另一个函数，它挂接到 acf/input/admin_head 中（因此当 ACF 存在时该函数会很有趣）：

<?php

function acf_admin_head_layout( $field ) {

?>

<script type="text/javascript">

    (function($) {

        $(document).ready(function(){

            $.get('<?php echo get_template_directory_uri(); ?>/acf-json/disabledFields.json', function(data) {

            // alert(data);
                $.each(data, function(i, item) {

                    tmpl = $('.tmpl-popup').html();

                    //Create jQuery object
                    tmplDiv = $('<div>', {html : tmpl});

                    //Target element and remove it
                    tmplDiv.find('a[data-layout="'+item+'"]').closest('li').remove();

                    tmpl = tmplDiv.html();

                    $('.tmpl-popup').replaceWith('<script type="text-html" class="tmpl-popup">'+tmpl+'</sc'+'ript>');

                });

            });                   

        });

    })(jQuery);  

</script>  

<?php

}

add_action('acf/input/admin_head', 'acf_admin_head_layout', 10, 1);

?>

这将在包含布局选项的字符串所在的页面中找到 class，将其转换为 HTML，以便我们能够操作内容并将其存储在临时变量中.然后我们遍历 JSON 文件中存在的每个禁用字段，并尝试在数据布局属性中找到匹配项，如果有匹配项，壁橱列表项（它的父项）将被移除。

然后我们必须重新添加 <script> 标签并放回页面中，以便使用新清理的列表而不是旧列表。

完成所有这些操作后，您应该在设置菜单中有一个区域，您可以在其中拥有所有可以enable/disable 的布局。然后您应该能够 add/edit 一个页面和 select Add 按钮，并且您应该只能看到您在设置页面中 select 编辑的布局。

列出可用的 ACF 灵活布局选项

List available ACF Flexible Layout options

php

wordpress

advanced-custom-fields

acfpro