Search theo custom field trong wordpress và các ứng dụng của nó

Để 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 :D 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

Tạo form search trong wordpress

Form search đơn giản nhất

<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>

Search theo 1 post type nào đó

<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

Search theo 1 category nào đó

<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.

Chức năng search theo custom field trong wordpress

Để 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

Tạo form search theo custom field giá:

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ý.

Xử lý search dữ liệu và hiển thị kết quả:

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:

• Từ dòng 2 đến dòng 5 thực hiện kiểm tra dữ liệu và lấy dữ liệu được truyền qua thông qua phương thức get $_GET
• Dòng 7 số lượng bất động sản hiển thị là 10
• Dòng 8 post_type ở đây sẽ nhận giá trị là 'bat-dong-san'
• Dòng 9 điều kiện search theo từ khóa
• Dòng 10 đến 25 đây là khu vực truyền tham số search theo custom field
  • 'relation' => 'AND' các điều kiện sẽ kết hợp với nhau theo phương thức bằng
  • Dòng 12 đến dòng 17 điều kiện cho giá trị nhỏ nhất
  • Dòng 18 đến 23 điều kiện cho giá trị lớn nhất
• Từ dòng 27 đến kết thúc là  vòng lặp get post trong wordpress

Một số ví dụ về search theo custom field khác

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(); ?>

Tổng kết:

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!