Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách thêm ô tìm kiếm cho taxonomy (Danh mục phân cấp) trong giao diện quản trị WordPress. Tính năng này giúp quản trị viên dễ dàng tìm kiếm danh mục một cách nhanh chóng, đặc biệt khi danh sách danh mục quá dài.
Tại Sao Cần Thêm Ô Tìm Kiếm Cho Danh Mục?
- Tiết kiệm thời gian: Với các trang web có hàng trăm danh mục, việc tìm kiếm thủ công rất mất thời gian.
- Tăng hiệu quả quản lý: Ô tìm kiếm giúp lọc danh mục ngay lập tức, hiển thị cả danh mục cha khi tìm thấy danh mục con.
- Tương thích với mọi taxonomy phân cấp: Mã này hoạt động trên tất cả các taxonomy như danh mục bài viết, danh mục sản phẩm WooCommerce, hoặc bất kỳ taxonomy tùy chỉnh nào.
Các Bước Thực Hiện
Bước 1: Thêm Mã Vào Tệp functions.php
Để thêm ô tìm kiếm, bạn cần chèn đoạn mã sau vào tệp functions.php của theme đang sử dụng. Nếu bạn sử dụng child theme, hãy thêm mã vào child theme để tránh mất thay đổi khi cập nhật theme.
Sao chép đoạn mã sau và dán vào cuối tệp functions.php:
/*
* Thêm ô tìm kiếm cho tất cả taxonomy có dạng phân cấp cha - con
* Author: d3vduy
*/
function add_box_search_to_all_hierarchical_taxonomies() {
?>
<script>
document.addEventListener('DOMContentLoaded', function () {
function addSearchToTab(tabPanel) {
if (!tabPanel.querySelector('.taxonomy-search-wrapper')) {
const searchWrapper = document.createElement('div');
searchWrapper.classList.add('taxonomy-search-wrapper');
searchWrapper.style.marginBottom = '10px';
const searchInput = document.createElement('input');
searchInput.type = 'text';
searchInput.placeholder = 'Tìm kiếm trong danh mục...';
searchInput.classList.add('taxonomy-search-input');
searchInput.style.width = '100%';
searchInput.style.padding = '5px';
searchWrapper.appendChild(searchInput);
tabPanel.prepend(searchWrapper);
// Sự kiện tìm kiếm
searchInput.addEventListener('input', function () {
const keyword = this.value.toLowerCase().trim();
const items = tabPanel.querySelectorAll('.categorychecklist li');
items.forEach(item => {
const label = item.querySelector('label');
const isMatch = label && label.textContent.toLowerCase().includes(keyword);
if (isMatch) {
item.style.display = ''; // Hiển thị mục khớp
showParents(item); // Hiển thị các mục cha
} else {
item.style.display = 'none'; // Ẩn mục không khớp
}
});
});
}
}
// Hiển thị tất cả cha của một mục nếu mục đó khớp
function showParents(item) {
let parentLi = item.closest('li'); // Lấy mục cha li
while (parentLi) {
parentLi.style.display = ''; // Hiển thị cha
parentLi = parentLi.closest('ul').closest('li'); // Lặp lên cấp cha tiếp theo
}
}
// Lấy tất cả các taxonomy meta box trên trang
const taxonomyMetaBoxes = document.querySelectorAll('.categorydiv');
taxonomyMetaBoxes.forEach(metaBox => {
const tabsPanels = metaBox.querySelectorAll('.tabs-panel');
tabsPanels.forEach(panel => {
// Áp dụng tìm kiếm cho cả "Tất cả danh mục" và "Dùng nhiều nhất"
if (panel.id.includes('-all') || panel.id.includes('-pop')) {
addSearchToTab(panel);
}
});
// Xử lý sự kiện click để chuyển đổi giữa các tab
const tabs = metaBox.querySelectorAll('.category-tabs a');
tabs.forEach(tab => {
tab.addEventListener('click', function (event) {
event.preventDefault();
tabs.forEach(t => t.classList.remove('active'));
tab.classList.add('active');
tabsPanels.forEach(panel => {
panel.style.display = 'none';
});
const selectedPanel = metaBox.querySelector(tab.getAttribute('href'));
if (selectedPanel) {
selectedPanel.style.display = 'block';
}
});
});
// Mặc định hiển thị tab đầu tiên
const defaultTab = metaBox.querySelector('.category-tabs a');
if (defaultTab) {
defaultTab.classList.add('active');
const defaultPanel = metaBox.querySelector(defaultTab.getAttribute('href'));
if (defaultPanel) {
defaultPanel.style.display = 'block';
}
}
});
});
</script>
<style>
.taxonomy-search-wrapper {
margin: 10px 0;
}
.taxonomy-search-input {
font-size: 14px;
width: 100%;
height: 38px;
padding: 5px;
border: 1px solid #ddd;
border-radius: 4px;
}
.category-tabs a.active {
font-weight: bold;
}
</style>
<?php
}
add_action('admin_footer', 'add_box_search_to_all_hierarchical_taxonomies');Bước 2: Lưu Tệp và Kiểm Tra Kết Quả
- Lưu tệp functions.php.
- Vào trang quản trị WordPress, mở một bài viết hoặc sản phẩm (nếu dùng WooCommerce).
- Kiểm tra khu vực danh mục (thường nằm ở cột bên phải). Bạn sẽ thấy một ô tìm kiếm xuất hiện phía trên danh sách danh mục.
Hình 1: Ô tìm kiếm được thêm vào danh mục bài viết.
Bước 3: Kiểm tra đoạn code
- Nhập từ khóa: Gõ tên danh mục hoặc một phần của nó vào ô tìm kiếm.
- Kết quả hiển thị: Danh mục khớp với từ khóa sẽ xuất hiện ngay lập tức. Nếu danh mục con khớp, các danh mục cha của nó cũng sẽ hiển thị.
- Chuyển tab: Thêm ô tìm kiếm cho taxonomy hoạt động trên cả tab “Tất cả danh mục” và “Dùng nhiều nhất”.
Hình 2: Kết quả tìm kiếm hiển thị danh mục con và danh mục cha.
Lưu Ý
- Sao lưu tệp functions.php trước khi chỉnh sửa để tránh lỗi.
- Nếu bạn sử dụng plugin như Advanced Custom Fields (ACF) hoặc taxonomy tùy chỉnh, hãy kiểm tra xem ô tìm kiếm có hiển thị đúng không.
- Mã này chỉ hoạt động trong giao diện quản trị, không ảnh hưởng đến giao diện người dùng.
Lời kết
Như vậy, chúng tôi đã hướng dẫn bạn thêm ô tìm kiếm cho taxonomy trong WordPress. Với đoạn mã trên, bạn có thể dễ dàng triển khai tính năng này mà không cần cài đặt plugin phức tạp, tối ưu hóa quy trình quản lý nội dung. Chúc các bạn thành công! Cảm ơn các bạn đã đến với thietkeweb.dev. Hẹn các bạn ở bài viết hướng dẫn tiếp theo, nhớ theo dõi để biết được nhiều mẹo hay trong WordPress!
