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

  1. 1. Tạo bộ lọc theo custom taxonomy

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

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

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

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

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

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

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

  3. 3. Lời kết

Đâ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ướ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.

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.

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

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.

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ỉnhNextWORDPRESS CUSTOM TAXONOMY TOÀN TẬP

Last updated