Có thể có nhiều người tạo trang web với hàng trăm danh mục bài viết hoặc sản phẩm. Khi đăng bài, việc tìm kiếm và chọn danh mục phù hợp đôi khi trở nên mệt mỏi với việc cuộn chuột và kéo thanh trượt. Đoạn mã dưới đây sẽ giúp bạn nhanh chóng và thuận lợi hơn bằng cách tạo một ô tìm kiếm giúp chọn danh mục một cách dễ dàng.
Đoạn mã dưới đây mìn đã cop nhặt trên mạng + hoàn thiện chia sẻ cho ae thấy nó hữu ích. Chỉ cần copy đoạn mã dưới đây vào file function.php.
=> Mình đã test chạy ngon trong phiển bản Classic ae nhé !
1. Code thêm ô tìm kiếm danh mục khi đăng bài bài viết
|
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 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 update_collection_box() { remove_meta_box( 'categorydiv', 'post', 'side'); add_meta_box('customcategorydiv', 'Categories', 'search_categories_meta_box', 'post', 'side', 'core', array( 'taxonomy' => 'category' )); } add_filter('admin_menu', 'update_collection_box'); |
Kết quả:
2. Code thêm ô tìm kiếm danh mục khi đăng sản phẩm
|
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 |
// Tim kiem danh muc san pham function 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 update_product_collection_box() { remove_meta_box('product_catdiv', 'product', 'side'); add_meta_box('customproductcatdiv', 'Danh mục sản phẩm', 'search_product_categories_meta_box', 'product', 'side', 'core', array('taxonomy' => 'product_cat')); } add_filter('admin_menu', 'update_product_collection_box'); |
Kết quả:
