Bộ lọc bài đăng WordPress theo trường tùy chỉnh

Hướng dẫn này tiết lộ cách lọc các bài đăng bằng cách sử dụng các giá trị trường tùy chỉnh được thiết lập trong Bảng điều khiển WordPress để các khả năng của plugin JetBlog hoạt động chính xác

Khi bạn đã có nhiều bài đăng, đôi khi bạn có thể chỉ muốn hiển thị những bài có chứa thông tin cụ thể. Điều này có thể được thực hiện bằng cách sử dụng các danh mục, nhưng điều này sẽ không giúp truy vấn các bài đăng theo các giá trị cụ thể. Để đạt được thành tích như vậy, bạn cần sử dụng chức năng đặc biệt của các tiện ích JetBlog cho phép lọc các bài đăng bằng cách sử dụng các giá trị từ các trường meta. Hãy cùng khám phá thêm cách thực hiện điều này

Nhắc bạn rằng chúng tôi đã mô tả các trường tùy chỉnh có đề cập đến tất cả các chi tiết trong bài viết này

Bây giờ hãy nói cụ thể hơn về chức năng lọc cho các bài đăng với việc sử dụng các giá trị trường tùy chỉnh

Cài đặt trong Bảng điều khiển WP

Bước 1 – Điều hướng đến Bảng điều khiển WP. Chọn ở đây Bài viết > Tùy chọn tất cả bài viết. Chọn cái bạn muốn chỉnh sửa và nhấp vào liên kết tương ứng bên dưới

Bước 2 – Bây giờ bạn nên nhấp vào nút cài đặt ở góc bên phải của trang

Bước 3 – Trong màn hình sau, đánh dấu vào tùy chọn Trường tùy chỉnh

Bước 4 – Sau đó, bạn nên cuộn trang cho đến khi đến khối Trường tùy chỉnh

Bước 5 – Bên dưới bạn sẽ thấy khối có tên Add New Custom Field. Trong danh sách thả xuống, chọn Tên và thêm Giá trị mà bài đăng sẽ được hiển thị

Bước 6 – Để thêm giá trị bạn cần vào công cụ phpMyAdmin, điều hướng đến cơ sở dữ liệu hiện tại. Sau đó, bạn nên chọn bảng wp_postmeta và tìm trường meta_key để chọn khóa phù hợp

Cài đặt bộ lọc

Lưu ý rằng có nhiều giá trị cho phép chọn nhiều giá trị cùng một lúc. Giá trị mặc định được áp dụng nếu không có gì khác được chọn

Bước 1 – Đi tới trình chỉnh sửa Elementor nơi bạn phải mở canvas công việc của mình với các tiện ích liên quan, chẳng hạn như danh sách Bài đăng thông minh hoặc Ô bài đăng

Bước 2 – Thứ hai, bạn nên chọn phần cần thiết và chuyển sang tab Nội dung > Truy vấn & Kiểm soát

Bước 3 – Sau đó bật tùy chọn Lọc theo Trường tùy chỉnh

Bước 4 – Trong trường Khóa trường tùy chỉnh, bạn phải thêm khóa tương ứng từ cơ sở dữ liệu trong phpMyAdmin

Bước 5 – Trường tiếp theo là Giá trị trường tùy chỉnh nơi bạn có thể truy vấn các bài đăng bằng giá trị cụ thể từ trường meta

Một yêu cầu phổ biến trong nhiều trang web WordPress có số lượng lớn nội dung là khả năng lọc nội dung đó. Cho dù đó là bài đăng trên blog, sản phẩm hay loại bài đăng tùy chỉnh—lọc cho phép người dùng chỉ định rõ hơn những gì họ muốn và nhận thông tin tốt nhất có thể cho trải nghiệm độc đáo của họ. Mặc dù có rất nhiều plugin tuyệt vời để lọc nội dung của bạn, đôi khi bạn cần thứ gì đó tùy chỉnh hơn để có thể xử lý trường hợp sử dụng cụ thể của bạn. Để làm được điều đó, bạn có thể xây dựng thiết lập của riêng mình để lọc bằng cách sử dụng các mẫu PHP, các hàm JavaScript tùy chỉnh và chỉ một chút kiểu dáng CSS

Nội dung có thể lọc

Một ứng dụng tốt để xây dựng chức năng lọc của riêng bạn là khi trang web của bạn sử dụng plugin Trường tùy chỉnh nâng cao kết hợp với loại bài đăng tùy chỉnh. Giả sử bạn có loại bài đăng tùy chỉnh cho tất cả các thành viên trong nhóm tại công ty của mình và bạn đã thêm chi tiết về từng thành viên trong nhóm bằng cách sử dụng plugin Trường tùy chỉnh nâng cao. Điều đó có thể trông giống như sau, trong đó bạn chỉ định cho mỗi thành viên trong nhóm một số khách hàng, phòng ban của họ và loại công việc của họ

Bây giờ bạn đã có tất cả thông tin này về từng thành viên trong nhóm, bạn có thể làm gì với nó? . Hãy bắt đầu với việc thiết lập khung để lọc. Về sau, giả định rằng bạn có một số kiến ​​thức cơ bản về cách sử dụng các mẫu WordPress và các vòng lặp WP_Query để bạn có thể tập trung vào các chi tiết có liên quan hơn

Làm cho nội dung của bạn sẵn sàng để lọc

Bắt đầu bên trong một vòng lặp cho loại bài đăng tùy chỉnh của các thành viên trong nhóm. Điều này có thể được thực hiện với truy vấn thủ công trong mẫu trang tùy chỉnh, chẳng hạn như bên dưới hoặc bằng cách sử dụng trang mẫu lưu trữ của loại bài đăng tùy chỉnh

$team_members = new WP_Query( array( 'post_type' => 'team-member' ) );
if ( $team_members->have_posts() ) : ?>
     

     have_posts() ) :
          $team_members->the_post();

Bây giờ, khi bạn duyệt qua từng bài đăng của thành viên trong nhóm của mình, bạn sẽ cần thêm nội dung nào đó vào mỗi bài đăng để có thể dễ dàng xác định bài đăng đó nhằm mục đích lọc. Để làm điều đó, hãy sử dụng các lớp bộ lọc tùy chỉnh. Để tạo các lớp bộ lọc, hãy lấy tất cả dữ liệu từ các trường tùy chỉnh của bạn và tạo các lớp có tiền tố dễ nhận dạng trong khi nối thêm dữ liệu vào cuối mỗi lớp

• Đối với số lượng khách hàng, chúng tôi thêm số vào cuối chuỗi number-of-clients-
• Đối với các phòng ban, chúng tôi nối tên từng phòng ban vào cuối chuỗi department-
• Đối với loại việc làm, chúng tôi thêm tên loại việc làm vào cuối chuỗi employment-type-

Phương pháp này cho phép bạn thêm bao nhiêu lớp nhận dạng cần thiết vào mỗi bài đăng và nó sẽ giúp bạn lọc các bài đăng đó sau này dễ dàng hơn nhiều

$filter_classes = array();
if ( $number_of_clients = get_field( 'number_of_clients' ) ) {
     $filter_classes[] = 'number-of-clients-' . $number_of_clients;
}
$departments = get_field( 'department' );
if ( ! empty( $departments ) ) {
     foreach( $departments as $department ) {
          $filter_classes[] = 'department-' . $department['value'];
     }
}
if ( $employment_type = get_field( 'employment_type' ) ) {
     $filter_classes[] = 'employment-type-' . $employment_type['value'];
}
$filter_classes = implode( ' ', $filter_classes );

Tiếp theo, chỉ cần thêm các lớp vào phần tử mà bạn đang sử dụng để hiển thị từng thành viên trong nhóm để họ có sẵn để lọc

Thiết lập bộ lọc của bạn

Bây giờ hãy tìm hiểu cách lọc các thành viên trong nhóm. Như đã đề cập ở trên, bạn sẽ bắt đầu chỉ với một truy vấn cơ bản về tất cả các bài đăng của thành viên nhóm. Sau đó, bạn thêm các lớp cụ thể vào từng bài đăng dựa trên dữ liệu có sẵn trong các trường tùy chỉnh. Vì vậy, để lọc các bài đăng này, bạn chỉ cần kiểm tra các lớp trên mỗi bài đăng và ẩn hoặc hiển thị bài đăng tùy thuộc vào lớp. Để thực hiện điều này, bạn chỉ cần thiết lập một hàm JavaScript cơ bản, một thành phần được chọn để chọn giá trị bộ lọc và một lớp tùy chỉnh .hide-team-member sẽ được sử dụng để ẩn mục nhập của thành viên nhóm bằng CSS

.hide-team-member {
     display: none;
}

Để lọc theo bộ phận, bạn có thể sử dụng một phần tử chọn với tất cả các giá trị bộ phận có sẵn

Department

     Human Resources
     Development
     Management
     Design
     Advertising

Lọc bằng JavaScript

Giờ đây, bạn có thể thiết lập chức năng JavaScript được kích hoạt mỗi khi giá trị bộ lọc mới được chọn. Với chức năng lọc này, bạn lấy giá trị từ bộ lọc bộ phận và kiểm tra từng thành viên trong nhóm để xem nó có lớp bộ lọc phù hợp không. Nếu nó không có lớp bộ lọc phù hợp, chỉ cần ẩn thành viên nhóm bằng cách thêm lớp .hide-team-member vào đó. Đồng thời đảm bảo xóa lớp .hide-team-member ở đầu hàm để kết quả lọc được đặt lại với mỗi thay đổi. Các phần tử lọc và phương thức JavaScript tương tự có thể được tạo cho bất kỳ trường tùy chỉnh nào khác được chỉ định cho thành viên nhóm của bạn

$("select#team-member-filter-department").change(function() {
     filterTeamMembersByDepartment($(this).val());
});
function filterTeamMembersByDepartment(filterBy) {
     var $team_container = $('.team-members-list'),
          $team_members = $team_container.children('.team-member');

     // Reset the filters.
     $team_members.removeClass('hide-team-member');

     // Hide all Team Members that are not in the selected department.
     $team_members.not("[class*='department-" + filterBy + "']").addClass('hide-team-member');
}

Thời gian để lọc

Khi bạn đã hoàn tất, kết quả cuối cùng có thể giống như thế này. Tại đây, bạn có thể thấy các thành viên trong nhóm được lọc bởi bộ phận Nhân sự và việc làm Toàn thời gian

Một kết quả lọc khác dành cho nhân viên Phát triển làm việc với tư cách là Nhà thầu có thể trông như thế này

Đây chỉ là một ví dụ ngắn gọn về những gì bạn có thể thực hiện bằng cách viết logic của riêng mình để lọc các loại bài đăng tùy chỉnh dựa trên dữ liệu trường tùy chỉnh của chúng. Không có gì ngăn cản bạn viết logic lọc phức tạp hơn nhiều hoàn toàn dành riêng cho trường hợp sử dụng cá nhân của bạn. Bạn thậm chí có thể mở rộng chức năng này ra để bao gồm logic để sắp xếp các bài đăng của mình. Khả năng là vô tận khi bạn tạo khung để lọc kết quả của mình và thường chỉ cần cập nhật các chức năng lọc của bạn trong JavaScript cho bất kỳ mục đích nào bạn cần. Để được hỗ trợ thêm về việc tùy chỉnh trang web WordPress phù hợp với doanh nghiệp của bạn, hãy liên hệ với các chuyên gia phát triển web tại Hall