WP Search with Algolia – Rất gần sự hoàn hảo

WP Search with Algolia là 1 plugin thay thế cho tìm kiếm mặc định trên WordPress

Sử dụng trên nền tảng tìm kiếm của Algolia, WebDevStudios đã tạo ra plugin này, họ viết rất đơn giản, nhưng cũng đủ tính năng để sử dụng 😛 thực tế mình chỉ cài vào, không sửa bất cứ dòng code nào, mọi thứ đã chạy hoàn hảo

Plugin tìm kiếm khác mình khá ấn tượng là Jetpack Search, họ dùng công nghệ từ Elasticsearch nên không dụng chạm gì MySQL, rất nhẹ, kết quả tìm kiếm tốt, có điều cái giao diện tìm kiếm họ làm nhức đầu quá 😀 trước đây mình dùng Relevanssi Light, chủ yếu vì đơn giản, nhẹ, đủ dùng, có điều dạo này search thấy kết quả ra sai be bét 😀 nên thôi, google tìm kiếm 1 dịch vụ …. tìm kiếm khác 😀

Về Algolia sau khi dùng thử, mình nghĩ 10 người, có lẽ sẽ hết 9 người thấy tiếc vì không dùng (hoặc biết) nó sớm hơn 😀 vì nó quá nhanh và quá nguy hiểm luôn, gia đình Dom gọi bằng cụ 😀

Cụ thể bạn có thể thử tìm kiếm cái gì đó trên bibica.net để kiểm nghiệm tốc độ

Ngoài chuyện tìm kiếm gần như tức thì, không tốn tài nguyên server, nó còn hỗ trợ khá nhiều tính năng thiết thực khác, như đề xuất tự động, khi gõ sai chính tả có thể đoán từ …

Các tính năng của Algolia thì các dịch vụ khác cũng có cả, chủ yếu Algolia vô cùng hào phóng, khi cho tìm kiếm miễn phí 10.000 lượt mỗi tháng 😀 thật sự quá rủng rỉnh, trong trường hợp trang nào quá to, dùng hết thì tự động chuyển về dùng tìm kiếm mặc định của WordPress, thực tế mình nghĩ bạn cứ tạo tầm 10 cái tài khoản, hết lượt cái này thì add cái khác vào, thì cơ bản có thể gọi là miễn phí 100% 😛

Search powered by Algolia
Search powered by Algolia

Yêu cầu duy nhất là cần gắn thêm logo Algolia (hoặc dòng text Search powered by Algolia) khi hiển thị kết quả tìm kiếm, một điểm khá là kì quặc, khi WebDevStudios tích hợp nó vào WordPress, nhưng chỉ hiển thị khi bạn dùng tính năng tìm kiếm nhanh dạng Autocomplete, chứ tìm kiếm thông thường nó không hiện ra :]]

Ở góc độ cá nhân, trên trang bibica.net, gần như mọi dịch vụ mình dùng, mình đều có viết bài giới thiệu, và để chi chít quảng bá cho họ 😀

Chẳng hạn như ở cuối trang, bạn có thể thấy  UpCloud  CyberPanel  Cloudflare  GeneratePress  WordPress ….

Vâng, đoạn trên nói nhảm là chính, giờ tới các bước cài đặt và cấu hình WP Search with Algolia 😛

Tạo Algolia API keys

Your search data will be hosted in US West
Your search data will be hosted in US West

Nếu bạn đọc thấy bài này, thì hiện tại, khi tạo tài khoản mới, mặc định location sẽ là US, có thể đổi sang UK, EU nhưng không có châu Á và chỉ cho set 1 Applications

Tài khoản Algolia bibica.net
Tài khoản Algolia bibica.net

Tài khoản của mình tạo cách đây khoảng 6 tháng,  nên tạo được 2 Applications, có đủ Singapore, Hong Kong

United Kingdom
United Kingdom

Mình có thử dùng location US West, thấy cũng ổn, dùng thông thường chắc ít ai nhận ra là location US, bạn nào server VPS ở châu Á thì có thể thử location United Kingdom, nhanh hơn 1 chút so với location US

Cài đặt và cấu hình plugin WP Search với Algolia

Cài đặt WP Search với Algolia như 1 plugin thông thường

Settings

WP Search with Algolia Settings
WP Search with Algolia Settings
  • Add vào các giá trị Application ID, Search-only API key, Admin API key

Tác giả đã để sẵn link ngay bên cạnh, chưa tạo ấn vào là tới thẳng trang lấy API luôn

Search Page

WP Search with Algolia Search Page
WP Search with Algolia Search Page
  • Chọn tùy chọn 2 Use Algolia with the native WordPress search template là hợp lý nhất

Nó giữ được giao diện tìm kiếm gốc quen thuộc của bạn, vẫn dùng được Autocomplete, lại tận dụng được tốc độ tìm kiếm siêu nhanh từ Algolia

Hoàn toàn hài lòng với tùy chọn này từ WebDevStudios

Gần như nó sẽ phù hợp với mọi theme dùng cấu trúc search mặc định của WordPress

Autocomplete

Algolia Search in WordPress Autocomplete
Algolia Search in WordPress Autocomplete
  • Bật tùy chọn Enable Autocomplete (sử dụng tìm kiếm nhanh)

Autocomplete Config: với blog thì stick chọn All posts (Index name: searchable_posts) là đủ

Max. Suggestions: mặc định hiện ra 5 tìm kiếm, theo mình cũng là con số phù hợp

Index All Content

Index All Content
Index All Content

Việc index trên Algolia rất tốt, như trang bibica.net, toàn bộ bài viết, khi dùng cụm location Singapore, index chỉ mất ~ 20s, re-index ~ 12s gì đó trên con VPS UpCloud cấu hình thấp nhất 1Gb RAM, lúc chạy CPU load max cũng chỉ ~80%, thậm chí bản thân Algolia còn tạo thêm các ảnh thumbnail riêng cho bài viết

Searchable attributes
Searchable attributes

Các tùy chỉnh tìm kiếm của Algolia theo mình đã rất xuất sắc rồi, chưa kể bên trong trang quản trị, Algolia còn bổ xung thêm rất nhiều tùy chọn để tìm kiếm theo ý bạn thích hơn

File js, css
File js, css

Nếu bạn cài đặt như ở trên thì khi chạy load thêm 4 file, tổng dung lượng ~ 25kb

 

Upgrading to Grow
Upgrading to Grow

Gói trả phí của họ, vẫn miễn phí tìm kiếm 10.000 lần 1 tháng, dùng hết mới bắt đầu tính $0.5 cho 1000 lượt tìm kiếm mới, kèm theo có thể bỏ đi đoạn quảng cáo “Search powered by Algolia”

Bạn nào thích “mưu hèn kế bẩn” thì có thể add thẻ vào để dùng gói trả phí (Grow) nhằm bỏ đi dòng quảng cáo, set email thông báo để lỡ có dùng hết lượt miễn phí thì vào chuyển sang tài khoản khác dùng FREE =))

WP Search with Algolia Pro
WP Search with Algolia Pro

Phiên bản WP Search with Algolia Pro tập trung rất mạnh vào WooCommerce, bạn nào có nhu cầu có thể tham khảo thêm, nhu cầu của mình thì bản miễn phí quá đủ rồi

Tùy chỉnh Autocomplete

Do mình dùng các ảnh trên subdomain phụ, cấu hình thông qua Jetpack, mà link ảnh phần autocomplete-post-suggestion trên WP Search with Algolia vẫn dùng theo domain gốc, không cho sửa tự động, kết quả nếu gõ vào tìm kiếm, bài viết suggestion dùng ảnh fullsize to vật cho cái vị trí kích thước 32 x 32 😀

Mở file autocomplete.php, tìm tới phần tmpl-autocomplete-post-suggestion, thay trực tiếp src sang subdomain muốn sử dụng

<script type="text/html" id="tmpl-autocomplete-post-suggestion">
    <a class="suggestion-link" href="{{ data.permalink }}" title="{{ data.post_title }}">
        <# if ( data.images.thumbnail ) { #>
            <# 
                // Extract the path from the URL, removing '/wp-content/uploads' and any existing domain.
                var imagePath = data.images.thumbnail.url.replace(/^https?:\/\/[^\/]+\/wp-content\/uploads\//, '');
            #>
            <img class="suggestion-post-thumbnail" src="https://images.bibica.net/{{ imagePath }}?w=500" alt="{{ data.post_title }}">
        <# } #>
        <div class="suggestion-post-attributes">
            <span class="suggestion-post-title">{{{ data._highlightResult.post_title.value }}}</span>
            <# if ( data._snippetResult['content'] ) { #>
                <span class="suggestion-post-content">{{{ data._snippetResult['content'].value }}}</span>
            <# } #>
        </div>
        <?php
        do_action( 'algolia_autocomplete_after_hit' );
        ?>
    </a>
</script>

Do mình bỏ thêm /wp-content/uploads nên bổ xung thêm 1 chút

Muốn đảm bảo code không bị đổi mỗi khi update plugin thì chép file autocomplete.php vào bên trong thư mục theme đang dùng

Kết luận

Đang rất hài lòng với WP Search with Algolia trên bibica.net, nhanh, nhẹ, đơn giản, miễn phí, vài khuyết điểm nhỏ hoàn toàn có thể bỏ qua hoặc tự xử lý được 😀

Thứ duy nhất mình có thể phàn nàn là hiện tại họ không có location Asia, ai tạo từ ngày xưa thì còn, nếu mình dùng location Singapore, search chỉ khoảng 0.5s, dùng location US, UK loanh quanh 1-1.5s, tuy thế đôi lúc lên tới 3-4s


Related Posts

Chính sách bình luận: Chúng tôi rất trân trọng các bình luận của bạn và cảm ơn thời gian bạn dành để chia sẻ ý tưởng và phản hồi.
Ghi chú: Những bình luận được xác định là spam hoặc chỉ mang tính quảng cáo sẽ bị xóa.

• Để cải thiện trải nghiệm bình luận, chúng tôi khuyến khích bạn tạo một tài khoản Gravatar. Thêm avatar vào tài khoản Gravatar sẽ giúp bình luận của bạn dễ nhận diện hơn đối với các thành viên khác.

✂️ Sao chép và 📋 Dán Emoji 💪 giúp bình luận thêm sinh động và thú vị!