+Mở rộng và thu gọn danh sách danh mục kiểm soát , mở rộng tất cả và từng phần
Trang quản lý danh mục mặc định của WordPress (bảng Categories hoặc Custom Taxonomies trong WP-Admin) hiển thị danh sách theo cấu trúc phẳng. Khi bạn có nhiều danh mục cha – con phức tạp, hệ thống chỉ phân biệt bằng các dấu gạch ngang (—) thô sơ, khiến giao diện kéo dài lê thê và cực kỳ khó dóng hàng để kiểm soát trực quan.
Bài viết này sẽ hướng dẫn bạn cách nâng cấp trang quản lý danh mục trở thành một cấu trúc cây thư mục phân cấp rõ ràng, lùi sâu thông minh kèm đường kẻ dọc tinh tế mà không cần cài đặt thêm bất kỳ plugin nặng nề nào.
Giao diện sau khi nâng cấp có gì mới?
[videonoi=”https://www.youtube.com/watch?v=xfLoVaQxvv8″]Google Flow A-Z Tất Cả Tính Năng Bạn Cần Biết Để Tạo Video AI[/videonoi]
-
Thu gọn danh mục con tự động: Khi vừa tải trang, toàn bộ các nhánh danh mục con sẽ được ẩn đi để giải phóng không gian, giúp bảng quản trị gọn gàng tối đa.
-
Nút đóng/mở độc lập (+/-): Tự động chèn nút dấu cộng hoặc dấu trừ thô ngay trước các danh mục có chứa mục con. Bạn chỉ cần click trực tiếp vào nút để bung hoặc xếp nhánh đó lại mà không sợ bị xung đột hay nhảy dòng.
-
Thụt lề sâu 35px & Dóng hàng đứng: Mỗi cấp độ danh mục con sẽ tự động lùi sâu vào trong 35px. Đồng thời, một đường kẻ dọc mờ (dotted border) sẽ xuất hiện ở rìa trái của chữ tiêu đề, giúp bạn dễ dàng nhìn ra mục nào thuộc mục nào chỉ trong một cái liếc mắt.
[iconvideonoi=”https://www.youtube.com/watch?v=xfLoVaQxvv8″]Google Flow A-Z Tất Cả Tính Năng Bạn Cần Biết Để Tạo Video AI[/iconvideonoi]
[nutnhan=”Google Flow A-Z Tất Cả Tính Năng Bạn Cần Biết Để Tạo Video AI” rong=”250″ cao=”50″ canh=”trai”]https://www.youtube.com/watch?v=xfLoVaQxvv8[/nutnhan]
Hướng dẫn cài đặt mã nguồn cho Website
Bạn chỉ cần sao chép đoạn mã jQuery và CSS dưới đây, sau đó chèn vào cuối file functions.php của giao diện (Theme) đang sử dụng hoặc thêm thông qua một plugin quản lý mã snippet tùy biến.
Kết quả đạt được
/* ==========================================================================
THU GỌN VÀ MỞ RỘNG DANH SÁCH DANH MỤC TRONG BÀI VIẾT WP-ADMIN
--------------------------------------------------------------------------
* Mở rộng và thu gọn danh sách danh mục kiểm soát , mở rộng tất cả và từng phần
========================================================================== */
function custom_admin_edit_tags_toggle_script() {
echo '<script type="text/javascript">
jQuery(document).ready(function($) {
var $table = $(".wp-list-table tbody");
// 1. Quét qua toàn bộ các hàng để gắn cấp độ và thụt lề sâu (35px mỗi cấp)
$table.find("tr").each(function() {
var $row = $(this);
var $rowTitleLink = $row.find(".row-title");
var text = $rowTitleLink.text();
var level = (text.match(/—/g) || []).length;
if (level > 0) {
$row.addClass("cat-level-" + level).attr("data-level", level);
var cleanText = text.replace(/—\s*/g, "");
$rowTitleLink.text(cleanText);
var indentDistance = level * 35;
$row.find("td.column-name strong").css({
"padding-left": indentDistance + "px",
"display": "inline-block",
"border-left": "2px dotted #ccd0d4"
});
} else {
$row.addClass("cat-level-0").attr("data-level", 0);
}
});
// 2. Thiết lập nút bấm cha-con độc lập và căn chỉnh vị trí theo độ thụt lề mới
$table.find("tr").each(function() {
var $currentRow = $(this);
var currentLevel = parseInt($currentRow.attr("data-level"));
var $nextRow = $currentRow.next("tr");
if ($nextRow.length > 0) {
var nextLevel = parseInt($nextRow.attr("data-level"));
if (nextLevel > currentLevel) {
var currentPadding = parseInt($currentRow.find("td.column-name strong").css("padding-left")) || 0;
$currentRow.find("td.column-name strong").css({
"position": "relative",
"padding-left": (currentPadding + 20) + "px",
"display": "inline-block"
}).prepend("<span class=\"toggle-list-cat-btn\" style=\"position:absolute; left:" + currentPadding + "px; top:0; cursor:pointer; font-weight:bold; color:#007cba; user-select:none; font-size:16px; font-family:monospace; line-height:1;\">+</span> ");
}
}
});
// 3. Chèn cặp nút điều khiển hàng loạt lên thanh tiêu đề của bảng
var $bulkActions = $(".tablenav.top .actions.bulkactions");
if ($bulkActions.length > 0) {
var controlHtml = "<div style=\"display:inline-block; margin-left:15px; vertical-align:middle;\">" +
"<button type=\"button\" id=\"btn-expand-all-cats\" class=\"button button-secondary\" style=\"margin-right:5px; height:30px;\">Mở rộng tất cả</button>" +
"<button type=\"button\" id=\"btn-collapse-all-cats\" class=\"button button-secondary\" style=\"height:30px;\">Thu gọn tất cả</button>" +
"</div>";
$bulkActions.after(controlHtml);
}
// 4. Mặc định ẩn tất cả các danh mục con khi tải trang
$table.find("tr").each(function() {
if (parseInt($(this).attr("data-level")) > 0) {
$(this).hide();
}
});
// 5. Xử lý sự kiện click trực tiếp vào nút dấu cộng để bắt buộc sổ ra
$(document).on("click", ".toggle-list-cat-btn", function(e) {
e.preventDefault();
e.stopPropagation();
var $btn = $(this);
var $parentRow = $btn.closest("tr");
var parentLevel = parseInt($parentRow.attr("data-level"));
var $nextRows = $parentRow.nextAll("tr");
if (!$btn.hasClass("is-open")) {
$btn.addClass("is-open").text("-");
$nextRows.each(function() {
var $subRow = $(this);
var subLevel = parseInt($subRow.attr("data-level"));
if (subLevel === parentLevel + 1) {
$subRow.show();
} else if (subLevel <= parentLevel) {
return false;
}
});
} else {
$btn.removeClass("is-open").text("+");
$nextRows.each(function() {
var $subRow = $(this);
var subLevel = parseInt($subRow.attr("data-level"));
if (subLevel > parentLevel) {
$subRow.hide();
$subRow.find(".toggle-list-cat-btn").removeClass("is-open").text("+");
} else {
return false;
}
});
}
});
// 6. Xử lý nút bấm MỞ RỘNG TẤT CẢ
$(document).on("click", "#btn-expand-all-cats", function(e) {
e.preventDefault();
$table.find("tr").show(); // Hiện toàn bộ các hàng
$table.find(".toggle-list-cat-btn").addClass("is-open").text("-"); // Đổi tất cả nút sang dấu trừ
});
// 7. Xử lý nút bấm THU GỌN TẤT CẢ
$(document).on("click", "#btn-collapse-all-cats", function(e) {
e.preventDefault();
$table.find("tr").each(function() {
if (parseInt($(this).attr("data-level")) > 0) {
$(this).hide(); // Ẩn toàn bộ mục con cháu
}
});
$table.find(".toggle-list-cat-btn").removeClass("is-open").text("+"); // Đổi tất cả nút về dấu cộng
});
});
</script>';
}
add_action('admin_footer-edit-tags.php', 'custom_admin_edit_tags_toggle_script');
Đoạn script được tối ưu hóa để chỉ hoạt động trên trang quản trị danh mục (edit-tags.php), hoàn toàn không làm ảnh hưởng đến tốc độ hay giao diện ở các khu vực khác của hệ thống.
Ngay sau khi lưu file, bạn truy cập lại danh sách danh mục sẽ thấy một giao diện cây phân cấp vô cùng trực quan và mỹ mãn, giúp việc theo dõi, chỉnh sửa cấu trúc nội dung website trở nên dễ dàng và chuyên nghiệp hơn rất nhiều!
