WordPress進階AJAX搜尋外掛程式JetSearch使用教學課程,產品分類條件篩選即時搜尋插件

WordPress進階AJAX搜尋外掛程式JetSearch使用教學課程,產品分類條件篩選即時搜尋插件
本篇文章分享WordPress高級AJAX搜尋外掛程式JetSearch使用教學課程,Jet Search提供快速、動態的搜尋體驗,讓使用者在不刷新頁面的情況下即時取得搜尋結果,還能依照設定的條件進行篩選搜索,提升使用者體驗。
文章目錄

本篇文章共3123 字,預計閱讀時間13 分鐘

AJAX即時搜尋外掛程式JetSearch使用教學課程

JetSearch是由Crocoblock開發一款阿賈克斯即時搜尋插件。

JetSearch的主要特點:

  1. Ajax 即時搜尋 – 透過即時搜尋技術,使用者輸入關鍵字後,結果會即時顯示,無需等待頁面重新整理。

  2. 高度可自訂 – 可自訂搜尋列的外觀、樣式和佈局,完美適配Elementor 設計。

  3. 智慧搜尋 – 支援在特定內容類型(文章、頁面、產品、自訂文章類型等)中搜尋,並可設定優先順序。

  4. 支援WooCommerce – 適用於電商網站,可快速搜尋產品,提升使用者體驗。

  5. 關鍵字高亮 – 在搜尋結果中高亮顯示匹配的關鍵字,增強可讀性。

  6. 多字段搜尋 – 可在標題、內容、分類、標籤、SKU(適用於WooCommerce)等多個欄位中進行搜尋。

  7. 相容性強 – 適用於大多數WordPress 主題

適用場景:

  • 文章部落格網站:提升使用者尋找內容的效率。

  • WooCommerce 商城:快速搜尋產品,提高轉換率。

接下來就由Well分享JetSearch使用教學:

安裝JetSearch

上傳安裝Wordpress插件

Wordpress後台 – 插件– 安裝新插件,點選右上角上傳插件,將JetSearch插件安裝包上傳安裝到Wordpress。

安裝並啟用Jet Search後,透過選單列「Crocoblock – JetPlugins Settings」開啟JetSearch的預設值:

JetSearch預設設定

可以在預設設定裡添加Suggestions(搜尋建議)。

Ajax Search Settings裡設定JetSearch的預設功能,這一可以不做設置,使用JetSearch時單獨設定即可。

用JetSearch做全域產品搜索

首先,使用Elementor開啟需要新增Ajax即時搜尋的頁面或模板,Well準備把JetSearch搜素框加入網站Header(頁首)區域:

網站頁首添加JetSearch

如果你還沒有創建網站Header,請參考使用Elementor建立頁眉頁腳

在元素搜尋框中輸入“Search”,將Ajax Search(這就是JetSearch產生的Elementor小工具)小工具新增到指定的區域。

接下來設定JetSearch小工具:

 

Search Form設定

JetSearch Search Form設置

輸入圖示: 就是搜尋框最左側顯示的圖標,可以上傳SVG圖片或是在Elementor圖標庫裡選。

清除文字按鈕圖標: 清楚搜尋內容的圖標,用預設的就行,是個「 X 」。

佔位符文字: 搜尋框裡的提示語,如果你的搜尋框是用來搜尋產品的,可以寫類似「Search Product」的文字。

搜尋的最小符號數量: 搜尋時最少要輸入的字符,如果填“2”,最少要輸入兩個字符才啟動即時搜尋。

允許透過空字串搜索: 不建議開啟。

停用 Enter 鍵提交: 如果你想即時搜索,不想用戶透過回車鍵提交跳到搜尋結果頁(結合下面禁用搜尋按鈕),就開啟。

顯示提交按鈕: 是否顯示搜尋按鈕,Well選擇不顯示,結合關閉回車鍵搜索,只實現即時搜索,不讓用戶跳轉頁面,集中精力,利於轉換。

顯示類別列表: 如果你網站產品多的話還是開啟好一些,在分類條件的篩選下,使用者能更容易找到產品。

選擇佔位符: 分類的提示詞。

行動裝置上的響應式表單:開啟。

 

Search Query設置

JetSearch Search Query設置

JetSearch Search Query設置

按目前查詢搜尋: 會自動限定搜尋範圍在目前查詢下。如果你新增的是一個全域搜尋框就不開啟,如果你是想在文章分類或產品分類下新增該搜尋框,可以開啟。

自訂搜尋結果 URL: 不用填寫。

來源: 想要搜尋的範圍,可以新增單一或多個範圍。

包含,排除: 需要包含或排除的內容。

在自訂字段中搜尋: 搜尋一些自訂字段,例如價格、屬性。

句子搜尋: 句子搜尋可以讓搜尋更精準,不只是簡單的分詞搜尋。

按分類術語搜尋: 決定搜尋的時候是否也檢索分類名稱,如果搜尋字詞符合某個分類,即使裡面的產品沒有符合到也會列出來。

結果排序依據: 搜尋結果的順序,預設依照相關性排序。

結果順序: ASC是升序,DESC是降序。

使用產品目錄可見性設定: 開啟,會遵循WooCommerce產品可見性原則展示產品,搜尋結果不會顯示目前使用者不能看的產品。

每頁貼文數: 搜尋結果每頁顯示多少條。

發文數: 最多顯示多少個搜尋結果。

 

Results Area設置

- Well建站| 唯有二建站

- Well建站| 唯有二建站

結果區域寬度: 搜尋結果區域的寬度,建議選擇和搜尋框一樣寬(by Search Form)。

列數: 列數,1列。

突出顯示搜尋到的文本: 高亮顯示搜尋結果,開啟。

顯示貼文縮圖: 顯示搜尋結果的縮圖,開啟。

縮圖大小:縮圖。

縮圖佔位符: 縮圖佔位符,如果搜尋結果沒有特色圖,會顯示設定的佔位符圖片。

貼文內容來源:文章摘錄。

貼文內容長度:30。

顯示產品價格: 開啟。

顯示產品評級: 不開啟。

顯示加入購物車按鈕: 開啟。

顯示結果計數器: 開啟。

結果計數器文字: 結果。

顯示所有結果按鈕: 不開啟,避免使用者點擊後跳轉頁面。

在新分頁中開啟結果: 不開啟。

項目符號分頁、數字分頁、導覽箭頭:顯示在頁首。

導航箭頭類型: 角度。

樣式設定

JetSearch AJAX Search小工具樣式設置

這個小部件的樣式設定比較精細,可以控製到每個部分的樣式,根據網站風格和個人需求調整即可。

效果展示:

JetSearch效果展示

以上就是JetSearch使用教學的全部內容,網站使用即時搜尋可以提升網站的使用者體驗和使用者專注度,增強網站轉換。

點擊了解更多Wordpress外掛程式使用教學課程

: ) 文章內容均為原創,轉載須註明出處並添加原文鏈接,否則視為侵權
外貿伺服器推薦(Well在用的伺服器)
vultr-徽標
一線品牌VPS伺服器,穩定、不貴、效能強
Clouvider 標誌
二線品牌VPS伺服器,穩定、便宜、效能強
文章標籤
文章推薦
文章目錄
相關文章
繁体中文