如何在 WordPress 中構建自己的自定義搜索表單（3 種方式）

想要在 WordPress 中輕鬆創建自定義搜索表單而無需任何編碼？

自定義搜索表單使訪問者只需單擊幾下即可輕鬆搜索和過濾您的網站內容。

當用戶快速找到他們正在尋找的內容時，他們更有可能在您的網站上停留更長時間。 他們也更有可能採取行動購買產品、閱讀您的博客、註冊新聞通訊等。

在這篇文章中，我們將向您展示如何在 WordPress 中輕鬆創建自定義搜索表單，以增強用戶體驗並提高轉化率。

在此之前，讓我們看看您是否真的需要為您的網站創建自定義搜索表單。

為什麼要創建自定義搜索表單？

自定義搜索表單非常適合具有大量內容、產品、文檔和常見問題解答的網站。 這是電子商務商店、在線商業目錄、學校/學院網站和類似網站的必備功能。

搜索選項將幫助用戶找到他們需要的東西，而無需花費幾分鐘甚至幾個小時來尋找它。

因此，這就是您應該為您的 WordPress 網站創建自定義搜索表單的原因：

• 幫助用戶瀏覽您的內容
• 通過更快地查找內容來節省時間
• 促進轉化和銷售
• 針對移動用戶優化您的網站
• 降低跳出率

現在，我們將向您展示如何使用表單構建器插件在 WordPress 中創建自定義搜索表單。

如何在 WordPress 中創建自定義搜索表單

您可以使用的第一種方法是 WordPress.org 提供的默認搜索選項。 您可以啟用基本的 WordPress 搜索，讓您搜索網站上的頁面和帖子。

這個方法雖然有點複雜。 它涉及對高度敏感的functions.php等文件進行編碼和編輯。 一個錯誤的步驟，您可能會破壞您的網站。

您需要使用“ get_search_form() ”函數在您的站點上顯示搜索表單。 這將幫助您在 WordPress 主題中找到 searchform.php 文件。 如果找不到，則將使用 WordPress 默認的核心搜索選項。

但是，要自定義 WordPress 搜索框，您需要在文件中添加更多代碼。

如果您對編碼不滿意，最好使用可靠的 WordPress 搜索插件來啟用站點搜索。 這正是我們將為本教程做的事情。

您會在市場上找到幾個可讓您自定義 WordPress 搜索表單的插件。

確保您選擇的 WordPress 插件不僅可以讓您創建自定義搜索，還可以添加過濾器並向訪問者顯示正確的結果。

我們建議使用 SearchWP，它是 WordPress 的排名第一的搜索插件，可讓您搜索網站上的所有內容。 您還可以使用強大的表單來創建自定義搜索表單。 下面，我們將向您展示如何使用這 2 個插件創建自定義搜索表單。

使用 SearchWP 創建自定義搜索表單

SearchWP 是 WordPress 最好的自定義搜索插件。 它易於使用，顯示準確的結果，並讓您可以控制您的搜索表單。

SearchWP 真的很棒並且具有令人難以置信的高級功能，因此，它是一個高級插件。 您可以註冊一個起價為每年 99 美元的計劃。 儘管您不會失望，但我們提供 14 天退款保證。

這將允許您啟用對所有內容的搜索。 在您的站點上搜索您的產品詳細信息、自定義字段內容、簡碼輸出、自定義數據庫表格內容、跨站點多站點搜索等。

您將可以使用以下功能：

• PDF 和 Office 文檔索引
• 與 Native WP Search 自動集成，無需編碼！
• 多個搜索引擎
• 關鍵字詞幹
• 高級自定義字段支持
• WooCommerce 集成
• 排除或屬性結果
• 搜索統計和見解
• 簡單的算法定制

該插件還與 bbPress、WP Job Manager、Easy Digital Downloads 等集成。 此外，您還將獲得承諾的支持和詳細的文檔。

我們提到的一切都只是基本計劃，所以這個插件完全物有所值，每月只需 8.25 美元。 您將在高端計劃中獲得更多功能。

註冊帳戶後，您可以開始使用下面的教程。

第 1 步：激活 SearchWP

在您的 SearchWP 帳戶中，您可以訪問您的許可證密鑰、帳戶詳細信息和下載。 您需要下載插件文件。 而且您還需要復制您的許可證密鑰，因為您稍後會需要它。

然後，轉到您的 wp-admin 面板並導航到插件»添加新»上傳插件。

選擇您下載到計算機的插件文件，然後單擊立即安裝按鈕。

安裝並激活它後，您需要訪問設置 » SearchWP頁面，然後單擊“許可證”菜單選項。

從您的 SearchWP 帳戶中獲取您的許可證密鑰並將其粘貼到此處的許可證框中。

單擊激活按鈕，您就可以設置搜索引擎了。

第 2 步：自定義搜索引擎

在 wp-admin 面板的 SearchWP 選項卡中，選擇“引擎”菜單選項。 進入後，單擊“添加新”按鈕以創建新的搜索引擎。

這將創建一個名為“補充”的新搜索引擎。 要更改名稱，您需要單擊“來源和設置”按鈕。

現在，您將看到一個選項來選擇是否搜索帖子、頁面、媒體文件、評論和用戶。 推薦的設置已添加到此處，因此您可以保持原樣。

為了稍後識別搜索引擎，讓我們在“引擎標籤”字段下將其命名為“自定義”。

在這裡，您可以看到“關鍵字詞幹”選項已被選中。 這將在您的用戶進行搜索時忽略詞尾，以便顯示最相關的搜索結果。

當您在這裡準備好時，點擊“完成”按鈕來存儲您的更改。

現在回到引擎頁面，您可以在每個子標題下看到一個名為“Applicable Attribute Relevance”的部分。 這使您可以優先考慮不同的帖子屬性，或者在搜索結果頁面中僅包含某些類別或標籤。

您所要做的就是使用滑塊來調整“屬性相關性”。

這將影響搜索引擎如何評估和排名您網站上的內容。 因此，例如，如果您希望 Google 更關注帖子標題而不是內容，您可以在這裡賦予標題更​​多的重要性。

接下來，SearchWP 讓您可以控制搜索結果中是否包含或排除某些內容。 為此，您可以創建規則。

這可能是為了讓客戶快速找到他們正在瀏覽的同一類別的產品。 或者允許訪問者搜索與他們剛剛閱讀的主題相同的內容。

要設置規則，每個部分都有一個“編輯規則”按鈕。

單擊此按鈕時，您將看到一個彈出窗口，其中包含類別、標籤、格式、發布日期和帖子 ID 的設置。

您可以在此處隨意創建規則來控制搜索引擎的行為方式。

完成後，請確保單擊頁面頂部的“保存引擎”按鈕以創建您的自定義搜索引擎。

現在您已經成功設置了 WordPress 搜索引擎。 它已準備好添加到您的網站。

第 3 步：使用簡碼添加搜索表單

通常將搜索引擎添加到您的網站需要大量編碼，但 SearchWP 已將其保持在最低限度。 您只需要粘貼一個短代碼即可嵌入您的搜索引擎，這非常簡單，即使您是初學者也很容易。

只需訪問 SearchWP Shortcodes Extension，然後單擊“下載擴展”按鈕。

之後，您需要在您的 WordPress 網站上安裝並激活擴展，就像您安裝上面的插件一樣。

激活後，您將能夠在您的帖子、頁面和小部件中添加一個簡單的短代碼。

您需要做的就是在塊編輯器中編輯帖子並添加一個名為“自定義 HTML”的新塊。

在塊內，您可以復制並粘貼此短代碼：

 [searchwp_search_form engine="custom" var="searchvar" button_text="Custom Search"] <div class="search-results-wrapper"> [searchwp_search_results engine="custom" var="searchvar" posts_per_page=4] <h2>[searchwp_search_result_link direct="true"]</h2> [searchwp_search_result_excerpt] [/searchwp_search_results] </div> <div class="no-search-results-found"> [searchwp_search_results_none] No results found, please search again. [/searchwp_search_results_none] </div> <div class="search-results-pagination"> [searchwp_search_results_pagination direction="prev" link_text="Previous" var="searchvar" engine="custom"] [searchwp_search_results_pagination direction="next" link_text="Next" var="searchvar" engine="custom"] </div>

我們將引擎命名為“custom”，如果您選擇了不同的名稱，則需要在此代碼片段內的四個位置將engine=“custom”更改為您自己的引擎名稱。

在此代碼中，按鈕文本將顯示為“自定義搜索”。 如果您想將搜索按鈕的文本更改為更具創意的內容，您可以在第一行進行修改button_text=“Custom Search” 。

此代碼會將自定義搜索引擎添加到您的 WordPress 帖子中。 它還將創建一個部分來顯示搜索結果，必要時顯示無結果消息，並在結果進入多個頁面時添加分頁。

您可以預覽帖子，您會看到搜索引擎出現。 您會在帖子中看到一個搜索字段以及 CTA 按鈕。

然後發布或更新它並使自定義搜索表單生效。 如果您需要這方面的幫助，請按照我們關於如何在 WordPress 中添加短代碼的簡單指南進行操作。

您可以通過輸入一些搜索詞來測試您的自定義表單，以查看該工具返回的結果。

這樣，您就學會瞭如何將搜索欄添加到您的 WordPress 網站。 SearchWP 是一個高級搜索插件，它的更多功能值得探索。 接下來，我們將向您展示如何增強您網站的搜索功能。

第 4 步：配置高級設置

我們希望介紹 2 個高級選項來改進您的自定義 WordPress 搜索表單。

• 添加 Live Ajax 搜索：這會在用戶鍵入時自動添加下拉搜索結果。 它可以幫助用戶更快地找到他們的查詢。 SearchWP 為此在 WordPress 存儲庫中提供了一個免費的 Live Ajax Lite Search 插件。
• 使用 SearchWP 的高級設置：在 WordPress 菜單的設置 » SearchWP選項卡下，有一個高級選項卡。 在此頁面上，您可以啟用使用戶更容易找到所需內容的設置。

這使您可以完全控制搜索引擎的工作方式。 接下來，我們將向您展示如何自定義搜索引擎的外觀。

第 5 步：設置搜索表單和結果頁面的樣式

如果您對新搜索欄的顯示方式不滿意，可以進行更改。

您需要知道的是，您網站的主題控制著您的主頁、標題、側邊欄、帖子、搜索表單和搜索結果的外觀。 WordPress 主題的格式和样式存儲在 CSS 樣式表中。

您只需添加自己的自定義 CSS 即可更改搜索欄和結果頁面的外觀。

如果您以前沒有這樣做過，我們建議您備份您的網站。 如果事情沒有按計劃進行，能夠恢復您的網站非常重要。 然後，您可以使用暫存站點（您的網站的克隆）先進行嘗試。

以下是適用於大多數 WordPress 主題的自定義 CSS 片段。 第一部分更改默認搜索表單的樣式，第二部分自定義搜索結果。

您可以復制粘貼以下代碼來設置站點搜索功能的樣式：

 .searchform { font-family:arial; font-size:16px; background:#ace5e3; color:#ffffff; border:1px solid #61c3c0; padding:10px; height:90px; width:600px; } .search-results { font-family:arial; font-size:16px; background:#ace5e3; color:#000000; border:1px solid #61c3c0; padding:10px; width:600px; }

想了解更多？ WPBeginner 有最好的指南：如何輕鬆地將自定義 CSS 添加到您的 WordPress 網站。

這裡的所有都是它的！ 您已經使用 SearchWP 創建了一個完全可自定義的搜索表單。

接下來，我們將向您展示另一種創建自定義 WordPress 搜索表單的方法。

使用強大的表單創建自定義搜索表單

Formidable Forms 是唯一具有完全集成視圖功能的 WordPress 表單構建器插件。 因此，您不僅可以收集表單數據，還可以將它們顯示在您網站的前端。

使用 Views，您可以輕鬆地創建一個網頁，直接從您的 WordPress 儀表板精美地顯示用戶提交的數據。 您可以使用它來顯示業務目錄、成員目錄、列表等。

您還可以將您的視圖與搜索表單聯繫起來，並允許您網站上的訪問者搜索特定內容。

話雖如此，讓我們開始教程。

第 1 步：安裝並激活強大的表單插件

首先，您需要註冊一個強大的表單帳戶。 確保您獲得包含“視圖”功能的計劃。

註冊後，前往您的 WordPress 管理儀表板並打開插件»添加新選項卡。 搜索強大的表單插件，然後單擊那裡的安裝按鈕。

如果您在這方面需要更多幫助，可以閱讀我們關於如何安裝 WordPress 插件的指南。

安裝並激活插件後，您將看到一個歡迎頁面。 單擊連接帳戶按鈕以連接到您的帳戶並訪問所有高級功能。

如果您尚未登錄 Formidable Forms 帳戶，則需要再次登錄。

接下來，您需要在您的站點上安裝Formidable Forms Pro和Visual Views插件。

您可以直接從 WordPress 儀表板上的強大選項卡安裝它們，或從您的帳戶下載插件文件。

現在，您已準備好使用強大的表單在 WordPress 中創建自定義搜索表單。

第 2 步：為您的搜索表單添加數據

在創建搜索表單之前，您需要為搜索結果收集數據。

要創建一個新表單，請導航到強大»表單，然後單擊+ 添加新按鈕。

您將看到一個彈出窗口，您可以在其中為表單選擇模板。 我們將使用本教程的空白表單模板。

然後，您需要為表單添加名稱和描述。

完成命名表單後，單擊此處的創建按鈕以啟動拖放表單構建器。

在表單構建器中，您可以在頁面左側看到表單字段，在頁面右側看到表單預覽。

要插入任何表單字段，您只需將它們從字段菜單拖放到表單預覽中即可。

在這裡，我們添加了這些字段：名字、姓氏、電子郵件和國家。 您可以根據需要添加任何字段。

要自定義任何字段，您只需單擊它即可看到表單設置。 有許多選項，例如標籤、必需選項、自定義 CSS 等等。

您甚至可以使用條件邏輯選項根據用戶輸入顯示或隱藏表單字段。

添加完字段後，單擊表單構建器右上角的更新按鈕。

現在您需要做的就是在您的網站上發布此表單，以從您的用戶或網站成員那裡收集數據。

或者，您也可以從計算機導入數據文件。 為此，打開構建器頂部的條目選項卡，然後單擊導入按鈕。

然後，您會看到一個窗口，您可以在其中上傳任何 CSV 或 XML 文件以將數據導入表單。 您可以將字段映射到文件中的數據以導入記錄。

收集數據後，您需要在 WordPress 中創建自定義搜索表單，讓用戶在您的網站上進行搜索。

第 3 步：構建您的自定義搜索表單

要創建搜索表單，您需要按照步驟 2 中的相同說明進行操作。

轉到強大»表單»添加新並選擇一個空白模板。 然後，為您的自定義搜索表單命名和描述。

在此表單中，我們將添加 3 個表單字段，以讓用戶搜索您網站上的數據。 這些字段是名字、姓氏和國家。

您可以將文本表單字段用於名稱，將搜索下拉字段用於國家/地區搜索。

在“名字”字段設置中，您需要添加默認值，以便稍後將您的搜索表單與結果視圖連接起來。

為此，請在字段設置中的默認值選項上添加此短代碼：

[獲取參數=fname]

在這裡，“fname”是我們用於連接視圖的名字字段的文本。

在姓氏字段設置中，我們將添加相同的短代碼：

[獲取參數=lname]

這裡，“lname”是我們用於連接視圖的姓氏字段的文本。

在Country字段設置中，我們需要在下拉選項中添加國家名稱。 確保將第一個選項留空。

如果向下滾動，您可以看到添加佔位符文本的選項。 和其他兩個表單字段一樣，您需要在此處添加一個默認值。 插入短代碼：

[獲取參數=國家]

在這裡，“國家”是我們用於國家/地區字段以連接視圖的文本。

添加完輸入類型後，您可以更改表單字段的佈局。

要使它們顯示在一條水平線上，請轉到每個字段的 CSS Layout Classes 選項並選擇 1/4 選項。

如果要自定義按鈕，請導航到設置»樣式和按鈕選項卡並轉到按鈕設置。

在這裡，您可以將提交按鈕文本更改為Search並將按鈕對齊方式選擇為Inline 。 這將使您的搜索按鈕與表單字段顯示在同一行。

現在您已經了解瞭如何在 WordPress 中創建自定義搜索表單，讓我們在網頁上插入此表單和結果。

第 4 步：創建搜索結果視圖

您需要創建一個視圖以在同一頁面上顯示搜索結果和搜索表單。

要創建新視圖，請打開Formidable » Views頁面，然後單擊+ Add New按鈕。

然後，您可以看到讓您在網格、表格、日曆和經典視圖類型之間進行選擇的彈出窗口。

對於本教程，我們將為搜索表單結果選擇網格視圖。

之後，您可以看到為條目選擇表單並為結果視圖添加名稱的選項。 確保選擇在步驟 2 中創建的數據收集表單。

完成後單擊創建視圖按鈕。

在視圖構建器中，您可以在左側看到樣式選項，在右側看到視圖佈局構建器。 單擊開始添加內容鏈接以添加您的條目。

單擊“ + ”圖標開始將您的列表添加到視圖中。 這將打開列表內容編輯器。

在列表頁面內容編輯器中，您可以從頁面右側的自定義選項中添加表單字段。 只需單擊那裡的表單字段即可將它們插入到您的結果視圖中。

然後，您可以設置字段鍵的樣式以在您想要的佈局中顯示表單字段。

完成後，單擊更新視圖按鈕。 現在您可以在視圖頁面上看到所有條目。

您需要在此頁面上添加搜索表單。 為此，請單擊“在內容前添加”選項

這將打開內容編輯器，您可以在其中插入您在步驟 3 中創建的自定義搜索表單。

您需要做的就是單擊“強大”按鈕並選擇您的搜索表單以插入表單簡碼。

單擊“更新視圖”按鈕以將您的自定義搜索表單添加到視圖。

在下一步中，我們將向您展示如何在您的 WordPress 網站上發布結果視圖。

第 5 步：發布搜索結果視圖

要在您的網站上添加搜索結果視圖，您需要創建一個新頁面並蒐索 Formidable Views 塊。

添加視圖後，您可以在您的站點上發布該頁面。 您的頁面將如下所示。

等待！ 你還沒有完成。 您需要連接您的自定義搜索表單和結果視圖，以讓用戶在您的網站上搜索內容。

第 6 步：將自定義搜索表單與視圖連接

要連接您的搜索表單，請轉到強大»表單並打開搜索表單的設置選項。

在這裡，您可以轉到On Submit選項並選擇 Redirect to URL 選項。 然後，您需要將鏈接添加到您在第 5 步中創建的視圖頁面。

為此，複製頁面 URL 並添加此部分：“?fname[21]&lname=[19]&country=[22]”。

您可以插入字段文本和鍵，以便重定向 URL 如下所示：

http://yoursitename/user-directory/?fname[21]&lname=[19]&country=[22]

請記住為此表單啟用不存儲從此表單提交的條目選項。

現在，您需要向結果視圖添加過濾器，以便用戶可以通過您添加的表單字段搜索列表。

為此，請打開您之前創建的視圖，然後單擊頁面頂部的過濾器選項。

然後，您需要為名字、姓氏和國家/地區添加過濾器，並輸入短代碼作為每個字段的默認值。

您需要做的最後一件事是在左側菜單的No Entries Message選項中插入搜索表單的簡碼。 這將讓用戶在每次搜索後搜索更多內容。

完成設置後不要忘記更新視圖。

測試您的自定義搜索表單

要檢查您的搜索表單是否正常工作，請重新加載您的搜索頁面並使用過濾器搜索列表。

有了它，您就知道了向您的網站添加搜索表單的 3 種方法。 雖然默認的 WordPress 搜索選項是免費的，但如果您不知道自己在使用代碼做什麼，我們不建議您這樣做。 SearchWP 插件是迄今為止我們最喜歡的方法。 它易於使用，並為您的網站添加了一種更高級的搜索功能。

我們希望本文能幫助您借助強大的表單插件在 WordPress 中輕鬆創建自定義搜索表單。

對於您的後續步驟，您可以查看以下資源：

• 如何將自定義預訂表格添加到您的 WordPress 網站
• 最佳表單生成器比較（免費和付費）
• 如何在 WordPress 中使用 PayPal 付款創建註冊表單

這些帖子將幫助您在最好的 WordPress 表單構建器的幫助下為您的 WordPress 網站添加更多功能。