如何為您的WordPress網站添加即時Ajax搜索(簡單方法)
即時搜索顯示訪客在搜索欄中鍵入時的結果,類似於Google工作方式。這有助於訪客快速找到頁面、文章、產品等內容。在本文中,我們將向您展示如何為WordPress網站添加即時Ajax搜索功能。
為什麼要為WordPress添加即時Ajax搜索?
即時Ajax搜索,也被稱為即時搜索,通過添加下拉和自動完成功能來改進內置的WordPress搜索,這是像Google等搜索引擎中常見的功能。即時搜索猜測用戶正在搜索的內容,這可以幫助他們更快找到相關內容。這通常會改善用戶體驗、增加頁面瀏覽量並降低跳出率。有了Ajax即時搜索,您可以在不重新加載頁面的情況下顯示相關結果。這使它成為電子商務網站的絕佳選擇,因為購物者可以立即看到與他們的搜索查詢匹配的產品。通過這種方式,即時搜索可以幫助您創建更智能的產品搜索。
步驟1:使用WordPress插件啟用Ajax搜索
添加即時Ajax搜索到WordPress的最簡單方法是使用SearchWP Live Ajax Lite Search這個免費插件。該插件自動在您的網站上添加即時搜索功能,並完美兼容任何WordPress主題。首先,您需要安裝並激活該插件。詳細信息請參見我們關於如何安裝WordPress插件的分步指南。激活後,轉到SearchWP » 設置,然後點擊“啟用即時搜索”開關。完成後,點擊“保存”以存儲您的更改。現在,您的默認WordPress搜索塊將啟用即時Ajax搜索。
步驟2:在您的WordPress網站上添加Ajax即時搜索表單
激活插件後,您網站上的每個搜索欄都將自動使用即時Ajax搜索,包括任何您創建的自定義搜索表單。大多數WordPress主題都有內置的搜索欄。不過,激活即時Ajax搜索後,您可能希望在WordPress網站的其他區域添加搜索欄。
將即時Ajax搜索添加到WordPress頁面
您可能希望在網站的特定頁面上添加即時Ajax搜索框。例如,您可能會在自定義歸檔頁面上添加搜索欄,以便訪客可以輕鬆搜索歸檔。為此,您需要打開要添加搜索欄的帖子或頁面。在本示例中,我們將向您展示如何將即時搜索添加到WordPress頁面,但步驟對於帖子也是類似的。首先,轉到頁面 » 所有頁面,然後選擇您想要編輯的頁面。在WordPress Gutenberg編輯器中,點擊“+”圖標,這將調出區塊菜單。
在這裡,輸入“搜索”,然後點擊“搜索”圖標將其添加到您的頁面中。WordPress會自動為您放置搜索欄。默認情況下,框具有“搜索”標題。您可以通過輸入標籤字段來更改此標題,也可以完全刪除標題文本。您還可以輸入可選的佔位符,即在訪客開始輸入其搜索查詢之前WordPress將顯示的文本。例如,如果您運營一家在線商店,您可能會使用“搜索產品”或“找到好優惠”。當您對搜索欄的設置感到滿意時,點擊“更新”按鈕。現在,您的訪客可以使用即時搜索欄快速找到他們想要的內容。您可以使用相同的過程將搜索欄添加到任何帖子或頁面。
將即時Ajax搜索添加到WordPress側邊欄
許多網站所有者會將搜索欄添加到網站的側邊欄。
這樣訪客無論在哪裡都可以進行搜索。
要將搜索小工具添加到WordPress,請轉到外觀 » 小工具。該頁面顯示了您的WordPress主題的所有不同的小工具就緒區域。您看到的選項可能會有所不同,但大多數主題都會有側邊欄、右側邊欄、左側邊欄或類似部分。簡單地點擊展開您希望添加即時Ajax搜索欄的區域,然後點擊“+”圖標。在彈出窗口中,找到並選擇“搜索”區塊,這將自動將即時Ajax搜索小工具添加到側邊欄或類似部分。完成後,點擊“更新”按鈕以保存更改並使即時搜索欄在您的WordPress博客或網站上生效。現在,如果您訪問您的網站,您會看到側邊欄或類似部分中的即時Ajax搜索欄。您可以使用相同的過程將搜索欄添加到任何其他小工具就緒區域中。注意:要將搜索欄添加到導航菜單中,請參見我們關於如何將搜索欄添加到WordPress菜單的指南。
使用全面網站編輯器將即時搜索添加到WordPress側邊欄
如果您使用的是像ThemeIsle Hestia Pro這樣的基於區塊的主題,您可以使用全面網站編輯器將即時Ajax搜索添加到主題的任何區域。您甚至可以將搜索欄添加到無法使用標準WordPress內容編輯器編輯的區域。例如,您可以將搜索字段添加到404頁面模板。要開始,請前往WordPress儀表板上的外觀 » 編輯器。默認情況下,全面網站編輯器顯示您的主題的主頁模板,但您可以將搜索區塊添加到任何模板。要查看所有可用選項,請在左側菜單中選擇“模板”。
現在,您可以點擊要添加即時Ajax搜索的模板。WordPress現在會顯示設計預覽和任何可以編輯的頁面設置。要繼續編輯此模板,請點擊小鉛筆圖標並打開區塊編輯器。完成後,點擊藍色“+”圖標。在隨後出現的面板中,輸入“搜索”。當“搜索”區塊顯示時,將其拖動到您希望顯示字段的區域。
要自定義區塊標題或佔位符文本,只需在搜索區塊中輸入新的消息即可。當您對區塊外觀感到滿意時,點擊“保存”使即時搜索欄生效。
附加提示:自定義您的即時WordPress搜索引擎
SearchWP Live Ajax Search完美整合了內置的WordPress搜索。然而,這種默認搜索功能非常有限,不善於顯示精確的搜索結果。這時,SearchWP插件派上用場。它是市場上最好的WordPress搜索插件,被超過30,000個網站使用。該插件允許訪客搜索WordPress默認忽略的內容,包括自定義字段、文本文件、PDF文檔、WooCommerce產品、自定義文章類型等。安裝SearchWP後,您可以完全自定義網站上的新即時搜索功能而無需編寫任何代碼。
SearchWP還具有高級分析和統計功能,讓您可以查看訪客在搜索什麼。您可以利用這些見解來微調網站搜索設置並識別網站上最受歡迎的內容。這可以幫助您根據訪客的搜索內容產生新的博客文章想法。
有關詳細信息,您可以參考以下指南:
我們希望本文能夠幫助您學習如何為您的WordPress網站添加即時Ajax搜索。您可能還希望參見我們關於如何跟蹤網站訪客以及商業網站必備WordPress插件的專家推薦指南。如果您喜歡這篇文章,請訂閱我們的YouTube頻道以獲取WordPress視頻教程。您還可以在推特和Facebook上找到我們。