如何在沒有插件的情況下添加 WordPress Ajax 搜索？

搜索功能是任何網站的重要組成部分，它允許訪問者快速找到他們正在尋找的信息。 雖然 WordPress 提供了內置的搜索功能，但它可能並不總能滿足所有用戶的需求。 將 Ajax 搜索添加到您的 WordPress 站點可以通過提供實時搜索結果而無需刷新頁面來顯著增強用戶體驗。

雖然許多插件可用於添加 WordPress Ajax 搜索功能，但它們通常會降低您的網站速度，並且可能無法提供您需要的定制級別。 在本文中，我們將引導您完成有關如何在沒有插件的情況下添加 WordPress Ajax 搜索的指南。 在文章的最後，我們還向您展示了另一種將實時搜索添加到 WordPress 的簡單方法。 按照我們的分步流程，您將能夠自定義搜索功能以滿足您的需求，並為您的訪問者提供更好的用戶體驗。

什麼是 WordPress Ajax 搜索？

Ajax 搜索是一種搜索功能，它使用 Ajax（異步 JavaScript 和 XML）技術提供實時搜索結果，而無需刷新頁面。 Ajax 允許在用戶繼續與頁面交互時在後台將搜索查詢發送到服務器。 然後將搜索結果動態加載到頁面中，從而提供更無縫、更快速的用戶體驗。

在 WordPress 的上下文中，Ajax 搜索可用於改進內置搜索功能或將其完全替換為更強大和可自定義的搜索功能。 通過 Ajax 搜索，用戶可以在輸入查詢時立即獲得結果，從而更輕鬆、更快速地找到他們正在尋找的內容。 這對於包含大量內容或產品的網站尤其有用，在這些網站上，傳統搜索功能可能需要更長的時間來加載或返回不相關的結果。

為什麼要將實時 Ajax 搜索添加到您的 WordPress 網站？

以下是您應該將實時 Ajax 搜索添加到您的 WordPress 網站的一些主要原因。

• 改善用戶體驗：Ajax 搜索提供實時搜索結果，無需刷新頁面，使用戶更快、更高效地找到所需信息。
• 降低跳出率：如果用戶無法快速找到他們正在尋找的內容，他們可能會離開您的網站。 Ajax 搜索可以通過立即提供相關結果來幫助防止這種情況發生，從而減少用戶從您的網站跳出的可能性。
• 可自定義：使用 Ajax 搜索，您可以自定義搜索功能以滿足您的特定要求，包括添加過濾器或調整搜索結果排名。
• 更準確的搜索結果：可以設置 Ajax 搜索以通過包含附加搜索條件或使用模糊搜索算法來提供更準確的搜索結果。
• 增強站點搜索功能：雖然 WordPress 提供了內置搜索功能，但它可能並不總能滿足所有用戶的需求。 添加 Ajax 搜索可以改進站點的搜索功能並提供更好的用戶體驗。

如何在沒有插件的情況下添加 WordPress Ajax 搜索？

使用代碼向您的 WordPress 網站添加實時 Ajax 搜索的優缺點

如果您考慮使用代碼將實時 Ajax 搜索添加到您的 WordPress 站點，請仔細查看以下優缺點。

優點：

• 自定義：當您使用代碼將實時 Ajax 搜索添加到您的 WordPress 站點時，您可以完全控制搜索功能的功能和設計。 您可以對其進行自定義以滿足您的特定需求和偏好。
• 速度：基於代碼的 Ajax 搜索比使用插件更快，因為插件代碼沒有額外的開銷。
• 無依賴性：通過不依賴插件，您可以消除與其他插件的潛在衝突或與未來 WordPress 更新的兼容性問題。
• 學習機會：編寫代碼以在您的 WordPress 站點上實現 Ajax 搜索是了解更多有關 Web 開發和 Ajax 工作原理的絕好機會。

缺點：

• 所需技術知識：使用代碼實現 Ajax 搜索需要一定的 Web 開發和 WordPress 技術知識。
• 耗時：編寫代碼以添加 Ajax 搜索可能非常耗時，尤其是在您不熟悉流程或需要調試任何錯誤的情況下。
• 錯誤風險：如果代碼未正確編寫或測試，可能會導致您的網站出現錯誤或安全漏洞。
• 有限支持：使用代碼時，您必須維護和更新搜索功能，這可能需要額外的時間和資源。

總之，使用代碼將實時 Ajax 搜索添加到您的 WordPress 站點可提供出色的自定義和控制。 儘管如此，它仍然需要技術知識和時間來實施和維護。 對於那些想更多地了解 Web 開發並願意投入必要的時間和資源的人來​​說，這可能是一個不錯的選擇。

使用代碼將 Ajax 搜索添加到您的 WordPress 站點時要注意什麼？

在沒有插件的情況下將實時 Ajax 搜索添加到您的 WordPress 網站時，請記住以下幾點：

備份您的網站：在對您的網站進行任何更改之前，創建網站備份非常重要，以防出現問題。

代碼定制：添加 Ajax 搜索功能需要一些編碼知識，因此一定要對 HTML、CSS、JavaScript 和 PHP 有基本的了解。

徹底測試：確保在實施代碼後徹底測試搜索功能，以確保其正常工作並提供預期結果。

未來更新：請記住，對主題或 WordPress 核心文件的任何更新都可能影響自定義 Ajax 搜索的功能。 請務必定期檢查和更新代碼，以確保與任何更新的兼容性。

主題兼容性：添加 Ajax 搜索的代碼可能因您的主題而異。 請務必先在暫存站點上測試代碼，以確保它適用於您的特定主題。 因此，在開始添加不帶插件的 WordPress Ajax 搜索之前，您需要為您在網站上使用的當前主題創建一個子主題，並在您的網站上激活它。

使用代碼手動將實時 Ajax 搜索添加到您的 WordPress 站點

按照下面的詳細過程將實時 Ajax 搜索添加到您的 WordPress 站點。

• 第 1 步：訪問主題文件編輯器

從您的 WordPress 儀表板，轉到外觀 > 主題文件編輯器

• 第二步：複製WordPress中顯示Ajax搜索的主要代碼

複製下面的代碼。 在帖子查詢中，您可以根據需要自定義 HTML。 此代碼將與 HTML 交互，以幫助您創建無需插件的 WP Ajax 搜索。

 } // the ajax function add_action ( 'wp_ajax_data_fetch' , 'data_fetch' ); add_action ( 'wp_ajax_nopriv_data_fetch' , 'data_fetch' ); function data_fetch () { $the_query = new WP_Query ( array ( 'posts_per_page' => - 1 , 's' => esc_attr ( $_POST [ 'keyword' ] ), 'post_type' => array ( 'page' , 'post' ) ) ); if ( $the_query -> have_posts () ) : echo '<ul>' ; while ( $the_query -> have_posts () ): $the_query -> the_post (); ?> <li><a href= "<?php echo esc_url( post_permalink() ); ?>" > <?php the_title (); ?> </a></li> <?php endwhile ; echo '</ul>' ; wp_reset_postdata (); endif ; die (); }

• 第 3 步：將 Ajax 搜索代碼添加到 functions.php 主題文件中。

在代碼編輯頁面上，從右側菜單導航到functions.php 。 並將您複製的代碼粘貼到代碼編輯器區域。

• 第 4 步：保存更改

不要忘記單擊底部頁面上的“更新文件”按鈕。

就是這樣。 您已經在沒有插件的情況下向 WordPress 引入了實時 Ajax 搜索。

它將為您的訪問者提供即時搜索結果並提高綜合瀏覽量。

如果您覺得它很複雜並希望嘗試另一種方法，讓我們下載並安裝 Woostify 主題並使用 Woostify 的 Ajax Product Search 插件來完成。

如何使用 Woostify 的 Ajax 搜索插件將實時 Ajax 搜索添加到您的站點？

這就是在沒有插件的情況下添加 WordPress Ajax 搜索的方法。 如果您發現很難向您的 WordPress 網站添加自定義代碼，並且不想安裝第三方插件以避免降低您的網站速度，您可以使用 Woostify 主題。

如您所知，要經營在線商店，您需要一個 WooCommerce 主題。 與其使用沒有促銷功能的簡單 WordPress WooCommerce 主題，不如選擇 Woostify。 Woostify WooCommerce 高級主題為您提供多種有用的功能來運行和開發您的電子商務網站。 Woostify 主題還為您提供了 Ajax Product Search 插件，無需安裝外部插件即可更輕鬆地添加 WordPress Ajax 搜索。

立即安裝 Woostify Pro

使用 Woostify 的 Ajax 搜索插件將實時 Ajax 搜索添加到您的 WordPress 網站的優缺點

Woostify 的 Ajax 搜索插件是一個插件，它使用 Woostify 主題向 WooCommerce 商店添加 Ajax 搜索功能。 該插件使用 Ajax 技術提供實時搜索結果，無需刷新頁面，使用戶能夠更快、更高效地找到所需的產品。

這個 Ajax 搜索插件旨在與 Woostify 主題和 WooCommerce 插件無縫協作，提供高級搜索功能，例如產品圖像顯示、自動建議以及按產品 SKU、類別或標籤進行搜索的能力。 該插件還包括自定義搜索欄佈局、顏色和字體以匹配您網站設計的選項。

使用 Ajax 搜索插件可以增強 WooCommerce 商店的搜索功能，改善用戶體驗，並通過使客戶更容易查找和購買產品來潛在地增加銷售額。 該插件作為 Woostify Pro 軟件包的一部分提供，其中包括額外的高級功能和支持。

這種方法的唯一缺點是您需要購買 Woostify 主題專業版，1 個站點每年的費用為 49 美元起。 當然，如果您使用 Woostify 主題，則您的 WordPress 站點上不需要任何其他主題。 而這個主題最適合實體網店。

使用 Woostify 的 Ajax 搜索插件將實時 Ajax 搜索添加到您的 WordPress 站點的詳細過程

這是將實時 Ajax 搜索添加到您的 WordPress 網站的最簡單方法，尤其是對於 WooCommerce 網站。

要使用 Woostify 的 Ajax 搜索插件在 WooCommerce 網站上實施 WordPress Ajax 搜索，您應該按照以下步驟操作。

• 第 1 步：啟用 Woostify 的 Ajax 搜索插件

假設您已經在 WooCommerce 網站上安裝了 Woostify theme pro。 所以第一步是啟用 Woostify 的 Ajax 產品搜索插件。 從您的 WordPress 儀表板，轉到Woostify 。

然後，從頂部菜單導航到“附加組件”選項卡。 之後，您將在此處看到一張 Woostify 高級附加組件表。

移動鼠標找到Ajax Product Search插件，然後打開啟用按鈕，使其變為綠燈，如下所示。

• 第 2 步：在您的 WooCommerce 網站上設置 Ajax 搜索。

要訪問 Ajax Product Search 插件的設置頁面，您應該點擊方框一角的設置圖標，如下所示：

現在您已到達設置頁面，可以設置 Ajax Product Search 插件。

如您所見，在此部分中，您可以使用以下元素進行設置。

– 過濾器：如果要顯示類別過濾器，請選中此選項。

– 搜索類別：如果您希望按類別顯示搜索，請選中此選項。

– 搜索標籤：如果您要在標籤中顯示搜索，請選中此框。

– 搜索屬性：如果您希望在產品屬性中顯示搜索，請勾選此框。

– 在自定義字段中搜索：在此部分中，您可以選擇要添加到搜索範圍的自定義字段。

– 缺貨產品：如果您想刪除搜索結果中的缺貨產品，請選中此選項。

– 限制結果：輸入“-1”以顯示所有搜索結果

–搜索方式：在此部分，您可以選擇按產品標題/產品 SKU/產品描述/或產品簡短描述進行搜索。 但是，我們建議您應該選擇所有這些，以確保您的客戶可以輕鬆地找到他們所想的任何商店中的產品。

– 突出顯示顏色：您可以自定義搜索結果中文本的顏色。

– 索引數據：選中此框可讓 Ajax 搜索插件為您的 WooCommerce 網站中的所有數據編制索引。

– 上次更新：這顯示了設置的最新更新。

– 總產品指數：這顯示了被索引的產品總數。

• 第 3 步：保存和預覽

在最後一步中，記得點擊保存按鈕並訪問您前面的商店以檢查您的 ajax 搜索是否正常工作。

最後的話，

在沒有插件的情況下將實時 Ajax 搜索添加到您的 WordPress 站點是增強用戶體驗並使訪問者更容易免費找到他們正在尋找的內容的好方法。 雖然它確實需要一些編碼知識，但自定義 Ajax 搜索的好處可能非常顯著。 請記住備份您的網站，徹底測試，並在您的主題或 WordPress 核心文件的任何未來更新中更新您的代碼。

或者，如果您不喜歡編碼，您可以選擇 Woostify 高級主題來設計您的網站，尤其是電子商務網站。 使用 Woostify 的 Ajax Product Search 插件，您可以使添加實時 Ajax 搜索的過程變得更加簡單，但可以事半功倍地獲得更好的結果。

如果您對如何在不使用插件的情況下添加 WordPress Ajax 搜索有任何疑問或建議，請在下方發表評論讓我們知道。