WordPress中的輕鬆搜索自動建議 - 教程
已發表: 2022-04-10在 WordPress 中創建帶有自動建議功能的搜索欄非常簡單、快速且免費。 這是我們關於如何做到這一點的教程。
為什麼還要花時間將自動搜索添加到 WordPress？ 首先，您將節省時間。 您的博客訪問者會更喜歡它，因為它可以讓他們在您的網站上輕鬆訪問他們所尋求的信息，從而使他們的生活更輕鬆。 谷歌和其他面向信息的搜索工具使用這種類型的功能是有原因的。
注意：WordPress 中的自動搜索有時也稱為“實時 ajax 搜索”。 此外，由於 WooCommerce 使用與 WP 相同的數據庫，並且產品只是一種自定義帖子類型，因此本教程也適用於流行的電子商務插件。
你需要什麼
你需要一個代碼片段管理器、複製和粘貼的能力，以及實時搜索插件（在 repo 上免費）。
我們應該注意以下幾點：任何使用<?php get_search_form() ?>的表單都將自動使用此解決方案，並且不需要接下來的兩個步驟。 如果您選擇該路線，請跳至本節。
但是，許多主題、頁面構建器和其他工具並非如此。 Elementor 和 Oxygen 不使用 WordPress 提供的這種內置形式（因此他們的用戶可以輕鬆地根據大小、字體和顏色設置它們的樣式）。 因此，要在 Elementor、Oxygen、大多數其他頁面構建器和許多主題上獲得具有自動完成功能的搜索欄，請按照下面概述的步驟操作。
即使您通過 PHP 添加它，如上圖所示，沒有任何 CSS，您也會留下一個沒有樣式的搜索表單。 但是 - 如果您可以訪問您的主題文件/模板，這是在您的網站上獲取搜索表單的可行方式。 這將使用標準的 WordPress 標記，因此您可以調整下面的 CSS。
我們更喜歡以下方法，因為您可以編輯樣式和類，添加特殊元素，將用戶發送到自定義搜索端點等等 - 您正在從頭開始構建這個東西。
PHP的
首先，讓我們構建這個搜索表單。 您可以添加其他輸入、CSS 類、佔位符等。 如果您保持原樣，相關的 CSS 將與 HTML 一起工作。 根據您創建網站的方式，您可以簡單地將其粘貼到您希望自動完成搜索欄結束的模板的實際結構中，或者轉到路線 2。
Route 2 可能是大多數網站所有者會使用的。 我們將不使用原始 HTML 和 PHP，而是將其轉換為短代碼，使其與 WordPress 更加兼容。 這樣，您可以將其粘貼到 Gutenberg、您想要的任何頁面構建器等等。 有幾種方法可以做到這一點； 我們將詳細介紹一種簡單但付費的方法，以及一種更困難但更容易的方法。
付費方式（簡單）
選擇 Scripts Orginizer，這是一個高級 WordPress 插件，可以輕鬆管理 WordPress 網站上的代碼（評論）。 安裝後，轉到側邊欄管理菜單中的 Scripts Organizer -> Import。
下載這個文件（下面提到的所有內容的導出），導入它，然後跳到獲取簡碼。
進入自定義 CSS 部分後，跳到 SCORG 部分部分，下載該 JSON，導入，安裝實時搜索插件，然後啟動並運行。
您也可以按照手動步驟操作。 首先，創建一個新條目：
現在，執行以下操作：
- 給它一個標題
- 啟用代碼塊開關：開
- 腳本位置：簡碼
- 從上面複製/粘貼 PHP/HTML 代碼。
- 保持所有其他設置默認，然後單擊發布
完成後它應該看起來像這樣️。
獲取將顯示在代碼編輯器左下角的腳本條目中或代碼片段列表頁面上的短代碼：
使用 Gutenberg、TINYMCE、Elementor Shortcode Widget 或任何其他特定於簡碼的方法將此簡碼插入到任何地方。
古騰堡簡碼元素 
Elementor 短代碼小部件
現在轉到第二步，將 CSS 添加到您的站點。
自由之路（稍難）
安裝免費的代碼片段插件。 下載以下代碼片段，並將其導入您的網站：
該文件還可以導入到 Advanced Scripts（本質上是高級、更簡單的代碼片段版本），甚至是 Scripts Organizer。
然後，在前端使用以下短代碼添加搜索：
無論您如何添加搜索，如果您使用本節中的底層 HTML 和 PHP，下一節中的 CSS 將賦予它一個不錯的樣式。
CSS
如果您保持結構和類不變，只需將此自定義 CSS 添加到您的網站，即可獲得具有自動完成功能的樣式良好的搜索表單。
注意：此代碼與插入搜索欄的<?php get_search_form() ?>方法不兼容。 但是，根據您的主題，以這種方式插入搜索表單意味著它將繼承您的主題的樣式。
您可以通過外觀 -> 自定義 -> 附加 CSS 或使用 SCORG 將此 CSS 添加到頁面構建器實用程序中。
我們建議SCORG。 添加一個新的 CSS 部分，粘貼代碼並發布它（或導入此文件）。 導航到在上一步中創建的短代碼片段，轉到“SCSS Partials Manager”部分並選擇show ，搜索該部分的標題並選擇它。 更新它。 現在，無論您放置短代碼，CSS 都會加載。 它只會加載短代碼所在的位置，而不是global ，這對性能很有好處。
現在，我們需要的只是魔法醬。
魔術醬（SearchWP Live Ajax 搜索）
這是 SearchWP 插件套件背後的團隊製作的令人難以置信的插件。 它是免費的，位於 WordPress 存儲庫中。 我們可以安裝它並在一分鐘內啟動並運行實時搜索，而不是複雜的代碼結構。
安裝後，單擊您插入的帶有簡碼、原始代碼或使用本機 WordPress PHP 插入的搜索表單，您應該會看到以下行為：
就是這樣，你完成了！ 享受 WordPress 網站上的搜索表單，該表單將使用 AJAX 技術自動完成用戶搜索。
在 WordPress 中展開此實時搜索
SearchWP Live Ajax Search 是一個免費的插件，它允許你做顧名思義：添加 Live Ajax Search。 無論是否使用 SearchWP 和相關擴展的高級集合，它都可以使用。 如果您不使用 SearchWP，它將使用標準的 WP 搜索引擎。
標準的 WordPress 搜索按相關性排序（在過去，它沒有 - 瘋狂！）通過查看帖子的標題，然後查看內容。 但這仍然是 Elementor，並且有更好的選擇。 事實上，我們寫了另一篇文章討論更好的選擇，你可以在這裡閱讀：更好的 WordPress 搜索解決方案
但是，由於 Live Search 是由 Search WP 製作的，因此如果安裝，它將自動使用該引擎。 Search WP 非常出色，因為它包括關鍵字詞幹提取、更準確的匹配、文檔索引、對 WooCommerce 的支持、算法定制等。 我們強烈建議您構建實時搜索並使用高級插件的其他功能來提供更好的搜索結果。
如果您正在尋找 SearchWP 的替代品，Ivory Search 是一個提供類似功能的低成本插件，並且是一個 LTD！ 這個 Live Search (WP Search Autocomplete) 插件應該可以與 Ivory Search 一起使用。 您也可以使用其他搜索引擎； 根據文檔，您需要做的就是：
將以下屬性添加到表單
上市常見問題input：data-swpengine="supplemental"將 'supplemental' 替換為您想要的搜索引擎名稱。
使用氧氣更容易
我們喜歡 Oxygen Builder 已經不是什麼秘密了，所以這裡有一種更簡單的方法來使用該工具添加 AJAX 實時搜索（自動完成）。
注意：本教程和插件不適用於 Oxygen 搜索表單小部件，因為如上一節所述，它不使用插入搜索表單的標準 PHP 方法，也不包含所需的數據屬性。
簡單的步驟：
- 在您想要搜索表單的任何位置添加代碼塊，粘貼在下面找到的 PHP 中（或粘貼到 Hydrogen 短代碼中，這將自動生成代碼塊）..
- 將下面找到的 CSS 添加到 Oxygen Global CSS，根據需要進行更改（主要是顏色）。
- 安裝並激活 Live Search 插件，在此處的 repo 上免費。
- 沉浸在實時搜索的榮耀中。
因為我們可以使用 Page Builder 將 PHP 直接放置在模板和頁面中，所以我們可以簡單地將以下 PHP 粘貼到代碼塊中，通過全局設置添加 CSS，然後就可以結束了（確保您已添加實時搜索插件，可在此處找到）。
您還可以復制/粘貼以下氫氣簡碼（如果您有氫氣包（在此處查看））。
只需單擊複製，安裝 Hydrogen，然後粘貼到您的頁面中。 CSS 將包含在代碼塊中。
最後，使用 CSS（取自上面）：
我們建議通過 Oxygen 的 Global CSS 插入這個 CSS。
最終結果如下所示：
如果你想重用這部分，你也可以簡單地把它變成一個可重用的部分。 只要您安裝了實時搜索插件，您就應該為訪問者提供一個不錯的 AJAX 搜索欄。
<?php get_search_form() ?>
或者，如果您不需要高級定制（包括但不限於比 WP 的核心搜索更好的搜索解決方案），只需使用上面的代碼即可。 當然，因為我們可以在此頁面構建器中使用短代碼，所以您也可以按照本教程的上半部分來指導您創建用於網站前端的短代碼。
結論
在 2022 年，為您的用戶提供出色的體驗以及他們訪問所需內容所需的工具比以往任何時候都更加重要。 本文介紹了在 15 分鐘內在網站上安裝 WordPress 實時 Ajax 搜索的幾種方法。
這裡列出了多種方法，因此您可以選擇在主題模板文件上使用它，生成與頁面構建器兼容的短代碼，並合併更多方法。 用於實現實時搜索功能的插件完全免費且設計精良。
任何問題？ 隨時將它們留在下面的評論部分。