Một khía cạnh Danh sách phạm vi với loại giao diện người dùng hộp kiểm.
Một khía cạnh Danh sách phạm vi có loại giao diện người dùng “Hộp kiểm”.

Một loại khía cạnh để tạo danh sách các phạm vi số có thể lọc. Nó có thể được sử dụng cho giá cả, trọng lượng, mét vuông hoặc bất kỳ giá trị số nào khác.

Khía cạnh này có thể được hiển thị trong một số loại giao diện người dùng như hộp kiểm, nút radio, danh sách thả xuống hoặc dưới dạng loại khía cạnh fSelect.

Tùy chọn có sẵn

Tên Sự miêu tả
Nguồn dữ liệu Nơi giá trị tồn tại (phân loại, trường tùy chỉnh, thuộc tính bài đăng). Khía cạnh mong đợi một giá trị số.
Các dãy Để thiết lập loại khía cạnh này, hãy tạo một số phạm vi có giá trị tối thiểu và tối đa. Mỗi phạm vi sẽ tương ứng với một lựa chọn khía cạnh. Xem giải thích bên dưới .
loại giao diện người dùng Loại giao diện người dùng của khía cạnh này: 
Nhãn mặc định Cài đặt này chỉ hiển thị cho các loại giao diện người dùng “Radio”, “fSelect” và “Dropdown”. Nó đặt nội dung của lựa chọn “Bất kỳ”: 

  • Đối với loại giao diện người dùng “ Radio ”, nó cho phép lựa chọn “Bất kỳ” phía trên các nút radio khác và đặt văn bản của nó. Để trống để xóa tùy chọn “Bất kỳ”.
  • Đối với loại giao diện người dùng “ fSelect ”, nó đặt văn bản của lựa chọn thả xuống “Bất kỳ” đầu tiên mặc định. Để đặt nhãn “đã chọn” cố định, hãy xem phần giải thích này trên trang khía cạnh fSelect .
  • Đối với loại giao diện người dùng “ Thả xuống ”, nó đặt văn bản của lựa chọn “Bất kỳ” đầu tiên mặc định.

Lưu ý: nhãn này có thể dịch được bằng hook facetwp_i18n .
Chọn nhiều lần Cài đặt này chỉ hiển thị cho loại giao diện người dùng “fSelect”. Nếu được bật, khía cạnh này sẽ chấp nhận nhiều lựa chọn và sẽ hiển thị giao diện người dùng kiểu hộp kiểm.
Logic khía cạnh Cài đặt này chỉ hiển thị cho các loại giao diện người dùng “fSelect” và “Checkboxes”. Đối với loại “fSelect”, nó chỉ phù hợp nếu được đặt thành multi-select . Cài đặt xác định logic được sử dụng giữa các lựa chọn trong một khía cạnh. Giả sử một khía cạnh có các lựa chọn “Apple”, “Banana” và “Pear”: 

  • VÀ (khớp tất cả) – nếu chọn “Apple”, các lựa chọn “Banana” và “Pear” sẽ biến mất. Chỉ những kết quả phù hợp với “Apple” mới được giữ lại.
  • HOẶC (khớp bất kỳ) – nếu chọn “Apple”, các lựa chọn “Banana” và “Pear” sẽ vẫn giữ nguyên. Nếu bạn chọn cả “Apple” và “Banana”, kết quả khớp sẽ vẫn giữ nguyên.
Hiển thị ma Cài đặt này chỉ hiển thị cho các loại giao diện người dùng “Radio”, “fSelect” và “Checkboxes”. Nếu được bật, các lựa chọn thuộc tính ( được tạo bằng cài đặt Phạm vi của thuộc tính ) sẽ trả về kết quả bằng 0 vẫn được hiển thị nhưng bị mờ và không thể nhấp được. Nếu bị tắt, các lựa chọn khía cạnh không có bài đăng liên quan sẽ bị ẩn. 

Lưu ý: khi bật cài đặt này, bạn cũng có thể tạo các phạm vi không có kết quả nào trước khi lọc, điều này hơi khác so với hoạt động của bóng mờ của các loại khía cạnh khác , chỉ hiển thị sau khi lọc.

Tạo phạm vi

Để thiết lập loại khía cạnh này, hãy sử dụng cài đặt Phạm vi để tạo một số phạm vi có giá trị tối thiểu và tối đa. Mỗi phạm vi sẽ tương ứng với một lựa chọn khía cạnh. Đối với mỗi lựa chọn, hãy nhập nhãn tùy chỉnh:

Cách thiết lập một khía cạnh Danh sách phạm vi.
Cách thiết lập một khía cạnh Danh sách phạm vi.
Đầu ra ví dụ về khía cạnh Danh sách phạm vi.
Đầu ra ví dụ về khía cạnh Danh sách phạm vi.

Đầu ra cuối cùng của các cài đặt trên sẽ giống như hình bên phải.

Như được hiển thị trong ảnh gif ở trên, nếu bạn để trống giá trị “Tối thiểu” trong một hàng thì giá trị tối thiểu của trường đó sẽ được đặt thành giá trị “Tối đa” của hàng trước đó. Để trống “Tối thiểu” ở hàng đầu tiên sẽ đặt giá trị tối thiểu đó thành 0. Và việc để trống giá trị “Max” ở hàng cuối cùng sẽ được hiểu là không có giá trị max, nghĩa là “trở lên”.

Lưu ý rằng giá trị “Tối đa” được hiểu là giá trị “tối đa và bao gồm” và giá trị “Tối thiểu” là “từ và bao gồm”. Vì vậy, trong ví dụ trên, một bài đăng có giá trị 10000sẽ được đưa vào cả lựa chọn khía cạnh thứ nhất và thứ hai.

Dưới đây là video hướng dẫn cách thiết lập khía cạnh Danh sách phạm vi:

Ẩn số lượng

Cách ẩn số lượng cho khía cạnh Danh sách phạm vi, tùy thuộc vào cài đặt loại giao diện người dùng:

Loại giao diện người dùng được đặt thành “Không có”, “Radio” hoặc “Hộp kiểm”

Thêm CSS sau vào tệp style.css. Xin lưu ý rằng điều này cũng ẩn số lượng cho tất cả các khía cạnh của loại Checkboxes , Radio và Hierarchy .

Làm cách nào để sử dụng CSS tùy chỉnh?

Mã CSS có thể được đặt trong tệp style.css của chủ đề (con) của bạn. Ngoài ra, bạn có thể thêm nó theo cách thủ công giữa <style>các thẻ trong <head>phần, trong tệp header.php của chủ đề (con) của bạn. Bạn cũng có thể tải nó bằng một hook trong tệp tin.php của chủ đề (con) hoặc trong tiện ích bổ sung Custom Hooks . Để chỉ tải mã trên các trang có các khía cạnh, hãy sử dụng facetwp_scriptshook. Để tải nó trên tất cả các trang, hãy sử dụng wp_headhoặc wp_footer. Hoặc bạn có thể sử dụng plugin đoạn mã. Thêm thông tin

.facetwp-counter {
display: none;
}

Nếu bạn cần biết cụ thể về (loại) khía cạnh nào cần ẩn số đếm, hãy sử dụng bất kỳ kiểu nào sau đây:

Làm cách nào để sử dụng CSS tùy chỉnh?

Mã CSS có thể được đặt trong tệp style.css của chủ đề (con) của bạn. Ngoài ra, bạn có thể thêm nó theo cách thủ công giữa <style>các thẻ trong <head>phần, trong tệp header.php của chủ đề (con) của bạn. Bạn cũng có thể tải nó bằng một hook trong tệp tin.php của chủ đề (con) hoặc trong tiện ích bổ sung Custom Hooks . Để chỉ tải mã trên các trang có các khía cạnh, hãy sử dụng facetwp_scriptshook. Để tải nó trên tất cả các trang, hãy sử dụng wp_headhoặc wp_footer. Hoặc bạn có thể sử dụng plugin đoạn mã. Thêm thông tin

/* Hide counts in all facets with a radio UI (Range List facet in UI modes “None” or “Radio”, Radio facet) */
.facetwp-radio .facetwp-counter {
display: none;
}
/* Hide counts in all facets with a checkboxes UI (Range List facet in UI mode “Checkboxes”, Checkboxes facet) */
.facetwp-checkbox .facetwp-counter {
display: none;
}
/* Hide counts in all Range List facets in UI mode “None”, “Radio” or “Checkboxes” */
[data-type=“range_list”] .facetwp-counter {
display: none;
}
/* Hide counts in a specific Range List facet in UI mode “None”, “Radio” or “Checkboxes” */
.facetwp-facet-yourfacetname .facetwp-counter {
display: none;
}

Loại giao diện người dùng được đặt thành “Thả xuống” hoặc “fSelect”

Để ẩn số lượng khỏi tất cả các khía cạnh của loại sử dụng giao diện người dùng thả xuống (tất cả các khía cạnh Danh sách phạm vi trong chế độ giao diện người dùng thả xuống hoặc fSelect , các khía cạnh thả xuống , các khía cạnh fSelect và các khía cạnh Chọn phân cấp ), hãy thêm phần sau vào hàm.php của chủ đề của bạn:

Làm cách nào để sử dụng mã PHP tùy chỉnh?

Mã PHP có thể được thêm vào tệp tin.php của chủ đề (con) của bạn. Ngoài ra, bạn có thể sử dụng tiện ích bổ sung Móc tùy chỉnh hoặc plugin đoạn mã. Thêm thông tin

add_filter( 'facetwp_facet_dropdown_show_counts', '__return_false' );

Nếu bạn muốn ẩn số lượng khỏi các khía cạnh cụ thể bằng giao diện người dùng thả xuống , thì hãy sử dụng tính năng này thay thế:

Làm cách nào để sử dụng mã PHP tùy chỉnh?

Mã PHP có thể được thêm vào tệp tin.php của chủ đề (con) của bạn. Ngoài ra, bạn có thể sử dụng tiện ích bổ sung Móc tùy chỉnh hoặc plugin đoạn mã. Thêm thông tin

add_filter( ‘facetwp_facet_dropdown_show_counts’, function( $return, $params ) {
if ( ‘your_facet_name’ == $params[‘facet’][‘name’] ) {
$return = false;
}
return $return;
}, 10, 2 );

Dịch nhãn phạm vi

Để dịch nhãn phạm vi, bạn có thể sử dụng hook facetwp_facet_display_value . Ví dụ này dành cho khi bạn đang sử dụng WPML (sử dụng dòng 7 thay vì dòng 4 cho Polylang):

Làm cách nào để sử dụng mã PHP tùy chỉnh?

Mã PHP có thể được thêm vào tệp tin.php của chủ đề (con) của bạn. Ngoài ra, bạn có thể sử dụng tiện ích bổ sung Móc tùy chỉnh hoặc plugin đoạn mã. Thêm thông tin

add_filter( ‘facetwp_facet_display_value’, function( $label, $params ) {
// Get current language for WPML:
$lang = ( !empty( FWP()->facet->http_params[‘lang’] ) ) ? FWP()->facet->http_params[‘lang’] : apply_filters( ‘wpml_current_language’, null );
// Get current language for Polylang:
// $lang = ( !empty( FWP()->facet->http_params[‘lang’] ) ) ? FWP()->facet->http_params[‘lang’] : pll_current_language();
switch ( $lang ) {
case ‘nl’ :
if ( ‘€ 100 and up’ == $label ) {
$label = ‘€ 100 en hoger’;
}
break;
case ‘fr’:
if (‘€ 100 and up’ == $label) {
$label = ‘€ 100 et plus’;
}
break;
}
return $label;
}, 20, 2 );

Ngoài ra, bạn có thể thay đổi các lựa chọn khía cạnh thành các chuỗi có thể dịch được bằng hook facetwp_facet_render_args .