Hướng dẫn cài đặt tìm kiếm cực nhanh cho WordPress qua Algolia

Trong bài này mình sẽ hướng dẫn các bạn cách đăng ký tài khoản và cài đặt plugin tìm kiếm cho WordPress thông qua Algolia. Plugin này cho ra kết quả tìm kiếm rất nhanh và chính xác.

Plugin này hoàn toàn miễn phí và tài khoản trên Algolia cũng có bản miễn phí và thoải mái dùng cho site vừa và nhỏ. Còn các site lớn thì các bạn có thể tham khảo giá trên trang chủ algolia.com nhé

Nội dung chính trong bài bao gồm:

1. Cách đăng ký tài khoản
2. Cài đặt plugin WP Search with Algolia
3. Cấu hình cơ bản
4. Thêm giá vào kết quả tìm kiếm
5. Câu hỏi thường gặp

Cách đăng ký tài khoản

1. Truy cập vào website https://www.algolia.com/users/sign_up
2. Nhập đầy đủ thông tin để đăng ký
3. Chuyển sang tài khoản miễn phí. Xem trong video

Cài đặt plugin WP Search with Algolia

1. Vào admin Plugins > Thêm mới
2. Sau đó tìm plugin WP Search with Algolia
3. Tiến hành cài đặt. Xem trong video

Cấu hình cơ bản

1. Nhập thông tin API như hình
   
2. Cấu hình sẽ tìm kiếm ở những phần nào và tiến hành Index dữ liệu
   

Thêm giá vào kết quả tìm kiếm

Bước này chắc là bước mong đợi nhất bài hướng dẫn vì mặc định plugin không có. Mà sản phẩm mà không hiện giá thì còn nói chuyện gì nữa phải không? 😀 các bạn xem video để hiểu rõ hơn nhé

Bước 1: Thêm code sau vào functions.php trong theme của bạn

Kho plugin của tôi

DevVN Woocommerce Reviews

Plugin mua hàng nhanh cho woocommerce – Woocommerce Quick buy

Plugin kết nối giao hàng tiết kiệm với Woocommerce – GHTK vs Woocommerce

Plugin Kết nối Zalo OA với WordPress

/*
Author: levantoan.com
*/
add_filter( 'algolia_post_product_shared_attributes', 'devvn_add_price_to_algolia', 10, 2 );
add_filter( 'algolia_searchable_product_shared_attributes', 'devvn_add_price_to_algolia', 10, 2 );
function devvn_add_price_to_algolia($shared_attributes, $post){
    $product = wc_get_product( $post );
    $shared_attributes['price_html'] = $product->get_price_html();
    return $shared_attributes;
}

Bước 2:  thêm css làm đẹp cho phần giá. bạn có thể thêm vào Giao diện > Tùy biến > css bổ sung hoặc file style.css nếu theme bạn có dùng file này

/*
Author: levantoan.com
*/
.suggestion-post-title{
    color: #1a1a1a;
}
.aa-dropdown-menu .aa-suggestion em {
    background: transparent;
}
.suggestion-post-price {
    font-size: 14px;
}
.suggestion-post-price > .amount,
.suggestion-post-price > ins .amount {
    color: red;
    text-decoration: none
}
.suggestion-post-price > ins{
    text-decoration: none
}
.suggestion-post-price del {
    font-size: 12px;
    color: grey
}

Bước 3: Tạo folder và file algolia/autocomplete.php trong theme mà bạn đang dùng nhé. Với nội dùng autocomplete.php như sau

Hỏi đáp

Hỏi: Làm sao bỏ phần mô tả ngắn trong kết quả tìm kiếm?

Đáp: Bạn có thể xóa đoạn code này (dòng 32->34) trong file algolia/autocomplete.php ở bước trên như hình

Hỏi: Có tăng được số sản phẩm hiển thị trong kết quả tìm kiếm không?

Đáp: Có. Bạn hãy sửa dòng 132 trong file algolia/autocomplete.php sang số mà bạn muốn. Ví dụ là 10 như hình

Chúc các bạn thành công!

Mẫu website nổi bật của tôi

Dự án website bán laptop surface

Mẫu website bán thiết bị nhà bếp, nhà tắm, thiết bị vệ sinh tuyệt đẹp

Mẫu website bán hàng giống shopee

Mẫu website bán đồ gỗ, đồ thờ, đồ phòng thủy