如何向 Elementor 頁面添加搜索框(初學者指南)

已發表: 2022-05-06

您想知道如何將搜索框添加到 Elementor 頁面嗎?

向 Elementor 頁面添加搜索框可讓您鼓勵訪問者瀏覽您的網站。 這樣,您可以毫不費力地提高內容的可發現性並獲得更多的網頁瀏覽量。

在本文中,我們將向您展示兩種方法:

  • 如何在沒有插件的情況下添加默認搜索框
  • 如何使用 SearchWP 插件添加智能搜索框

讓我們深入了解它!

為什麼你應該考慮使用搜索插件

您可以輕鬆地將搜索框添加到 Elementor 頁面,而無需任何插件。 我們將在本文後面詳細介紹如何執行此操作。

但是您應該考慮使用搜索插件添加它是有原因的。

問題是,默認的 WordPress 搜索引擎遠非完美。 它僅搜索帖子和頁面的標題、內容和摘錄。

這是一個巨大的缺點,因為 WordPress 在執行搜索時會忽略很多信息

此列表包括自定義字段、帖子標籤和類別、簡碼以及許多其他有用的數據。

通過使這些可搜索,您可以幫助訪問者更快地找到他們正在尋找的內容並改善他們的用戶體驗。

最簡單的方法是使用 WordPress 搜索插件。 使用它,您還可以自定義一堆與您網站上的搜索相關的內容。

例如,使用搜索插件,您可以輕鬆:

  • 創建自定義搜索字段
  • 更改搜索結果的順序
  • 收集有關您網站上的搜索活動的數據
  • 將搜索限制為特定的帖子、頁面或類別
  • 和更多!

最好的部分? 使用插件只需點擊幾下即可提升您的網站搜索- 無需編碼。

此外,如果您使用插件,您可以隨時聯繫其支持團隊並從 WordPress 專家那裡獲得幫助。

這樣,如果您在添加搜索框時遇到任何問題,您可以節省聘請 Web 開發人員的費用。

話雖如此,讓我們繼續在沒有插件的情況下向 Elementor 頁面添加默認搜索框。

如何在沒有插件的情況下添加默認搜索框

首先,導航到 WordPress 儀表板中的頁面 » 所有頁面

navigate to All Pages

然後,將光標懸停在要添加搜索框的頁面上,然後單擊Edit with Elementor

click Edit with Elementor

進入 Elementor 頁面編輯器後,在左側面板的“搜索小部件”字段中鍵入“搜索表單”。

search for search form

之後,您將看到“搜索表單”小部件。

find the search form

將其拖放到頁面上您希望搜索框出現的位置。

您可以在下面看到我們如何做到這一點:

how to add a search box to Elementor page (beginner's guide)

添加搜索表單後,單擊編輯器底部的更新以保存更改。

click Update

而已。 您已成功將搜索表單添加到 Elementor 頁面。

這是它在我們的測試站點上的外觀:

click search

現在讓我們看看如何使用插件將智能搜索字段添加到您的 Elementor 頁面。

如何使用 SearchWP 插件添加智能搜索框

如果您想向 Elementor 頁面添加智能自定義搜索框,最簡單的方法是使用 SearchWP 之類的插件。

SearchWP logo

這是市場上最強大、最直觀的 WordPress 搜索插件。

使用它,您可以更好地在您的網站上進行搜索,並幫助您的訪問者找到他們正在尋找的內容。

例如,使用 SearchWP,您可以從搜索結果中排除特定頁面,使自定義字段可搜索等等。

已有超過 30,000 名 WordPress 網站所有者使用它為訪問者提供最相關的搜索結果。

除了向您的頁面添加智能搜索框外,您還可以使用 SearchWP 來:

  • 使簡碼可搜索。 您是否使用簡碼在您的網站上顯示內容? 使用 SearchWP,您可以使短代碼可搜索,以便您的訪問者可以找到該內容。
  • 添加實時自動完成搜索。 想要在您的網站上顯示實時搜索結果? 使用 SearchWP,您只需單擊幾下即可打開此功能。
  • 跟踪訪問者的搜索。 SearchWP 收集有關您網站上的搜索活動的數據,以便您可以查看訪問者正在搜索的內容。
  • 啟用按標籤搜索。 為您的帖子添加標籤? 使用 SearchWP,您可以使它們可搜索,以便您的訪問者可以更快地找到正確的內容。

現在您知道 SearchWP 如何改進您的現場搜索,讓我們看看如何使用它向 Elementor 頁面添加智能自定義搜索框。

第 1 步:安裝並激活 SearchWP

首先,在此處獲取 SearchWP 插件的副本。

下一步是登錄您的 SearchWP 帳戶。 到達那里後,轉到儀表板中的“下載”選項卡。

navigate to the Downloads section

然後,單擊下載 SearchWP按鈕開始下載插件。

press Download SearchWP

下載完成後,在同一頁面上複製您的 SearchWP 許可證密鑰。

copy your license key

下一步是將插件的 ZIP 文件上傳到您的站點並安裝 SearchWP。

如果您需要重新了解如何執行此操作,可以按照此分步指南了解如何安裝 WordPress 插件。

安裝 SearchWP 後,您需要使用您的許可證密鑰激活它。

為此,請將光標指向 WordPress 儀表板頂部面板的SearchWP按鈕,然後單擊激活許可證

click Activate License

然後,將您在先前步驟之一中復制的許可證密鑰粘貼到“許可證”字段中,然後按“激活”按鈕。

click Activate

激活 SearchWP 許可證後,您可以繼續添加新的搜索引擎並對其進行自定義以滿足您的需求。

第 2 步:添加新的搜索引擎並對其進行自定義

要開始使用,請單擊 SearchWP 設置中的引擎選項卡。

go to the Engines tab

在此選項卡上,您可以添加新的搜索引擎並管理現有的搜索引擎。

the list of your search engines

搜索引擎包含一組 WordPress 在執行搜索時遵循的規則。

使用 SearchWP,您可以創建多個搜索引擎並將它們鏈接到特定的搜索框。

它允許您使用單獨的規則和設置集創建自定義搜索框。

目前,有一個名為Default的搜索引擎。 SearchWP 會在安裝後自動創建它。

默認搜索引擎控制您網站上每個現有搜索框的工作。 通過對其進行自定義,您可以管理搜索在您的網站上的一般工作方式。

例如,您可以搜索大量有用的數據,從搜索結果中排除特定類別等等。

由於我們想讓我們網站上的每個搜索框更智能,我們將編輯默認搜索引擎。

首先,讓我們管理其搜索源列表。

通過在此列表中添加和刪除搜索源,您可以控制 WordPress 查找匹配項的位置。

要自定義您的搜索來源,請按來源和設置按鈕。

click Sources and Settings

在彈出窗口中執行搜索時,您可以選擇希望 WordPress 考慮的搜索源。

search sources

例如,假設我們希望將測試站點上的搜索限制為僅帖子和媒體文件。

為此,我們取消選中除PostsMedia之外的所有搜索源。

這是它在我們的測試站點上的樣子:

check search sources you want

管理完搜索源後,按完成

press Done

現在讓我們幫助您的訪問者更快地找到他們想要的帖子。

首先,單擊帖子搜索源以打開其設置。

click Posts

在這裡,您可以看到 WordPress 在搜索時考慮的帖子屬性列表。

屬性是帖子的特定部分,例如標題、內容、slug 和摘錄。

applicable post attributes

為了讓您的訪問者更快地找到他們正在尋找的帖子,我們將在此列表中添加新屬性。

首先,按添加/刪除屬性按鈕。

click Add Remove attributes

您可以在彈出窗口中管理當前屬性並添加新屬性。

manage post attributes

讓您的帖子搜索更智能的最簡單方法是讓 WordPress 考慮自定義帖子字段。

要在特定自定義字段中創建可搜索數據,請單擊“自定義字段”字段並輸入帶有“_”前綴的名稱。

例如,我們將使我們在測試站點上使用的_tutorial自定義字段可搜索:

add a custom field

此外,還有一種方法可以讓 WordPress 考慮所有現有的自定義字段,而無需手動輸入每個字段的名稱。

為此,請再次單擊自定義字段字段並選擇任何元鍵快捷方式。

此快捷方式允許您一次使站點上的所有自定義字段可搜索。

choose Any Meta Key

此外,您可以選擇希望 WordPress 在執行搜索時考慮的分類法。

為此,請單擊分類法字段。

add a taxonomy

WordPress 中的分類法是一種組織內容的方法。 當涉及到帖子時,它可能是一個類別、標籤、格式或其他東西。

例如,假設我們希望 WordPress 在搜索時考慮帖子類別。

為此,我們將單擊類別分類將其添加到帖子屬性列表中。

add the Categories taxonomy

管理完可搜索的帖子屬性後,單擊完成以保存所做的更改。

click Done

此外,您可以通過向左或向右移動它們旁邊的滑塊來管理適用屬性的相關性權重。

adjust the attributes relevance weight

屬性的權重越低,WordPress 在執行搜索時對其的關注就越少。

例如,假設我們想將SlugExcerpt屬性的權重減少到零。

為此,我們將每個滑塊旁邊的滑塊一直向左移動:

set the lowest weight

讓我們還可以在您的網站上搜索 PDF 文件和文檔。

為此,請單擊媒體搜索源。

click on the Media search source

然後,按添加/刪除屬性按鈕。

click Add Remove attributes within the Media source

要使您上傳到站點的 WordPress 索引文檔內容和 PDF 元數據,請選中文檔內容PDF 元數據框。

check Document content and PDF meta

完成後,按完成

press Done when you're finished

當您對自定義搜索引擎的方式感到滿意時,您需要保存所做的更改。

您可以通過按右上角的保存引擎按鈕來執行此操作。

click Save Engines

而已。 現在您知道如何在您的網站上自定義搜索以滿足您的需求並使其更加智能。

最後一步是將新的智能搜索框添加到 Elementor 頁面。

第 3 步:將智能搜索框添加到 Elementor 頁面

您對默認搜索引擎所做的所有更改都會自動應用到您網站上的每個搜索框。

由於之前我們已經展示瞭如何向 Elementor 頁面添加搜索框,您可以按照本教程進行操作。

SearchWP 與 Elementor 無縫集成,因此您無需採取任何額外步驟來配置它。

添加搜索框後,讓我們試試您的新搜索引擎。

例如,在我們的測試網站上,我們有一篇名為“TOP-3 WordPress eCommerce plugins”的帖子。 它有Type自定義字段,我們在其中放置了“showcase”一詞。

讓我們檢查一下是否只能通過其自定義字段內容找到該帖子。

search by a custom field

如您所見,我們成功找到了該帖子,因為我們的網站現在在執行搜索時會考慮自定義字段。

we found our post

它允許訪問者更快地找到正確的內容,並使他們的用戶體驗更加積極。

此外,我們將一個名為“WordPress 用戶指南”的 PDF 文件上傳到我們的測試站點。 讓我們檢查一下是否可以找到它。

search for a PDF file

如您所見,我們找到了我們的 PDF。

we found our PDF file

這意味著我們的訪問者現在可以使用搜索欄找到上傳到我們網站的 PDF 和文檔。

在本文中,您學習瞭如何向 Elementor 頁面添加搜索框。 它將幫助您鼓勵訪問者在您的網站上進行搜索並提高您的內容可發現性。

如果您準備在 Elementor 頁面中添加智能搜索框,可以在此處獲取 SearchWP 的副本。

想知道為什麼自定義帖子類型搜索在您的網站上不起作用? 查看如何修復自定義帖子類型搜索在 WordPress 教程中不起作用。

想讓帖子標籤在您的網站上可搜索嗎? 按照 WordPress 詳細指南中的如何按標籤搜索帖子。