Để xây dựng tính năng search trong wordpress thì phải nói cực kỳ đơn giản, các bạn chỉ cần vài ba đoạn code nhỏ là có thể làm được. Nhưng… Search theo custom field ? Các bạn đã thử chưa 😀 Nếu chưa thì hôm này mình sẽ hướng dẫn cho các bạn cách để làm chức năng đó.
Để ôn lại 1 tý thì mình sẽ nhắc lại cách tạo 1 form search bình thường trong wordpress. Các bạn xem đoạn code phía dưới nha
<form action="/" method="GET" role="form" _lpchecked="1"> <input type="text" name="s" id="s-home" autocomplete="off" placeholder="Từ khóa...."> <button type="submit" class="button-search"><i class="fa fa-search"></i></button> </form>
<form action="/" method="GET" role="form" _lpchecked="1"> <input type="hidden" name="post_type" value="post"> <input type="text" name="s" id="s-home" autocomplete="off" placeholder="Từ khóa...."> <button type="submit" class="button-search"><i class="fa fa-search"></i></button> </form>
Trong ví dụ trên mình search các bài viết thuộc post type là post nha. Các post type khác sẽ không được hiển thị trong kết quả search
<form action="/" method="GET" role="form" _lpchecked="1"> <select name="cat" id="cat" class="form-control"> <option value="">Chọn chuyên mục</option> <?php $args = array( 'hide_empty' => 0, 'taxonomy' => 'category' ); $cates = get_categories( $args ); foreach ( $cates as $cate ) { ?> <option value="<?php echo $cate->term_id; ?>"><?php echo $cate->name; ?></option> <?php } ?> </select> <input type="text" name="s" id="s-home" autocomplete="off" placeholder="Từ khóa...."> <button type="submit" class="button-search"><i class="fa fa-search"></i></button> </form>
Đoạn code trên cho phép chọn chuyên mục cần search.
Để dễ hình dung mình sẽ đưa ra yêu cầù rồi chúng ta sẽ theo yêu cầu mà làm chức năng nhé, yêu cầu như sau:
Tạo form search bất động sản theo từ khóa và khoảng giá. Khoảng giá ở đây có 2 giá trị là giá nhỏ nhất và giá lớn nhất, với giá của bất động sản được lưu ở custom field
Với yêu cầu như trên, chúng ta sẽ thự hiện 2 công việc chính là: Tạo form search và xử lý trả dữ liệu
Các bạn chèn đoạn code sau vào vị trí mà các bạn mong muốn hiển thị form search. Chú ý code dưới chỉ là html chưa có giao diện gì cả, các bạn muốn đẹp thì thêm css vào nha.
<form action="/" method="GET" role="form"> <input type="hidden" name="post_type" value="bat-dong-san"> <input type="text" name="s" id="s-home" autocomplete="off" placeholder="Từ khóa...."> <input type="number" name="min-price" placeholder="Giá thấp nhất"> <input type="number" name="max-price" placeholder="Giá cao nhất"> <button type="submit" class="button-search"><i class="fa fa-search"></i></button> </form>
Mình sẽ tạo form search theo phương thức get, khi sumit form website nó sẽ có đường dẫn ở dạng như sau: domain.com/?post_type=bat-dong-san&s=đất+nền&min-price=500&max-price=50000000
Chúng ta sẽ dựa vào các dữ liệu được truyền trên url để get các giá trị và xử lý.
Chắc các bạn cũng biết kết file hiển thị dữ liệu trả về của form search trong theme wordpress là file search.php. Vì thế để xử lý dữ liệu tìm kiếm chúng ta viết trong file search.php đoạn code sau.
<?php $post_type = isset($_GET['post_type']) && $_GET['post_type'] ? $_GET['post_type'] : 'post'; $minprice = isset($_GET['min-price']) && $_GET['min-price'] ? $_GET['min-price'] : 0; $maxprice = isset($_GET['max-price']) && $_GET['max-price'] ? $_GET['max-price'] : 99999999999999; $key = isset($_GET['s']) && $_GET['s'] ? $_GET['s'] : ''; $args = array( 'showposts' => 10, 'post_type' => $post_type, 's' => $key, 'meta_query' => array( 'relation' => 'AND', array( 'key' => 'price', 'value' => $minprice, 'type' => 'NUMERIC', 'compare' => '>=' ), array( 'key' => 'price', 'value' => $maxprice, 'type' => 'NUMERIC', 'compare' => '<=' ) ), ); ?> <?php $the_query = new WP_Query( $args ); ?> <?php if( $the_query->have_posts() ): ?> <?php while( $the_query->have_posts() ) : $the_query->the_post(); ?> <p><?php the_title(); ?></p> <?php endwhile; ?> <?php endif; ?> <?php wp_reset_query(); ?>
Mình sẽ giải thích theo từng dòng để các bạn dễ theo dõi:
Ví dụ search các bài viết có trên 100 lượt views
<?php $args = array( 'numberposts' => 10, 'post_type' => 'post', 'meta_query' => array( array( 'key' => 'views', 'value' => 100, 'type' => 'NUMERIC', 'compare' => '>' ) ) ); $the_query = new WP_Query( $args );?> <?php if( $the_query->have_posts() ): ?> <ul> <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?> <li> <a href="<?php the_permalink(); ?>"> <img src="<?php the_field('event_thumbnail'); ?>" /> <?php the_title(); ?> </a> </li> <?php endwhile; ?> </ul> <?php endif; ?> <?php wp_reset_query(); ?>
Search 10 sản phẩm có trên 10 lượt mua và màu sắc là màu đỏ.
<?php $args = array( 'numberposts' => 10, 'post_type' => 'product', 'meta_query' => array( 'relation' => 'AND', array( 'key' => 'total_sales', 'value' => 10, 'type' => 'NUMERIC', 'compare' => '>' ), array( 'key' => 'color_product', 'value' => 'red', 'compare' => '=' ) ) ); $the_query = new WP_Query( $args );?> <?php if( $the_query->have_posts() ): ?> <ul> <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?> <li> <a href="<?php the_permalink(); ?>"> <img src="<?php the_field('event_thumbnail'); ?>" /> <?php the_title(); ?> </a> </li> <?php endwhile; ?> </ul> <?php endif; ?> <?php wp_reset_query(); ?>
Bài viết hôm nay mình đã giới thiệu cho các bạn cách search theo custom field cũng như là query các dữ liệu có liên quan đến custom field. Biết được món này thì bạn không phải lo xử lý các vấn đề trong việc làm các site bất động sản hoặc site du lịch.
Bài viết này code hơi nhiều, bạn nào chưa hiểu chổ nào có thể comment phía dưới mình sẽ hỗ trợ. Nếu có thể mình sẽ làm video hướng dẫn.
Chào các bạn! À nhở ủng hộ site mới học wordpress của mình nha!
Fonttiengviet.com là một dự án website do JKS thực hiện cho khách hàng Huy Academy.…
Chắc chắn nhiều anh em khi đọc bài viết này sẽ nghĩ tôi đang quảng…
Widget trong WordPress là một công cụ mạnh mẽ cho phép bạn dễ dàng thêm…
Hôm nay mình sẽ hướng dẫn cho anh em cách tạo website blog cực kỳ…
Sống cực tốt anh em ạ :D Sau nhiều năm gắng bó với nghề thiết…
Nhân dịp quay lại viết blog mình share cho anh em code mẫu website blog…
View Comments
Cảm ơn bạn đã làm các video rất hay và bổ ích hy vọng có loạt bài tìm kiếm bằng ajax theo thuộc tính sản phẩm. Cảm ơn rất nhiều !
Mình sẽ cố găng tìm hiểu và viết tuts
Cảm ơn sếp, mấy cái này hầu như ở vn chả có ông nào chia sẻ cả :D
Còn nhiều cái hay ho đang đợi phía trước :)
Yeah, Theo dõi HuyKira kaka
Chào bạn, bạn cho mình hỏi mấy dòng dưới này lấy ở đâu để mình vào học không bạn?.
Cám ơn bạn.
'key' => 'price',
'value' => $maxprice,
'type' => 'NUMERIC',
'compare' => '
Bạn xem thử bài viết này nha: Meta query
Cám ơn bạn.
Hi sếp, mình là newbie, có tạo 1 custom field là check code trong sản phẩm. Làm sao để khi search mã này nó hiển thị được sản phẩm đó ạ
hay qúa, cảm ơn ad đã chia sẽ
Xử lý search dữ liệu và hiển thị kết quả:
sau khi ra được biến $the_query, gọi và gán vào biến global $wp_query là có thể sử dụng code mặc định của theme đang có sẵn. Bớt được công đoạn viết lại code file search và sử dụng được code trong file search mặc định.
file hình demo: https://drive.google.com/file/d/13mo8fFdoGmeL0u4_1DJ2937TCRAT5AaE/view