FacetWP là một plugin cao cấp để cài đặt các bộ lọc nhanh chóng và dễ dàng như các trình đơn chọn, hộp kiểm và các nút radio.
Khi bạn sử dụng FacetWP việc lọc doanh mục cho bài viết trở lên dễ dàng hơn bao giờ hết, ví dụ với trang amazon.com, khi muốn mua một chiếc máy xay sinh tố, bạn không biết máy nào tốt? Việc của bạn là lọc theo các doanh mục có chứa máy xay này trên đó, tiếp đến lọc theo giá, số review 5 sao…. và cuốn cùng sẽ ra kết qua như bạn mong muốn.
Vậy FacetWP cũng tương tự vậy, nó cho phép bạn lọc nhiều doanh mục trong cùng một lúc, chỉ cần một lần click chuột..
Xem thêm >> Hướng dẫn Genesis Framework – Thêm widget dưới bài đăng
>>Hướng dẫn cài đặt Genesis Framework và Genesis Child Theme
Hướng dẫn này bao gồm các bước để hiển thị bộ lọc trong tiện ích văn bản trên trang Bài đăng, lưu trữ và trang kết quả tìm kiếm bằng FacetWP. Các bài đăng có thể được lọc bằng cách chọn một hoặc nhiều chuyên mục lọc kết quả khác nhau.
Làm thế nào để lọc bài viết theo doanh mục sử dụng FacetWP trong genesis
Mặc dù hướng dẫn được viết cho Genesis Sample, nhưng nó hoạt động với bất kỳ child theme nào của Genesis.
Bước 1: Cài đặt và kích hoạt FacetWP.
Bước 2: Chuyển đến Cài đặt> FacetWP > Facets.
FacetWP đi kèm với một Danh mục ngoài hộp. Vì chúng tôi muốn lọc các bài đăng theo danh mục, chúng tôi không cần tạo một Facet mới.
Nhấp vào Re-index.
Bước 3: Cài đặt widgets cho FacetWP.
Đi tới Appearance> Widgets và kéo một widget văn bản nơi bạn muốn hiển thị các bộ lọc, nhập tiêu đề tiện ích như “Lọc theo danh mục” và dán đoạn mã sau:
[facetwp facet="categories"]
<button value="Reset" onclick="FWP.reset()" class="facet-reset" />Reset Filters</button>
Bạn có thể muốn hạn chế tiện ích này xuất hiện trên trang bài viết, lưu trữ và các trang kết quả tìm kiếm sử dụng plugin Widget Visibility của Jetpack hoặc một plugin tương tự.
Bước 4: Thêm mã CSS vào file style.css và sửa cho phù hợp.
body .facetwp-facet {
margin-bottom: 20px;
}
.facet-reset {
text-align: center;
color: #555;
background-color: #f7f7f7;
border: 1px solid #ccc;
box-shadow: 0 1px 0 #ccc;
vertical-align: top;
font-size: 13px;
padding: 0 10px 1px;
border-radius: 3px;
font-weight: normal;
}
.facet-reset:hover,
.facet-reset:focus {
background-color: #fafafa;
border-color: #999;
color: #23282d;
}
Chúc bạn thành công,
