如何將搜索欄添加到 WordPress 網站

搜索欄是網站的基本元素，沒有人會不同意。 這是因為網站通過主頁、產品頁面、博客頁面、定價頁面等包含大量信息。這就是為什麼將搜索欄添加到 WordPress 網站至關重要。

如果您需要一些存在於不同頁面上的信息，您將如何找到它們？ 您是否會發現他們單獨訪問這些頁面？ 當然，你不會喜歡這樣做。 並不是說您不會以這種方式找到所需的信息。 但它既費時又令人作嘔。 這就是向您的網站添加搜索欄的地方。

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

假設您的網站上沒有搜索欄。 在這種情況下，當訪問者訪問您的網站時，他們將很難找到所需的信息。 結果，他們將離開您的網站，而您讓他們進入網站的整個目的將徒勞無功。

讓我介紹一些您可以在下面的網站中添加搜索欄的主要好處 -

• 減輕客戶查找信息的工作量
• 簡化用戶體驗
• 提高參與度
• 降低跳出率
• 使用一些關鍵字顯示必要的項目或信息，從而減少工作量

使用 WordPress 默認搜索小部件在菜單上添加搜索欄：

您可以使用 WordPress 默認搜索小部件在菜單上添加搜索欄嗎？ 不，你不能。 因為 WordPress 只允許您在小部件就緒區域添加搜索欄。

如果您想在菜單上添加搜索欄，則必須利用網站不同區域（包括頁眉和頁腳）中的其他插件或小部件。

這就是為什麼我將在本教程中向您介紹在您的 WordPress 網站上添加搜索欄的 3 種不同方法。

現在，讓我們看看如何通過 WordPress 默認小部件將搜索欄添加到您的網站。

使用 WordPress 默認搜索小部件添加搜索欄：

將搜索欄注入您的網站的最簡單和最方便的方法是通過您的 WordPress 儀表板。 怎麼做？ 讓我們來看看-

從儀表板導航到小部件：

首先，轉到管理面板的儀表板並找到外觀。 從外觀下的項目列表中導航並單擊小部件。

儀表板 > 外觀 > 小部件

從可用小部件中添加搜索小部件：

這將帶您進入一個包含不同頁面部分的新頁面。 現在，點擊“添加塊”按鈕（帶有 + 號）查看所有現有的小部件。

向下滾動以找到搜索小部件，或者您可以在搜索字段上寫“搜索”以找到搜索小部件。

單擊您希望搜索欄顯示的部分，然後點擊搜索小部件。 或者，您也可以將搜索小部件拖放到您想要的部分。

進行必要的調整：

搜索欄現在將顯示在所選部分下。 您可以對搜索欄對齊、按鈕位置、文本顏色等不同元素進行所需的更改。

您還可以根據需要向搜索欄添加自定義標籤。 最後，單擊更新按鈕。

查看頁面中的搜索欄：

現在，如果您訪問任何已發布的頁面或帖子，您會注意到搜索欄或搜索框出現在主側邊欄上。

使用 ElementsKit 搜索小部件添加搜索欄：

現在，我將向您介紹另一種在您的 WordPress 網站中添加搜索欄的簡單方法。 這是通過 ElementsKit 的 Header Search 小部件實現的。 通過 ElementsKit 添加搜索框超級簡單。

廢話不多說，一起來看看吧~

從儀表板導航到您現有的任何帖子或頁面：

首先，轉到儀表板並查找帖子或頁面。 在這裡，我將展示 ElementsKit 小部件如何與名為“Hello World！”的帖子一起使用。

轉到“帖子”，然後選擇“所有帖子”以顯示所有帖子。 從那裡，您可以選擇要添加搜索欄的帖子。 如果您沒有任何現有的帖子或頁面，則必須添加新的帖子或頁面。

儀表板 > 帖子 > 所有帖子 > 您的帖子

切換到 Elementor 窗口：

現在，單擊頂部中間的“使用 Elementor 編輯”。 這將帶您進入 Elementor 窗口。

拖放標題搜索小部件：

在 Elementor 窗口中，您將可以訪問大量小部件。 在搜索字段中鍵入“標題搜索”小部件以查找小部件。 或者，您也可以向下滾動並找到小部件。

找到小部件後，將其拖放到指定區域以顯示搜索欄。 不要忘記在帖子文本上方添加該部分，因為它是標題搜索欄。

設置搜索欄的參數：

一旦搜索欄出現在頁面上，就可以根據您的喜好設置欄的參數了。 在內容選項卡下，您將有一個標題搜索部分，您可以在其中放置一個佔位符文本，選擇一個搜索圖標，然後調整字體大小。

在樣式選項卡下，您將有 2 個部分 - 標題搜索和搜索容器。 在標題搜索部分，您可以調整搜索欄的背景顏色、邊框類型、搜索框陰影、邊距等參數。

在搜索容器部分，您可以選擇背景類型並設置佔位符文本和邊框顏色。

最後，你很高興！

完成設置後，您就可以檢查和查看帖子前端的搜索欄了。 如果您對搜索框的外觀不滿意，您可以再次從管理面板進行修改。

添加帶有 CSS 代碼的搜索框：

您可以使用另一種方​​法在您的網站中添加搜索欄，即使用 CSS 代碼。 雖然，您需要一些技術知識才能做到這一點，但這不是火箭科學。 我將在這裡向您展示該過程，之後將非常容易。

轉到主題編輯器：

首先，從儀表板單擊“外觀”並導航到“主題編輯器”。

打開 header.php 或 sidebar.php 文件：

這樣，您將默認移至 style.css 文件。 從那裡，根據您希望搜索欄顯示的位置打開header.php或sidebar.php文件。

添加搜索欄功能：

現在，添加這個函數<?php get_search_form(); ?>在您的 header.php 或 sidebar.php 文件代碼中。 我在 header.php 文件代碼中添加了該函數。

查看您網站上的搜索欄：

最後，打開任何已發布的頁面，您會注意到搜索欄出現在頂部。 如果您在 sidebar.php 文件中添加該功能，搜索欄將出現在側邊欄上。

清盤：

就是這個！！！ 我已經向您介紹了向您的 WordPress 網站添加搜索欄的 3 種超級簡單的技術。 根據您的要求，您可以選擇其中任何一個。 但是，如果您使用 ElementsKit 的標題搜索小部件添加搜索欄，您將獲得額外的好處。

那是什麼？ 無底的自定義選項！！！ 因此，如果您喜歡自定義，請使用 ElementsKit 的標題搜索小部件。 有了它，你可以給你的搜索欄一個迷人的外觀。