Cách lọc bài viết ở trang archive với custom fields và custom taxonomy

https://vi.fitwp.com/loc-bai-viet-trang-archive-custom-fields-taxonomy/

Cách lọc bài viết ở trang archive với custom fields và custom taxonomy

13/07/2020

Trong WordPress, ngoài việc dùng Tag và Category, bạn có thể dùng custom fields và custom taxonomy để tạo bộ lọc cho bài viết theo cách của riêng mình. Mình sẽ giới thiệu cho các bạn một cách làm khá đơn giản bằng việc dùng plugin Meta Box.Mục lục ẩn

Đây là một plugin miễn phí có trên WordPress.org cung cấp framework để tạo custom fields. Ngoài ra thì nó còn giúp bạn tạo custom taxonomy mà không cần phải code bằng tay.

Để tạo custom field bằng giao diện UI trực quan, bạn có thể mua extension Meta Box Builder. Nếu bạn là dân code thì có thể bỏ qua extension này để tiết kiệm chi phí. Tuy nhiên, có một cách khác vừa miễn phí vừa đơn giản, đó là sử dụng công cụ Online Generator.

Trong bài này, mình tạo bộ lọc cho trang bán sách gồm các tác giả và nhà xuất bản khác nhau. Trước hết, mình tạo một custom post type mới tên là Book để hiển thị các đầu sách. Nếu bạn chưa biết cách tạo thì có thể đọc bài viết tạo custom post type với plugin Meta Box.

Tạo bộ lọc theo custom taxonomy

Bước 1: Tạo custom taxonomy cho post type

Mình đã có một custom post type là Sách (book) và mình muốn tạo một custom taxonomy là Nhà xuất bản cho nó. Vào Meta Box > Taxonomies > Add New để tạo một taxonomy mới rồi điền thông tin và slug của taxonomy ở phần Basic Settings. Tiếp theo bạn chọn ô Book ở phần Assign to Post Type để taxonomy này được gán cho các sách.

Cuối cùng, chọn ô Hierarchical? để bạn có thể tick chọn các term trong taxonomy giống như chọn các category cho bài viết. Mình khuyến khích các bạn chọn phần này để các thao tác trở nên đơn giản hơn nhé.

Bên cạnh đó, bạn cũng có thể tham khảo thêm 1 cách tạo custom taxonomy khác tại đây. Tạo và cài đặt custom taxonomy bằng Meta Box

Tiếp đến, mình sẽ tạo một số term trong các taxonomy vừa rồi. Bạn vào Book và tìm tên taxonomy bạn muốn (các taxonomy bạn tạo sẽ được liệt kê ở dưới phần Add New). Sau đó điền tên term, slug, và click vào ô Add New ở dưới cùng. Tạo các term cho custom taxonomy

Bây giờ khi vào một post type của Book, bạn sẽ thấy các taxonomy và term vừa tạo được hiển thị ở cột bên phải rồi đấy. Bạn chỉ việc tick chọn term cho bài đăng đó thôi. Chọn term và taxonomy để lọc bài đăng

Bước 2: Hiển thị danh sách các taxonomy ra trang archive

Để hiển thị các taxonomy vừa tạo ra trang archive, các bạn mở file archive.php và thêm đoạn code sau vào chỗ muốn hiển thị ở page:

  <div class="filter-custom-taxonomy">
                         <?php
                         $terms = get_terms( 'nha-xuat-ban' );
                         foreach ( $terms as $term ) : ?>
                         <a href="?getby=cat&cat=<?php echo esc_attr( $term->slug ); ?>">
                                <?php echo esc_html( $term->name ); ?>
                         </a>
                         <?php endforeach; ?>
                  </div>

Trong đó 'nha-xuat-ban' là slug của taxonomy Nhà Xuất Bản mình vừa tạo. Bạn chỉ cần thay slug tương ứng của bạn vào phần này là được.

Thử mở trang archive Book ra, bạn sẽ thấy các term mình tạo hiện lên đây như sau: Các term của custom taxonomy được hiển thị ở trang archive

Ví dụ như bấm vào NXB Trẻ sẽ có slug như sau: the-loai/tieu-thuyet/?getby=cat&cat=nxb-tre

Nhưng bạn chưa thể thực hiện việc lọc ngay bây giờ đâu. Hãy cùng chuyển sang bước 3 để thực hiện việc này.

Bước 3: Thực hiện việc lọc bằng custom taxonomy

Bây giờ bạn hãy thêm đoạn code sau vào file functions.php:

function justread_filter_archive( $query ) {
           if ( is_admin() ) {
		return;
	}
	if ( is_archive() ) {
		if ( 'cat' === $_GET['getby'] ) {
			$taxquery = array(
				array(
					'taxonomy' => 'nha-xuat-ban',
					'field' => 'slug',
					'terms' => $_GET['cat'],
				),
			);
			$query->set( 'tax_query', $taxquery );
		}
		
	}

	return $query;
}
add_action( 'pre_get_posts', ‘justread_filter_archive’);

Trong đó:

justread là tên của theme mình đang dùng (bạn có thể tải Justread tại đây).
'pre_get_posts' là hook thực hiện trước khi bài viết được lấy ra.
'nha-xuat-ban' là slug của custom taxonomy.

Và đây là kết quả cuối cùng. Mình chỉ cần click vào term cần lọc là đã tìm được các bài viết thuộc term đó rồi. Bộ lọc theo custom taxonomy được tạo bởi Meta Box

Tạo bộ lọc dựa theo custom field

Bước 1: Tạo custom field để làm bộ lọc cho post type

Tương tự như trên, mình sẽ tạo 1 bộ lọc dựa vào custom fields cho các cuốn sách. Custom fields mình tạo ở đây là Tác giả.

Vào Meta Box > Custom Fields > Add New để tạo custom field mới. Ở tab Fields hãy chọn loại field là Text và điền thông tin đầy đủ. Các bạn hãy nhớ ID của field để điền vào code. Ở đây, mình tạo một custom field tên là Tác giả với ID là tac_gia. Tạo custom field mới để làm bộ lọc

Ở tab Settings chọn post type là Book nhé. Ở tab Settings chọn post type là Book

Bây giờ hãy vào các book và điền giá trị cho field vừa tạo. Mình sẽ điền tên tác giả tương ứng của các đầu sách vào đây.

Bước 2: Hiển thị danh sách các giá trị của custom field ra trang archive

Bạn cần phải thêm đoạn code sau vào file archive.php, chọn nơi muốn giá trị của custom field được hiển thị.

 <div class="filter-custom-field">
                        <?php
                        global $wpdb;
                        $meta_values = $wpdb->get_results( 'SELECT DISTINCT meta_value FROM $wpdb->postmeta WHERE meta_key LIKE "tac_gia"', OBJECT );
            foreach ( $meta_values as $meta_value ) : ?>
            <a href="?getby=field&field=<?php echo esc_attr( $meta_value->meta_value ); ?>">
                   <?php echo esc_html( $meta_value->meta_value ); ?>
            </a>
            <?php endforeach; ?>
      </div>

Trong đó:

"tac_gia": là ID của custom field tạo ở bước 1.
$wpdb->postmeta: trỏ đến bảng wp_postmeta của WordPress, là nơi chứa giá trị các custom field.

Bây giờ khi vào trang archive Book, bạn sẽ thấy custom field vừa tạo hiển thị ở vị trí bạn đặt:

Ví dụ như bấm J.K.Rowling vào sẽ có link sau:

http://demo1.elightup.com/test-metabox/the-loai/tieu-thuyet/?getby=field&field=J.K.%20Rowling

Bước 3: Thực hiện việc lọc bằng custom field

Tương tự như ở phần lọc bằng custom taxonomy, bạn cần thêm code vào file function.php để thực hiện hành động lọc bằng custom field.

function justread_filter_archive( $query ) {
	if ( is_admin() ) {
		return;
	}
	if ( is_archive() ) {
		if ( 'field' === $_GET['getby'] ) {
			$query->set( 'meta_key', 'tac_gia' );
			$query->set( 'meta_value', $_GET['field'] );
			$query->set( 'meta_compare', '=' );
		}
	}

	return $query;
}
add_action( 'pre_get_posts', ‘justread_filter_archive’);

Trong đó:

justread là tên theme đang sử dụng.
‘pre_get_posts' là hook thực hiện trước khi bài viết được lấy ra.
'tac_gia' : là ID của custom field tạo ở bước 1.

Và đây là kết quả khi mình lọc các sách của tác giả J.K Rowling:

PreviousHiển thị tất cả các bài đăng trong một loại bài tùy chỉnh, được nhóm theo phân loại tùy chỉnh NextWORDPRESS CUSTOM TAXONOMY TOÀN TẬP

Last updated 4 years ago

Was this helpful?