Khía cạnh màu WPLoại khía cạnh Màu sắc cho phép người dùng lọc bài đăng hoặc sản phẩm theo màu sắc.

Khía cạnh này tạo các mẫu màu hình chữ nhật có thể nhấp vào từ các giá trị màu trong trường Nguồn dữ liệu.

Tùy thuộc vào cài đặt Hành vi , việc chọn nhiều mẫu màu sẽ thu hẹp hoặc mở rộng tập kết quả được hiển thị. Nhấp chuột thứ hai vào mẫu màu đã chọn sẽ đặt lại lựa chọn đó.

Tùy chọn có sẵn

Tên Sự miêu tả
Nguồn dữ liệu Chọn nguồn Dữ liệu chứa giá trị màu hợp lệ. Đây có thể là trường tùy chỉnh, danh mục hoặc phân loại tùy chỉnh hoặc – nếu bạn đang sử dụng WooC Commerce – thuộc tính sản phẩm. Để sử dụng các nguyên tắc phân loại và thuộc tính sản phẩm, hãy xem bên dưới . 

Các giá trị màu hợp lệ là:

  • Một từ khóa màu hiện có (ví dụ: blue). Lưu ý: từ khóa màu hợp lệ không bao giờ chứa dấu cách.
  • Giá trị màu thập lục phân (hex) , thường bao gồm dấu băm có 6 chữ số ( #0099FF). Các giá trị tốc ký gồm 3 chữ số ( #09F) và giá trị thập lục phân gồm 8 chữ số cũng hợp lệ, trong đó 2 chữ số cuối chứa giá trị alpha cho độ trong suốt (ví dụ: , #0099FF50trong suốt 50% #0099FF). Nếu bạn đang sử dụng các giá trị màu hex, hãy đảm bảo chúng luôn bắt đầu bằng #
  • Giá trị rgb ( rgb(0,153,255)) hoặc giá trị rgba (ví dụ: rgba(0,153,255,0.5), trong đó 0,5 có nghĩa là độ trong suốt 50%)
Hành vi Thu hẹp tập kết quả – khi chọn nhiều màu, chỉ hiển thị kết quả khớp với tất cả các màu đã chọn: 

Mở rộng tập kết quả – khi chọn nhiều màu, hiển thị tất cả kết quả khớp với bất kỳ màu nào đã chọn:
Đếm Số lượng lựa chọn màu tối đa để hiển thị. Sử dụng -1không có giới hạn. Tuy nhiên, lưu ý rằng FacetWP giới hạn số lượng tối đa 1000vì lý do khả năng sử dụng và hiệu suất.
Giới hạn mềm Số lựa chọn trước khi hiển thị {num}liên kết “Xem thêm”/“Xem ít hơn”. liên kết. Đặt thành 0để hiển thị tất cả các tùy chọn. Lưu ý: nhãn này có thể dịch được bằng hook facetwp_i18n , bằng __(), hoặc bằng bộ lọc gettext .

Sử dụng phân loại tùy chỉnh hoặc thuộc tính sản phẩm WooC Commerce làm Nguồn dữ liệu

Trong cài đặt của khía cạnh Màu sắc , bạn có thể chọn phân loại làm Nguồn dữ liệu. Đây có thể là phân loại tùy chỉnh hoặc – nếu bạn đang sử dụng WooC Commerce – thuộc tính sản phẩm toàn cầu , cũng được lưu trữ dưới dạng phân loại tùy chỉnh.

Khi phân loại được đặt làm Nguồn dữ liệu, FacetWP xử lý các giá trị màu như sau:

  • Tên thuật ngữ được sử dụng để tạo ra sự hiển thị các mẫu màu của mặt. Điều này có nghĩa là tên thuật ngữ phải có giá trị màu hợp lệ . (Về mặt kỹ thuật, tên thuật ngữ được lưu trữ trong bảng chỉ mục của FacetWP dưới dạng facet_display_value).
  • Sên thuật ngữ được sử dụng để lọc, có nghĩa là chúng sẽ hiển thị trong url sau khi tương tác với khía cạnh Màu sắc. (Về mặt kỹ thuật, thuật ngữ sên được lưu trữ trong bảng chỉ mục của FacetWP dưới dạng facet_value).
Khía cạnh màu FacetWP sử dụng thuật ngữ phân loại hoặc thuộc tính sản phẩm WooC Commerce làm nguồn dữ liệu
Khi sử dụng phân loại tùy chỉnh hoặc thuộc tính sản phẩm WooC Commerce để lưu trữ các giá trị khía cạnh Màu sắc, tên thuật ngữ được sử dụng để hiển thị màu sắc, trong khi sên thuật ngữ được sử dụng để lọc và url.

Bạn có thể sử dụng cùng một giá trị màu cho tên thuật ngữ và sên thuật ngữ, nhưng hãy nhớ rằng WordPress sẽ xóa dấu cách, dấu phẩy và các ký tự đặc biệt khác khi nó tự động tạo sên thuật ngữ từ tên thuật ngữ. Ví dụ: nếu giá trị màu trong tên thuật ngữ được đặt thành rgb(255,0,0), sên thuật ngữ được tạo tự động sẽ trở thành rgb25500. Điều này sẽ hiệu quả, nhưng để làm cho url được lọc trông dễ đọc hơn, bạn có thể thay đổi thuật ngữ slug theo cách thủ công red, mà – đối với một khía cạnh có tên “color” – sẽ làm cho url trông giống như: /?_color=red.

Sử dụng trường tùy chỉnh thuật ngữ phân loại làm nguồn dữ liệu

Với Trường tùy chỉnh nâng cao hoặc Nhóm , bạn có thể thêm các trường tùy chỉnh vào thuật ngữ phân loại. Nếu bạn đặt trường thuật ngữ tùy chỉnh làm nguồn dữ liệu cho khía cạnh Màu sắc, bạn sẽ nhận thấy rằng khía cạnh đó không hiển thị bất kỳ lựa chọn nào. Điều này là do các trường tùy chỉnh gắn liền với thuật ngữ phân loại không thể được FacetWP lập chỉ mục trực tiếp.

Tuy nhiên, với một chút mã tùy chỉnh, bạn có thể sử dụng trường thuật ngữ tùy chỉnh làm nguồn dữ liệu . Xem phần này trên trang Trường tùy chỉnh nâng cao để biết hướng dẫn.

Tùy chỉnh các giá trị tiêu đề của Lựa chọn người dùng và mẫu màu

Nếu bạn có một khía cạnh Lựa chọn của người dùng trên trang của mình và một khía cạnh Màu sắc sử dụng phân loại làm nguồn dữ liệu , hãy ghi nhớ những điều sau.

Nếu lựa chọn khía cạnh Màu sắc được chọn, theo mặc định, thuật ngữ sên được hiển thị dưới dạng tên màu trong Lựa chọn của người dùng ( vì tên thuật ngữ được sử dụng cho giá trị màu ).

Với hook facetwp_facet_display_value , có thể lọc và tùy chỉnh tên màu này.

Ví dụ sau trước tiên đặt $label(theo mặc định là trống) thành facet_value( thuật ngữ slug ). Sau đó, nó thay thế bất kỳ dấu gạch ngang nào bằng dấu cách và viết hoa từng từ. Vì vậy, nếu bạn có lựa chọn với slug orange-redmà không có đoạn mã, nó sẽ hiển thị dưới dạng “đỏ cam” trong Lựa chọn của người dùng. Với đoạn mã, nó sẽ hiển thị dưới dạng “Orange Red”.

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 ) {
if ( ‘my_color_facet_name’ == $params[‘facet’][‘name’] ) { // Replace “my_color_facet_name” with the name of your Color facet.
$label = $params[‘row’][‘facet_value’]; // Use the facet_value (term slug) as label. By default, $label is empty.
$label = ucwords(str_replace(‘-‘, ‘ ‘, $label)); // Replace dashes with and capitalize the first letters.
}
return $label;
}, 10, 2);

Lưu ý khi bạn lọc tên màu như thế này thì đầu ra cũng sẽ xuất hiện trong thuộc titletính của mẫu màu, dẫn đến tên màu được hiển thị khi di chuột qua mẫu màu. Vì vậy, với đoạn mã trên, bạn sẽ thấy “Màu đỏ cam” khi di chuột qua mẫu màu. Nếu không có đoạn mã, tiêu đề sẽ trống và bạn sẽ không thấy gì khi di chuột.

Xin lưu ý rằng hành vi được mô tả ở trên sẽ khác khi bạn đang sử dụng Mẫu biến thể cho Mẫu màu thuộc tính WooC Commerce hoặc WooC Commerce .

Dịch các giá trị tiêu đề của Lựa chọn người dùng và mẫu màu

Móc facetwp_facet_display_value cũng có thể được sử dụng để dịch tên màu trong thuộc tính Lựa chọn của người dùng và tiêu đề, như trong ví dụ sau.

Lưu ý rằng $labeltheo mặc định là trống, vì vậy trước tiên chúng tôi đặt nó thành facet_value( thuật ngữ slug ), trước khi dịch 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_display_value’, function( $label, $params ) {
if ( ‘my_color_facet_name’ == $params[‘facet’][‘name’] ) { // Replace “my_color_facet_name” with the name of your Color facet
$label = $params[‘row’][‘facet_value’]; // Use the facet_value (term slug) as label. By default, $label is empty.
// 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 ‘de’ :
if ( ‘red’ == $label ) {
$label = ‘Rot’; // translate “red” into German
}
break;
case ‘nl’:
if ( ‘red’ == $label ) {
$label = ‘Rood’; // translate “red” into Dutch
}
break;
}
}
return $label;
}, 20, 2 );

Như trong ví dụ mã trước, khi bạn dịch tên màu như thế này, đầu ra cũng sẽ xuất hiện trong thuộc titletính của mẫu màu, dẫn đến tên màu đã dịch sẽ hiển thị khi di chuột qua mẫu màu.

Tích hợp

Khía cạnh Màu sắc tích hợp với một số plugin ‘mẫu màu’ của WooC Commerce:

Mẫu biến thể cho WooC Commerce

Plugin Swatches biến thể cho WooC Commerce của Emran Ahmed cho phép bạn đính kèm màu sắc hoặc hình ảnh vào thuộc tính sản phẩm WooC Commerce của mình. Khi thêm một khía cạnh, hãy đặt Nguồn dữ liệu của nó thành thuộc tính sản phẩm chứa mẫu màu/hình ảnh tùy chỉnh của bạn.

Thêm hỗ trợ cho màu kép

Mẫu biến thể cho Woocommerce Pro - mẫu màu kép
Màu kép trong khía cạnh Màu sắc với Mẫu biến thể cho WooC Commerce Pro

Nếu bạn đang sử dụng phiên bản Pro của plugin này, bạn có tùy chọn sử dụng các mẫu màu “kép” trong các thuộc tính có loại “Màu”. Các mẫu màu kép có một màu chính và một màu phụ, được hiển thị cùng nhau trong một mẫu, với góc phân tách 45 độ.

Với một chút mã tùy chỉnh, có thể để các màu kép này hiển thị trong khía cạnh Màu sắc .

Thêm hỗ trợ cho các nhóm màu

Tính năng “nhóm màu” của phiên bản Pro cũng có thể được sử dụng với FacetWP. Với một chút mã tùy chỉnh, có thể để FacetWP lập chỉ mục các nhóm màu này thay vì các màu riêng lẻ .

Mẫu thuộc tính WooC Commerce

Plugin Swatches thuộc tính WooC Commerce của IconicWP cũng cho phép bạn đính kèm màu sắc hoặc hình ảnh vào thuộc tính sản phẩm WooC Commerce của mình, tương tự như plugin Swatches biến thể cho WooC Commerce.

Hiển thị tên màu bên cạnh các mẫu màu

Cách hiển thị tên màu bên cạnh các mẫu màu trong một khía cạnh màu.

Thêm mã sau vào hàm.php của chủ đề (con) của bạn để thêm tên màu bên cạnh các mẫu màu.

Ví dụ này sử dụng $result['facet_value']để truy xuất tên của màu, là thuật ngữ slug nếu nguồn màu của bạn là taxonomy .

Tùy thuộc vào thiết lập trường nguồn của bạn, bạn có thể cần sử dụng $result['facet_display_value'](là tên thuật ngữ trong phân loại). Hoặc bạn có thể sử dụng $result['term_id']để tra cứu trường tùy chỉnh được lưu cho thuật ngữ phân loại.

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_option’, function( $item, $result, $params ) {
$classes = ”;
if ( $result[‘overflow’] ) {
$classes = ” facetwp-overflow facetwp-hidden”;
}
$item = str_replace( ‘<div’, ‘<div class=”facetwp-color-item’ . $classes . ‘”><div’, $item );
$item = str_replace( ‘</div>’, ‘</div><div class=”facetwp-color-name”>’ . $result[‘facet_value’] . ‘</div></div>’, $item );
return $item;
}, 11, 3 );

Ngoài ra, hãy thêm CSS sau để đặt từng màu cùng với tên của nó trên một dòng:

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_action( ‘wp_head’, function() {
?>
<style>
.facetwp-color-item {
margin: 0 0 12px 0;
display: block;
}
.facetwp-color-item.facetwp-hidden {
display: none;
}
.facetwp-color-item .facetwp-color {
margin: 0;
float: left;
}
.facetwp-color-item .facetwp-color-name {
display: inline-block;
margin-left: 10px;
line-height: 30px;
white-space: nowrap;
}
</style>
<?php
}, 100 );

Thêm số lượng kết quả vào các mẫu màu khía cạnh

Cách thêm số lượng kết quả vào các mẫu màu trong một khía cạnh màu.

Theo mặc định, các lựa chọn khía cạnh Màu sắc không hiển thị số lượng kết quả. Thêm mã sau vào hàm.php của chủ đề (con) của bạn để thêm số lượng vào bên phải các mẫu màu:

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_option’, function( $item, $result, $params ) {
$classes = ”;
if ( $result[‘overflow’] ) {
$classes = ” facetwp-overflow facetwp-hidden”;
}
$item = str_replace( ‘<div’, ‘<div class=”facetwp-color-item’ . $classes . ‘”><div’, $item );
$item = str_replace( ‘</div>’, ‘</div><div class=”facetwp-counter”>(‘ . $result[‘counter’] . ‘)</div></div>’, $item );
return $item;
}, 11, 3 );

Ngoài ra, thêm CSS sau:

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_action( ‘wp_head’, function() {
?>
<style>
.facetwp-color-item {
margin: 0 12px 12px 0;
display: inline-block;
}
.facetwp-color-item.facetwp-hidden {
display: none;
}
.facetwp-color-item .facetwp-color {
margin: 0;
float: left;
}
.facetwp-color-item .facetwp-counter {
display: inline-block;
margin-left: 5px;
line-height: 30px;
}
</style>
<?php
}, 100 );

Nếu bạn đang sử dụng cài đặt “Giới hạn mềm” và muốn thay đổi hoặc dịch {num}văn bản liên kết “Xem thêm” / “Xem ít hơn”, bạn có thể sử dụng plugin dịch để thay đổi chuỗi __()hoặc bạn có thể sử dụng hook facetwp_i18n .

Một cách khác là sử dụng móc lọc gettext . Thêm mã sau vào hàm.php của chủ đề (con) 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( ‘gettext’, function( $translated_text, $text, $domain ) {
if ( ‘fwp-front’ == $domain ) {
if ( ‘See {num} more’ == $text ) {
$translated_text = ‘Show {num} more’;
}
elseif ( ‘See less’ == $text ) {
$translated_text = ‘Show less’;
}
}
return $translated_text;
}, 10, 3 );