我想出了一个解决方案,在设置页面上,将在复选框旁边显示所有灵活的内容布局名称,当您尝试按下“添加”按钮时,您可以取消选择从列表中删除的布局添加新布局。
作为简要介绍,我使用 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 文件中存在的每个禁用字段,并尝试在 data-layout 属性中找到匹配项,如果存在匹配项,则壁橱列表项(它是父项)将被删除。
然后我们必须重新添加<script>
标签并放回页面中,以便使用新清理的列表而不是旧列表。
完成这一切后,您应该在设置菜单中有一个区域,您可以在其中启用/禁用所有布局。然后,您应该能够添加/编辑页面并选择Add
按钮,并且您应该只看到您在设置页面中选择的布局。