如何在 WordPress 中添加搜索欄（4 種方式）

您想在您的 WordPress 網站上添加搜索欄嗎？

這是一個有用的功能，它允許網站訪問者在幾秒鐘內找到他們正在尋找的內容。

不幸的是，並非每個 WordPress 主題默認都有搜索欄。 如果您是初學者，弄清楚如何添加它可能具有挑戰性。

但別擔心，正如本文中，我們將向您展示如何在沒有任何代碼的情況下向您的 WordPress 網站添加搜索欄。

由於本文包含一組分步指南，介紹了添加搜索欄的幾種方法，因此以下目錄可幫助您導航：

• 添加搜索欄作為小部件
• 手動添加搜索欄
• 添加主題支持的搜索欄
• 如何在 WordPress 菜單中添加搜索欄

讓我們深入了解它！

為什麼要在您的網站上添加搜索欄？

搜索欄不僅可以讓您的網站訪問者更快地找到內容。 它還帶來了許多隱藏的優勢，可以顯著提高您網站的性能。

以下是您需要在網站上設置搜索欄的幾個示例：

• 提高轉化率：人們越容易在您的網站上找到他們想要的產品，他們從您那裡購買的機會就越高。
• 增加內容的可發現性：創建高質量的內容需要努力和大量時間。 搜索欄可讓您最大化您的努力並增加訪問者的參與度。
• 改善用戶體驗：如果訪問者在瀏覽您的網站時玩得很開心，這會讓他們一次又一次地返回。 忠實的觀眾很寶貴，因為他們希望盡可能多地消費您的內容。
• Skyrocket SEO：請放心，以上所有內容都不會逃過 Google 的注意。 這些東西降低了跳出率，這是重要的排名因素之一。 您希望將其保持在盡可能低的位置以獲得更好的排名並吸引更多來自搜索引擎的訪問者。

現在我們知道擁有搜索欄的好處，讓我們將其添加到您的 WordPress 網站。

如何在 WordPress 中添加搜索欄

有幾種方法可以將搜索欄添加到 WordPress 網站。

在本文中，我們將看看最流行的方法，比較它們的優缺點，並幫助您找到最簡單的方法。

添加搜索欄作為小部件

可能最流行的添加搜索欄的方法是將其添加為小部件。 為此，您只需將適當的小部件拖放到您希望它出現的區域。

然而，這種方式有一個明顯的缺點。 問題是，並非每個主題都支持小部件。

即使是這種情況，可用的小部件區域集通常也非常有限。 例如，您可能想在頁眉中添加一個小部件，但您的主題僅在頁腳和側邊欄有小部件區域。

請記住這一點，讓我們看看如何將搜索小部件添加到 WordPress 網站。

1. 轉到小部件選項卡

第一步是打開您的 WordPress 儀表板並導航到外觀下的小部件選項卡。

接下來，您需要決定要將小部件添加到哪個小部件區域。 例如，免費的官方 WordPress Twenty Twenty 主題中只有 2 個區域可用。

2.添加一個新的小部件

要將搜索小部件添加到所需區域，請按左上角的加號按鈕。

找到搜索小部件並將其拖到您希望它出現在您網站上的區域。

這是它的樣子：

不要忘記按右上角的更新按鈕來保存更改。

現在我們需要確保搜索欄實際上開始顯示在我們添加它的頁腳小部件區域中。

3. 查看您網站上的新搜索欄

最快的方法是按左上角站點名稱下的訪問站點按鈕。

如您所見，搜索欄完美運行。

因此，這是向 WordPress 網站添加搜索欄的方法之一。 讓我們繼續討論下面手動執行此操作的下一種方法。

手動添加搜索欄

我們接下來要看的方法是如何通過編輯 WordPress 主題代碼手動添加搜索欄。

這種方法有一個很大的缺點。 您需要精通技術才能知道如何編輯 WordPress 主題代碼。

但是，它並不像看起來那麼難，我們將在下面一步一步地向您展示如何做到這一點。

在手動編輯您的主題代碼之前，您需要記住以下幾點：

• 以下過程完全取決於您使用的特定主題：雖然每個主題都有自己獨特的文件集，但其中大多數都包含諸如 header、footer 和 sidebar.php 之類的典型文件。
• 避免在父主題中進行更改：問題是，一旦更新，您將丟失所有更改。 最好創建一個子主題並為其添加更改。 您可以在此處了解如何創建 WordPress 子主題。

出於本教程的目的，我們將使用二十一二十一主題，因為它是最受歡迎的免費 WordPress 主題之一。 該過程可能會略有不同，具體取決於您的主題。

由於絕大多數網站所有者傾向於在標題中添加搜索框，我們也會這樣做。

例如，讓我們在導航欄旁邊添加一個搜索欄，因為它是最常見的地方。

1.進入主題編輯器

第一步是轉到外觀下的主題編輯器。

在右側面板上，您可以找到可編輯​​主題文件的完整列表。

我們將在標題中添加一個搜索欄，因此單擊header.php文件。

2.添加搜索表單代碼

找到代碼行：

<?php get_template_part( 'template-parts/header/site-header' ); ?>

並在其後添加以下代碼：

<?php get_search_form(); ?>

這是它的樣子：

完成後按底部的更新文件按鈕。

單擊您網站名稱下的訪問站點按鈕以查看結果。

3.查看您新添加的搜索欄

如您所見，導航欄旁邊現在出現了一個搜索欄：

添加主題支持的搜索欄

一些 WordPress 主題支持啟用或禁用搜索欄。

例如，名為 GeneratePress 的流行免費 WordPress 主題之一具有這樣的功能。

通常，您可以在外觀下的自定義選項卡上檢查您的主題是否具有該設置。

下面我們以 GeneratePress 為例來看看如何添加主題支持的搜索欄。

1. 轉到自定義選項卡

第一步是轉到自定義選項卡。

然後，轉到Layout » Primary Navigation 。

啟用導航搜索。

完成後不要忘記按頂部的發布按鈕。

2. 查看您的新搜索欄

讓我們訪問我們的網站並檢查一切是否正常。 現在我們有一個放大鏡圖標，點擊搜索欄出現。

您已經知道向 WordPress 網站添加搜索欄的 3 種最流行的方法。 但是，如果您想在 WordPress 導航菜單中添加搜索欄怎麼辦？

讓我們在下面討論如何做到這一點。

如何在 WordPress 菜單中添加搜索欄

將搜索欄添加到 WordPress 導航菜單的最簡單方法是安裝 SearchWP 模態搜索表單插件。

通過使用它，您只需單擊幾下即可在菜單項旁邊添加一個輕量級的模態搜索表單。

此外，如果您想進一步提高 WordPress 搜索的可能性，請考慮購買高級版 SearchWP。

作為 WordPress 的最佳搜索插件，SearchWP 被全球 30,000 多個網站使用。 它的一些功能包括：

• 自動完成搜索：您是否希望您的搜索欄開始像 Google 一樣猜測訪問者的搜索查詢？ SearchWP 讓您只需點擊幾下即可實現這一目標。
• 實時搜索結果：默認情況下，WordPress 通過打開一個新的單獨頁面來顯示搜索結果。 這需要時間，並且可能會使一些遊客感到困惑。 使用 SearchWP，您可以為訪問者提供實時搜索結果。
• 增強的搜索引擎：原生 WordPress 搜索引擎不考慮自定義字段、文檔內容、簡碼等。 SearchWP 通過為您的訪問者提供全面的搜索結果來解決這個問題。
• 現場搜索活動洞察：使用 SearchWP，您可以查看您的網站訪問者正在搜索的內容。 它開闢了廣泛的機會，讓您獲得新的內容創意。
• WooCommerce 集成： SearchWP 支持索引自定義字段，使 WooCommerce 產品屬性、標籤和評論可搜索。

您可以在此處獲取 SearchWP 的高級版本。

現在，讓我們通過幾個簡單的步驟將搜索欄添加到 WordPress 導航菜單。

第 1 步：安裝並激活 SearchWP 模態搜索表單插件

首先，您需要轉到 WordPress 儀表板中的Plugins選項卡，然後單擊Add New 。

然後，搜索 SearchWP 模態搜索表單。

找到插件並單擊立即安裝。 安裝後不要忘記激活它。

有關如何執行此操作的更多詳細信息，請查看我們關於如何安裝 WordPress 插件的分步指南。

第 2 步：在菜單中添加搜索欄

安裝並激活 SearchWP 模態搜索表單後，從 WordPress 儀表板單擊外觀選項卡並轉到菜單。

到達那里後，單擊SearchWP Modal Search Forms 。

勾選默認複選框，然後按添加到菜單。

單擊名為 Default 的新菜單項，並將其在Navigation Label字段中的名稱更改為更合適的名稱。 例如，我們稱之為“搜索”。

完成後，按右下角的保存菜單按鈕。

第 3 步：測試您的新搜索欄

現在讓我們來看看新的搜索欄。 單擊站點名稱下的訪問站點按鈕。

查看您的導航菜單區域。 現在您有了一個名為“搜索”的新菜單項。

單擊它後，您將看到模態搜索表單出現，如下所示：

而已。 您剛剛在 WordPress 網站導航菜單中添加了一個搜索欄。

在本文中，您學習瞭如何通過幾種不同的方式在 WordPress 中添加搜索欄。

如果您準備好增強您的 WordPress 搜索，您可以在此處獲取您的 Search WP 副本。

如果您想調整其搜索算法，您可能還對如何在 WordPress 中自定義搜索小部件感興趣。

此外，如果您在使用 WordPress 搜索時遇到過任何問題，請查看我們的指南，了解如何修復 WordPress 搜索不起作用。