安装WPCode，插入代码：
/**
* 在文章列表页添加树状可折叠分类筛选器（含"所有分类"选项）
*/
add_action('admin_footer-edit.php', function() {
$screen = get_current_screen();
if ($screen->post_type !== 'post') return;
// 递归生成分类树 HTML
function build_category_tree($parent = 0, $level = 0) {
$categories = get_categories(['hide_empty' => false, 'parent' => $parent]);
if (!$categories) return '';
$html = '';
foreach ($categories as $cat) {
$children = get_categories(['hide_empty' => false, 'parent' => $cat->term_id]);
$has_children = !empty($children);
$indent = str_repeat('—', $level);
$html .= '<div class="tree-node" data-id="' . $cat->term_id . '">';
$html .= '<div class="tree-row">';
$html .= '<span class="tree-toggle">' . ($has_children ? '📁' : '📄') . '</span>';
$html .= '<span class="tree-label">' . $indent . ' ' . esc_html($cat->name) . '</span>';
$html .= '</div>';
if ($has_children) {
$html .= '<div class="tree-children" style="display:none;">';
$html .= build_category_tree($cat->term_id, $level + 1);
$html .= '</div>';
}
$html .= '</div>';
}
return $html;
}
// 获取当前 URL 中的分类 ID
$current_cat_id = isset($_GET['cat']) ? intval($_GET['cat']) : 0;
?>
<style>
.tree-cat-wrapper {
display: inline-block;
margin-left: 10px;
position: relative;
vertical-align: top;
}
.tree-cat-btn {
background: #f0f0f1;
border: 1px solid #8c8f94;
border-radius: 3px;
padding: 6px 12px;
cursor: pointer;
font-size: 13px;
}
.tree-cat-panel {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
border: 1px solid #ccd0d4;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
width: 280px;
z-index: 9999;
margin-top: 5px;
}
.tree-cat-search {
padding: 10px;
border-bottom: 1px solid #eee;
}
.tree-cat-search input {
width: 100%;
padding: 6px;
border: 1px solid #ccc;
border-radius: 3px;
}
.tree-cat-list {
max-height: 320px;
overflow-y: auto;
padding: 8px;
}
.tree-node {
margin: 2px 0;
}
.tree-row {
display: flex;
align-items: center;
padding: 4px;
border-radius: 3px;
cursor: pointer;
}
.tree-row:hover {
background: #f0f0f0;
}
.tree-row.selected {
background: #e5f0fd;
font-weight: bold;
color: #0073aa;
}
.tree-toggle {
width: 28px;
text-align: center;
flex-shrink: 0;
}
.tree-label {
flex: 1;
}
.tree-children {
margin-left: 24px;
}
.tree-cat-footer {
padding: 8px 10px;
border-top: 1px solid #eee;
text-align: right;
background: #fafafa;
}
.tree-cat-footer .button {
margin-left: 8px;
}
.tree-root-item {
border-bottom: 1px solid #eee;
margin-bottom: 5px;
padding-bottom: 5px;
}
</style>
<script>
jQuery(document).ready(function($) {
var $actions = $('.tablenav.top .alignleft.actions').first();
if (!$actions.length) return;
// 构建界面
var $wrapper = $('<div class="tree-cat-wrapper">');
var $btn = $('<div class="tree-cat-btn">📁 树状分类</div>');
var $panel = $('<div class="tree-cat-panel">');
var $searchDiv = $('<div class="tree-cat-search"><input type="text" id="tree-cat-search" placeholder="搜索分类..."></div>');
var $listDiv = $('<div class="tree-cat-list">');
var $footer = $('<div class="tree-cat-footer"><button type="button" id="tree-cat-apply" class="button button-small">应用筛选</button> <button type="button" id="tree-cat-clear" class="button button-small">清除</button></div>');
$panel.append($searchDiv);
$panel.append($listDiv);
$panel.append($footer);
$wrapper.append($btn);
$wrapper.append($panel);
$actions.append($wrapper);
// 构建分类树 HTML（包含"所有分类"根节点）
var allCategoriesHtml = '<?php echo addslashes(build_category_tree()); ?>';
var fullTreeHtml = '<div class="tree-node tree-root-item" data-id="0">' +
'<div class="tree-row" data-id="0">' +
'<span class="tree-toggle">📁</span>' +
'<span class="tree-label">所有分类</span>' +
'</div>' +
'<div class="tree-children" style="display:block;">' +
allCategoriesHtml +
'</div>' +
'</div>';
$listDiv.html(fullTreeHtml);
// 从 URL 获取当前分类 ID
var urlParams = new URLSearchParams(window.location.search);
var currentCatId = urlParams.get('cat');
var currentSelectedId = currentCatId ? parseInt(currentCatId) : null;
// 高亮当前选中的分类，并展开其父级
function highlightCurrentCategory() {
if (currentSelectedId) {
var $targetNode = $listDiv.find('.tree-node[data-id="' + currentSelectedId + '"]');
if ($targetNode.length) {
$targetNode.find('.tree-row').addClass('selected');
$targetNode.parents('.tree-children').show();
$targetNode.parents('.tree-children').prev('.tree-node').find('.tree-toggle').text('📂');
}
} else {
// 没有选中任何分类时，高亮"所有分类"
$listDiv.find('.tree-node[data-id="0"] > .tree-row').addClass('selected');
}
}
// 点击整个 .tree-row
$listDiv.on('click', '.tree-row', function(e) {
e.stopPropagation();
var $row = $(this);
var $node = $row.closest('.tree-node');
var $children = $node.children('.tree-children');
var $toggle = $row.find('.tree-toggle');
var hasChildren = $children.length > 0;
var catId = $node.data('id');
// 清除所有选中样式
$listDiv.find('.tree-row').removeClass('selected');
// 选中当前行
$row.addClass('selected');
currentSelectedId = catId === 0 ? null : catId;
// 如果有子分类，同时执行折叠/展开
if (hasChildren) {
$children.toggle();
var isOpen = $children.is(':visible');
$toggle.text(isOpen ? '📂' : '📁');
}
});
// 应用筛选
$('#tree-cat-apply').on('click', function() {
if (currentSelectedId) {
window.location.href = '<?php echo admin_url('edit.php'); ?>?post_type=post&cat=' + currentSelectedId;
} else {
// 选中"所有分类"时，清除筛选
window.location.href = '<?php echo admin_url('edit.php'); ?>?post_type=post';
}
});
// 清除筛选
$('#tree-cat-clear').on('click', function() {
window.location.href = '<?php echo admin_url('edit.php'); ?>?post_type=post';
});
// 搜索功能
$('#tree-cat-search').on('keyup', function() {
var kw = $(this).val().toLowerCase();
$listDiv.find('.tree-node').each(function() {
var $node = $(this);
var label = $node.find('.tree-label').text().toLowerCase();
if (label.indexOf(kw) !== -1 || $node.data('id') === 0) {
$node.show();
if ($node.data('id') !== 0) {
$node.parents('.tree-children').show();
$node.parents('.tree-children').prev('.tree-node').find('.tree-toggle').text('📂');
}
} else {
$node.hide();
}
});
});
// 按钮切换面板
$btn.on('click', function(e) {
e.stopPropagation();
$panel.toggle();
// 每次打开面板时，重新高亮当前选中的分类
highlightCurrentCategory();
});
// 点击面板内部不关闭
$panel.on('click', function(e) {
e.stopPropagation();
});
// 点击其他地方关闭面板
$(document).on('click', function() {
$panel.hide();
});
// 初始化高亮
highlightCurrentCategory();
});
</script>
<?php
});
0 条评论