Bạn đã bao giờ cảm thấy mệt mỏi khi phải lục tung hàng tá danh mục trong WordPress mỗi khi đăng bài hay sản phẩm mới chưa? Nếu câu trả lời là “Có”, bài viết này sẽ mang đến cho bạn “bửu bối thần kỳ” để thêm ô tìm kiếm danh mục (category) cho cả bài viết và sản phẩm WordPress. Hãy cười thả ga khi thực hiện nhé, vì code luôn mang lại kết quả tuyệt vời!
1. Lợi Ích Của Việc Thêm Ô Tìm Kiếm Danh Mục
- Tiết kiệm thời gian: Không phải “mò mẫm” giữa cả tá danh mục chằng chịt.
- Chuyên nghiệp hơn: Giao diện quản trị thông minh khiến bạn cảm thấy như một developer thực thụ.
- Dễ dàng quản lý: Tìm kiếm nhanh giúp giảm nhầm lẫn khi chọn danh mục.
2. Thêm Ô Tìm Kiếm Danh Mục Cho Bài Viết
Chỉ với đoạn code bên dưới, bạn sẽ biến khu vực danh mục trong trang quản trị bài viết thành một “cỗ máy tìm kiếm” đích thực. Copy và dán ngay vào file functions.php của theme:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
/* search danh muc bai viet */ function muathemewpgiare_customplugin_search_categories_meta_box( $post, $box ) { $defaults = array( 'taxonomy' => 'category' ); if ( ! isset( $box['args'] ) || ! is_array( $box['args'] ) ) { $args = array(); } else { $args = $box['args']; } $r = wp_parse_args( $args, $defaults ); $tax_name = esc_attr( $r['taxonomy'] ); $taxonomy = get_taxonomy( $r['taxonomy'] ); ?> <script type="text/javascript"> jQuery(document).ready(function(){ function removeDiacritics(str) { return str.normalize("NFD").replace(/[\u0300-\u036f]/g, ""); } jQuery('#catSearch').keyup(function() { var val = removeDiacritics(jQuery('#catSearch').val().toLowerCase()); var lis = jQuery("#<?php echo $tax_name;?>checklist li"); lis.hide(); var containingLabels = jQuery("#<?php echo $tax_name;?>checklist label").filter(function() { return removeDiacritics(jQuery(this).text().toLowerCase()).includes(val); }); containingLabels.closest('li').find('li').andSelf().show(); containingLabels.parents('#<?php echo $tax_name;?>checklist li').show(); }); }); </script> <div id="taxonomy-<?php echo $tax_name; ?>" class="categorydiv"> Search: <input id="catSearch" type="text" value="" /> <ul id="<?php echo $tax_name; ?>-tabs" class="category-tabs"> <li class="tabs"><a href="#<?php echo $tax_name; ?>-all"><?php echo $taxonomy->labels->all_items; ?></a></li> <li class="hide-if-no-js"><a href="#<?php echo $tax_name; ?>-pop"><?php _e( 'Most Used' ); ?></a></li> </ul> <div id="<?php echo $tax_name; ?>-pop" class="tabs-panel" style="display: none;"> <ul id="<?php echo $tax_name; ?>checklist-pop" class="categorychecklist form-no-clear" > <?php $popular_ids = wp_popular_terms_checklist( $tax_name ); ?> </ul> </div> <div id="<?php echo $tax_name; ?>-all" class="tabs-panel"> <?php $name = ( $tax_name == 'category' ) ? 'post_category' : 'tax_input[' . $tax_name . ']'; echo "<input type='hidden' name='{$name}[]' value='0' />"; ?> <ul id="<?php echo $tax_name; ?>checklist" data-wp-lists="list:<?php echo $tax_name; ?>" class="categorychecklist form-no-clear"> <?php wp_terms_checklist( $post->ID, array( 'taxonomy' => $tax_name, 'popular_cats' => $popular_ids,'checked_ontop' => true ) ); ?> </ul> </div> <?php if ( current_user_can( $taxonomy->cap->edit_terms ) ) : ?> <div id="<?php echo $tax_name; ?>-adder" class="wp-hidden-children"> <h4> <a id="<?php echo $tax_name; ?>-add-toggle" href="#<?php echo $tax_name; ?>-add" class="hide-if-no-js"> <?php /* translators: %s: add new taxonomy label */ printf( __( '+ %s' ), $taxonomy->labels->add_new_item ); ?> </a> </h4> <p id="<?php echo $tax_name; ?>-add" class="category-add wp-hidden-child"> <label class="screen-reader-text" for="new<?php echo $tax_name; ?>"><?php echo $taxonomy->labels->add_new_item; ?></label> <input type="text" name="new<?php echo $tax_name; ?>" id="new<?php echo $tax_name; ?>" class="form-required form-input-tip" value="<?php echo esc_attr( $taxonomy->labels->new_item_name ); ?>" aria-required="true"/> <label class="screen-reader-text" for="new<?php echo $tax_name; ?>_parent"> <?php echo $taxonomy->labels->parent_item_colon; ?> </label> <?php wp_dropdown_categories( array( 'taxonomy' => $tax_name, 'hide_empty' => 0, 'name' => 'new' . $tax_name . '_parent', 'orderby' => 'name', 'hierarchical' => 1, 'show_option_none' => '— ' . $taxonomy->labels->parent_item . ' —' ) ); ?> <input type="button" id="<?php echo $tax_name; ?>-add-submit" data-wp-lists="add:<?php echo $tax_name; ?>checklist:<?php echo $tax_name; ?>-add" class="button category-add-submit" value="<?php echo esc_attr( $taxonomy->labels->add_new_item ); ?>" /> <?php wp_nonce_field( 'add-' . $tax_name, '_ajax_nonce-add-' . $tax_name, false ); ?> <span id="<?php echo $tax_name; ?>-ajax-response"></span> </p> </div> <?php endif; ?> </div> <?php } function muathemewpgiare_customplugin_update_collection_box() { remove_meta_box( 'categorydiv', 'post', 'side'); add_meta_box('customcategorydiv', 'Categories', 'muathemewpgiare_customplugin_search_categories_meta_box', 'post', 'side', 'core', array( 'taxonomy' => 'category' )); } add_filter('admin_menu', 'muathemewpgiare_customplugin_update_collection_box'); |
3. Thêm Ô Tìm Kiếm Danh Mục Cho Sản Phẩm
Chỉ với đoạn code bên dưới, bạn sẽ biến khu vực danh mục trong trang quản trị bài viết thành một “cỗ máy tìm kiếm” đích thực. Copy và dán ngay vào file functions.php của theme:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
// Tìm kiếm danh mục sản phẩm function muathemewpgiare_plugin_search_product_categories_meta_box($post, $box) { $defaults = array('taxonomy' => 'product_cat'); if (!isset($box['args']) || !is_array($box['args'])) { $args = array(); } else { $args = $box['args']; } $r = wp_parse_args($args, $defaults); $tax_name = esc_attr($r['taxonomy']); $taxonomy = get_taxonomy($r['taxonomy']); ?> <script type="text/javascript"> jQuery(document).ready(function(){ function removeDiacritics(str) { return str.normalize("NFD").replace(/[\u0300-\u036f]/g, ""); } jQuery('#productCatSearch').keyup(function() { var val = removeDiacritics(jQuery('#productCatSearch').val().toLowerCase()); var lis = jQuery("#<?php echo $tax_name;?>checklist li"); lis.hide(); var containingLabels = jQuery("#<?php echo $tax_name;?>checklist label").filter(function() { return removeDiacritics(jQuery(this).text().toLowerCase()).includes(val); }); containingLabels.closest('li').find('li').andSelf().show(); containingLabels.parents('#<?php echo $tax_name;?>checklist li').show(); }); }); </script> <div id="taxonomy-<?php echo $tax_name; ?>" class="categorydiv"> Search: <input id="productCatSearch" type="text" value="" /> <ul id="<?php echo $tax_name; ?>-tabs" class="category-tabs"> <li class="tabs"><a href="#<?php echo $tax_name; ?>-all"><?php echo $taxonomy->labels->all_items; ?></a></li> <li class="hide-if-no-js"><a href="#<?php echo $tax_name; ?>-pop"><?php _e('Dùng nhiều'); ?></a></li> </ul> <div id="<?php echo $tax_name; ?>-pop" class="tabs-panel" style="display: none;"> <ul id="<?php echo $tax_name; ?>checklist-pop" class="categorychecklist form-no-clear" > <?php $popular_ids = wp_popular_terms_checklist($tax_name); ?> </ul> </div> <div id="<?php echo $tax_name; ?>-all" class="tabs-panel"> <?php $name = ($tax_name == 'product_cat') ? 'product_cat' : 'tax_input[' . $tax_name . ']'; echo "<input type='hidden' name='{$name}[]' value='0' />"; ?> <ul id="<?php echo $tax_name; ?>checklist" data-wp-lists="list:<?php echo $tax_name; ?>" class="categorychecklist form-no-clear"> <?php wp_terms_checklist($post->ID, array('taxonomy' => $tax_name, 'popular_cats' => $popular_ids, 'checked_ontop' => true)); ?> </ul> </div> <?php if (current_user_can($taxonomy->cap->edit_terms)) : ?> <div id="<?php echo $tax_name; ?>-adder" class="wp-hidden-children"> <h4> <a id="<?php echo $tax_name; ?>-add-toggle" href="#<?php echo $tax_name; ?>-add" class="hide-if-no-js"> <?php printf(__('+ %s'), $taxonomy->labels->add_new_item); ?> </a> </h4> <p id="<?php echo $tax_name; ?>-add" class="category-add wp-hidden-child"> <label class="screen-reader-text" for="new<?php echo $tax_name; ?>"><?php echo $taxonomy->labels->add_new_item; ?></label> <input type="text" name="new<?php echo $tax_name; ?>" id="new<?php echo $tax_name; ?>" class="form-required form-input-tip" value="<?php echo esc_attr($taxonomy->labels->new_item_name); ?>" aria-required="true"/> <label class="screen-reader-text" for="new<?php echo $tax_name; ?>_parent"> <?php echo $taxonomy->labels->parent_item_colon; ?> </label> <?php wp_dropdown_categories(array('taxonomy' => $tax_name, 'hide_empty' => 0, 'name' => 'new' . $tax_name . '_parent', 'orderby' => 'name', 'hierarchical' => 1, 'show_option_none' => '— ' . $taxonomy->labels->parent_item . ' —')); ?> <input type="button" id="<?php echo $tax_name; ?>-add-submit" data-wp-lists="add:<?php echo $tax_name; ?>checklist:<?php echo $tax_name; ?>-add" class="button category-add-submit" value="<?php echo esc_attr($taxonomy->labels->add_new_item); ?>" /> <?php wp_nonce_field('add-' . $tax_name, '_ajax_nonce-add-' . $tax_name, false); ?> <span id="<?php echo $tax_name; ?>-ajax-response"></span> </p> </div> <?php endif; ?> </div> <?php } function muathemewpgiare_plugin_update_product_collection_box() { remove_meta_box('product_catdiv', 'product', 'side'); add_meta_box('customproductcatdiv', 'Danh mục sản phẩm', 'muathemewpgiare_plugin_search_product_categories_meta_box', 'product', 'side', 'core', array('taxonomy' => 'product_cat')); } add_filter('admin_menu', 'muathemewpgiare_plugin_update_product_collection_box'); |
4. Kết Quả Sau Khi Cài Đặt
- Giao diện mới mẻ: Một ô tìm kiếm “thông minh” xuất hiện, bạn chỉ cần gõ từ khóa và tất cả danh mục liên quan sẽ hiện ra.
- Dễ dàng sử dụng: Không cần phải cuộn chuột đến tận đáy, tìm danh mục giờ chỉ là chuyện nhỏ!
5. Lời Kết
Đừng để công việc quản lý danh mục trở thành “cơn ác mộng”. Với vài dòng code đơn giản (và chút hài hước), bạn đã biến khu vực quản trị WordPress thành nơi làm việc nhanh gọn, đẹp mắt và hiện đại. Hãy thử ngay hôm nay và đừng quên khoe thành quả với đồng nghiệp nhé! 🚀
- #1 Cách ẩn nút Thêm vào giỏ hàng hoặc Giá trong WooCommerce
- Hướng Dẫn Thêm Thanh Tiến Trình Quà Tặng Vào WooCommerce Giỏ Hàng
- [Thủ thuật wordpress] Làm thế nào để bảo vệ các trường ACF bằng MemberPress?
- Website bảo hành trọn đời có thật không? Hay là chiêu trò của những đơn vị làm website
- Làm Thế Nào Để Xây Dựng Website Hiệu Quả: Những Yếu Tố Quan Trọng Cần Lưu Ý