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



我正在努力为 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>

它构建了一个可用布局列表,供客户端在创建新帖子/页面时使用。

有谁知道一种简单的方法,我可以在 PHP 中构建一个 ACF 布局数组,我可以在 WP 管理中的不同页面上显示?

抱歉,我真的没有任何代码要显示,这是一个独特的请求

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

作为简要介绍,我使用 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 发布我放置在数组中的禁用字段:

<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代码获取已发布的禁用字段并将它们推送到数组中。然后将数组编码到前面提到的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函数中的最后一块拼图是创建将显示所有布局的表单,旁边带有复选框,可以根据选定的禁用字段选中/取消选中这些复选框:

<?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 才能删除您选择布局的页面中"添加"按钮中的列表项。为此,我在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);
?>

这将在页面中找到包含布局选项的字符串所在的类,将其转换为 HTML,以便我们能够操作内容并将其存储在临时变量中。然后,我们遍历 JSON 文件中存在的每个禁用字段,并尝试在数据布局属性中查找匹配项,如果存在匹配项,则将删除最衣橱列表项(其父项)。

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

完成所有操作后,您应该在设置菜单中有一个区域,您可以在其中启用/禁用所有布局。然后,您应该能够添加/编辑页面并选择Add按钮,并且您应该只能看到您在设置页面中选择的布局。

所以你正在寻找的是以下内容:

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

我的答案是使用 ACF 用户角色插件并限制可以看到某些字段的帐户,即将字段限制为仅您的用户角色,以便只有您有权访问它(如果他们与您具有相同的角色,则可能必须创建一个新的用户角色)。

然后,您需要为每个布局添加另一个部分,该部分是一个单选按钮,显示"启用"和"禁用"之类的内容。然后,您希望编辑布局字段以具有条件格式,其中检查此字段的值,如果它不等于启用,则不显示。

  1. 安装插件
  2. 创建具有启用/禁用选项的单选按钮字段
  3. 限制可以看到单选按钮字段的用户角色
  4. 向布局添加条件,以仅在匹配的单选按钮等于启用时显示
  5. 启用/禁用您不想显示的布局

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

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

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

选项 2:

  1. 创建选项页面,将其视图限制为超级用户
  2. 将复选框添加到选项页面以禁用/启用
  3. 连接到灵活字段下拉列表
  4. 运行 if 语句以运行从数组 php 中删除复选框值 = 禁用
  5. 更新灵活字段下拉列表
  6. 完成

由于您对另一个答案感到满意,因此我不会为此编写代码,因此减去json部分和成功消息会相似。

最新更新