Bộ lọc danh mục WordPress không có plugin

Rất nhiều người hỏi tôi về bộ lọc bài đăng. Vì vậy, tôi quyết định viết một bài đơn giản về nó — để mọi người có thể hiểu nó hoạt động như thế nào.  

Trong bài đăng này, tôi sẽ chỉ cho bạn cách tự tạo bộ lọc AJAX không đồng bộ, cho phép lọc các bài đăng theo thuật ngữ phân loại, giá trị meta và sắp xếp kết quả theo ngày xuất bản

Tôi không khuyên bạn nên sử dụng plugin cho những mục đích này nếu có thể

Bước 1. Mọi thứ bắt đầu với một biểu mẫu HTML

Biểu mẫu bộ lọc của chúng tôi sẽ bao gồm 4 phần. Tôi sẽ mô tả riêng từng phần của biểu mẫu

1. 1 Lọc bài đăng theo danh mục hoặc theo thuật ngữ phân loại

Phần đầu tiên của biểu mẫu là danh sách thả xuống <select> của các nguyên tắc phân loại. Để tạo <select> đó, bạn có thể thoải mái sử dụng hàm get_terms(). Chức năng này không chỉ hoạt động đối với các nguyên tắc phân loại tùy chỉnh mà còn đối với các danh mục và thẻ mặc định

if( $terms = get_terms( array(
    'taxonomy' => 'category', // to make it simple I use default categories
    'orderby' => 'name'
) ) ) : 
	// if categories exist, display the dropdown
	echo 'Select category...';
	foreach ( $terms as $term ) :
		echo '' . $term->name . ''; // ID of the category as an option value
	endforeach;
	echo '';
endif;

Bạn có thể thay thế giá trị tham số

0 trên dòng 2 bằng bất kỳ tên phân loại tùy chỉnh nào hoặc

1

Nhân tiện, cũng có thể kết hợp mã này với plugin nhiều trang của tôi, bạn lấy nó ở đây và hàm network_get_terms(). Vì vậy, tất cả các danh mục mạng sẽ nằm trong danh sách thả xuống được chọn và tất cả các bài đăng trên mạng sẽ được hiển thị dưới dạng kết quả tìm kiếm của bộ lọc

1. 2 Lọc các bài đăng theo giá trị trường tùy chỉnh

Tôi sử dụng phạm vi giá. Trong trường hợp của chúng tôi, giá là một giá trị trường tùy chỉnh được lưu trữ trong bảng

2 bên dưới khóa

3 trong cơ sở dữ liệu

Tôi sẽ chỉ cho bạn cách tạo bộ lọc

4 trong hướng dẫn này nhưng bạn cũng có thể đọc thêm về cách sử dụng

4 tại đây

1. 3 Thứ tự tăng dần hoặc giảm dần

Các nút radio đơn giản sẽ giúp chúng tôi sắp xếp các bài đăng theo thứ tự tăng dần hoặc giảm dần

________số 8_______

Để đơn giản, tôi quyết định chỉ sắp xếp các bài đăng theo ngày, nhưng bạn có thể dễ dàng sắp xếp các bài đăng theo tên theo thứ tự abc hoặc

1. 4 Bộ lọc hộp kiểm – Chỉ hiển thị các bài đăng có hình ảnh nổi bật

Trên thực tế, hình ảnh nổi bật chỉ là một ID đính kèm được lưu trữ dưới dạng giá trị trường tùy chỉnh trong khóa

6. Chúng tôi sẽ chỉ kiểm tra nếu nó tồn tại

	 Only posts with featured images

Bạn cũng có thể thêm một trường tìm kiếm giống như một

7 đơn giản và đang sử dụng tham số

8 của

9. Dễ như ăn bánh ?

Hoàn thành mã biểu mẫu

Bạn có thể bỏ qua tất cả các mô tả trường trước đó và sử dụng mã bên dưới. Chèn nó vào bất cứ đâu bạn muốn bộ lọc

	 'category', 'orderby' => 'name' ) ) ) : 
	
			echo 'Select category...';
			foreach ( $terms as $term ) :
				echo '' . $term->name . ''; // ID of the category as the value of an option
			endforeach;
			echo '';
		endif;
	?>
	
	
	
		 Date: Ascending
	
	
		 Date: Descending
	
	
		 Only posts with featured images
	
	Apply filter
	

Một vài bình luận

• Dòng 1. Tôi sử dụng chức năng WordPress mặc định

  
  	 Date: Ascending
  
  
  	 Date: Descending
  
  

  0 để lấy URL trang web thực tế
• Dòng 1.

  
  	 Date: Ascending
  
  
  	 Date: Descending
  
  

  1 là bộ xử lý AJAX mặc định của WordPress. Tôi đặt nó vào thuộc tính hành động biểu mẫu chỉ để đơn giản, bạn cũng có thể lấy nó bằng

  
  	 Date: Ascending
  
  
  	 Date: Descending
  
  

  2
• Dòng #23. Trường nhập ẩn với thuộc tính

  
  	 Date: Ascending
  
  
  	 Date: Descending
  
  

  3 là bắt buộc — đây là cách WordPress nhận ra chức năng nào sẽ sử dụng
• Dòng #25.

  
  	 Date: Ascending
  
  
  	 Date: Descending
  
  

  4 phần tử div là nơi chứa mã sẽ dán dữ liệu kết quả

Bước 2. Tập lệnh jQuery để gửi yêu cầu và nhận dữ liệu kết quả

Trong phần hướng dẫn này, tôi cho rằng bạn đã biết một chút về jQuery, ít nhất là cách đưa nó vào một trang web. Đây là mã xử lý dựa trên jQuery hoàn chỉnh. Nó sẽ gửi yêu cầu khi biểu mẫu được gửi

jQuery(function($){
	$('#filter').submit(function(){
		var filter = $('#filter');
		$.ajax({
			url:filter.attr('action'),
			data:filter.serialize(), // form data
			type:filter.attr('method'), // POST
			beforeSend:function(xhr){
				filter.find('button').text('Processing...'); // changing the button label
			},
			success:function(data){
				filter.find('button').text('Apply filter'); // changing the button label back
				$('#response').html(data); // insert data
			}
		});
		return false;
	});
});

Bước 3. Mã PHP để xử lý yêu cầu

Tôi nghĩ đó là phần thú vị nhất. Trong phần này, bạn quyết định cách lọc các bài đăng theo cách tốt nhất. Mã này hoàn toàn dựa trên

9. Nhưng cũng nên làm điều đó với

	 Date: Ascending


	 Date: Descending

6

add_action('wp_ajax_myfilter', 'misha_filter_function'); // wp_ajax_{ACTION HERE} 
add_action('wp_ajax_nopriv_myfilter', 'misha_filter_function');

function misha_filter_function(){
	$args = array(
		'orderby' => 'date', // we will sort posts by date
		'order'	=> $_POST['date'] // ASC or DESC
	);
 
	// for taxonomies / categories
	if( isset( $_POST['categoryfilter'] ) )
		$args['tax_query'] = array(
			array(
				'taxonomy' => 'category',
				'field' => 'id',
				'terms' => $_POST['categoryfilter']
			)
		);
 
	// create $args['meta_query'] array if one of the following fields is filled
	if( isset( $_POST['price_min'] ) && $_POST['price_min'] || isset( $_POST['price_max'] ) && $_POST['price_max'] || isset( $_POST['featured_image'] ) && $_POST['featured_image'] == 'on' )
		$args['meta_query'] = array( 'relation'=>'AND' ); // AND means that all conditions of meta_query should be true
 
	// if both minimum price and maximum price are specified we will use BETWEEN comparison
	if( isset( $_POST['price_min'] ) && $_POST['price_min'] && isset( $_POST['price_max'] ) && $_POST['price_max'] ) {
		$args['meta_query'][] = array(
			'key' => '_price',
			'value' => array( $_POST['price_min'], $_POST['price_max'] ),
			'type' => 'numeric',
			'compare' => 'between'
		);
	} else {
		// if only min price is set
		if( isset( $_POST['price_min'] ) && $_POST['price_min'] )
			$args['meta_query'][] = array(
				'key' => '_price',
				'value' => $_POST['price_min'],
				'type' => 'numeric',
				'compare' => '>'
			);
 
		// if only max price is set
		if( isset( $_POST['price_max'] ) && $_POST['price_max'] )
			$args['meta_query'][] = array(
				'key' => '_price',
				'value' => $_POST['price_max'],
				'type' => 'numeric',
				'compare' => '<'
			);
	}

 
	// if post thumbnail is set
	if( isset( $_POST['featured_image'] ) && $_POST['featured_image'] == 'on' )
		$args['meta_query'][] = array(
			'key' => '_thumbnail_id',
			'compare' => 'EXISTS'
		);
	// if you want to use multiple checkboxed, just duplicate the above 5 lines for each checkbox
 
	$query = new WP_Query( $args );
	
	if( $query->have_posts() ) :
		while( $query->have_posts() ): $query->the_post();
			echo '
' . $query->post->post_title . '
';
		endwhile;
		wp_reset_postdata();
	else :
		echo 'No posts found';
	endif;
	
	die();
}

Bây giờ bạn đã biết những điều cơ bản và bạn có thể dễ dàng tạo các bộ lọc như thế này trong WordPress

Nếu bạn vẫn gặp vấn đề với các bộ lọc, vui lòng để lại nhận xét bên dưới

# WordPress, quản trị viên-ajax. php

Misha Rudrastyh

Chào các bạn và chào mừng đến với trang web của tôi. Trong hơn 10 năm, tôi đã cố gắng hết sức để chia sẻ miễn phí với bạn một số hướng dẫn và mẹo tuyệt vời về WordPress

Làm cách nào để tạo tìm kiếm Ajax trong WordPress mà không cần plugin?

Làm cách nào để sử dụng tìm kiếm Ajax trong WordPress?