如何使用簡碼將搜索框添加到 WordPress 帖子(逐步)

已發表: 2022-05-03

您是否正在尋找一種使用簡碼將搜索框添加到 WordPress 帖子的方法?

這很方便,因為它允許您的訪問者搜索新內容,而不會分散他們瀏覽您網站的注意力。

在本文中,我們將逐步向您展示如何在無需編碼的情況下將搜索框添加到您網站上的任何帖子中。

讓我們開始!

為什麼使用簡碼在 WordPress 帖子中添加搜索框

在您的帖子中添加搜索表單會帶來很多好處。

主要是,它允許您的訪問者更快地找到他們正在尋找的內容並改善他們的用戶體驗。

例如,您可以創建一個僅限於特定類別的自定義搜索表單並將其放在相關帖子中,如下所示:

how to add search box to WordPress post with a shortcode

這樣,您不僅可以讓訪問者更輕鬆地找到正確的內容,還可以鼓勵他們進一步探索您的網站。

此外,在您的 WordPress 網站帖子中放置一個搜索欄將幫助您:

  • 增加平均會話持續時間。 通過在帖子中提供搜索表單,您將幫助訪問者找到更多他們感興趣的內容。
  • 從搜索引擎獲得更多流量。 平均會話持續時間是谷歌的一個重要排名因素,因此通過保持較高的排名,您可以獲得更好的排名。
  • 建立忠實的受眾。 在瀏覽您的網站時獲得積極用戶體驗的滿意訪問者更有可能再次返回。

現在您知道使用簡碼在帖子中添加搜索欄有什麼好處,讓我們看看如何做到這一點。

如何使用簡碼將搜索框添加到 WordPress 帖子

使用插件是使用簡碼向您網站上的帖子添加搜索框的最簡單方法。 在這方面,沒有插件能勝過 SearchWP。

SearchWP logo

為什麼? 因為 SearchWP 提供了市場上最全面的解決方案,可以滿足您的所有需求。

除了添加帶有簡碼的搜索框外,您還可以使用它在實時模式下顯示搜索結果、跟踪現場搜索活動等。

SearchWP 通過幫助您提高您的現場搜索:

  • 添加多個搜索引擎。 想要將自定義搜索字段添加到您的網站? 您可以創建具有不同設置的多個搜索引擎,並將它們鏈接到特定的搜索字段。
  • 影響搜索結果順序。 對您網站上當前的搜索結果順序不滿意? SearchWP 允許您以您想要的方式自定義它。
  • 從搜索中排除頁面。 正在尋找一種從搜索結果中排除不需要的頁面的方法? 使用 SearchWP,您只需單擊幾下即可完成此操作,無需編碼。
  • 使自定義字段可搜索。 在自定義字段中存儲有價值的帖子數據? 使用 SearchWP,您可以讓 WordPress 在執行搜索時考慮它們。

超過 30,000 個網站已經在使用此插件為訪問者提供最相關的搜索結果。

有了它,讓我們看看如何使用 SearchWP 通過簡碼將搜索框添加到您的帖子中。

第 1 步:安裝並激活 SearchWP 插件

第一步是獲取您自己的 SearchWP 副本。

完成後,登錄您的 SearchWP 帳戶並導航到“下載”選項卡。

go to the Downloads tab

然後,按下載 SearchWP按鈕開始將插件 ZIP 文件下載到您的計算機。

press Download SearchWP

下載文件後,在同一選項卡上複製 SearchWP 許可證密鑰。 您需要進一步激活插件。

copy your SearchWP license key

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

需要復習一下如何做到這一點? 按照如何安裝 WordPress 插件的分步教程進行操作。

安裝插件後,轉到 WordPress 儀表板,將鼠標懸停在SearchWP按鈕上,然後單擊激活許可證

press Activate License

然後,將您的許可證密鑰粘貼到許可證字段中,然後按激活

click Activate

激活許可證後,下一步是安裝簡碼擴展。

第 2 步:安裝並激活簡碼擴展

此擴展程序允許您使用簡碼在帖子或頁面的任何位置放置搜索框。

要安裝它,請導航到 WordPress 儀表板左側 SearchWP 下的Extensions選項卡。

navigate to the Extensions tab

在這裡,您會發現許多有用的 SearchWP 擴展。 通過安裝它們,您可以進一步擴展插件的功能。

click Install

向下滾動頁面,直到看到 Shortcodes 擴展,然後單擊安裝將其添加到您的站點。

click Install

安裝並激活 SearchWP 插件和 Shortcodes 擴展後,下一步是在您的帖子中添加一個搜索框。

第 3 步:使用簡碼在您的帖子中添加搜索框

要開始使用,請導航到 WordPress 儀表板中的“帖子”選項卡。

go to Posts

然後,單擊要添加搜索框的帖子。

click on a post

進入帖子編輯器後,在帖子中選擇要添加搜索框的確切位置,然後單擊它旁邊的號按鈕。

click Plus

然後,在彈出窗口中,找到自定義 HTML塊並單擊它以將其添加到帖子中。

add a custom HTML block

下一步是將以下代碼複製並粘貼到您添加的自定義 HTML塊中:


[searchwp_search_form engine="default" var="searchvar" button_text="Find Results"]
   
<div class="search-results-wrapper">
 [searchwp_search_results engine="default" 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="default"]
 [searchwp_search_results_pagination direction="next" link_text="Next" var="searchvar" engine="default"]
</div>

此代碼將一個搜索框添加到您放置它的帖子中的位置。

另外,它會顯示分頁鏈接,如果沒有結果,則會顯示“未找到搜索結果”消息。

添加代碼後,單擊右上角的更新按鈕以保存更改。

press Update

而已。 您在帖子中添加了一個搜索欄,以便訪問者可以發現更多您的內容。

現在讓我們看看它是如何工作的。

第 4 步:使用搜索框查看您的帖子

要轉到您的帖子,請單擊Preview ,然後從下拉菜單中選擇Preview in new tab選項。

click Preview in new tab

以下是搜索欄在我們測試網站上的帖子中的外觀:

how to add search box to WordPress post with a shortcode

為了測試它,讓我們嘗試搜索“WooCommerce”。

click Find Results

如您所見,“WooCommerce”搜索詞的搜索結果出現在我們的帖子中。

we found a post

這很有幫助,因為它允許您的訪問者搜索您的網站,而不會因閱讀您的帖子而分心。

在本文中,您學習瞭如何使用簡碼向 WordPress 帖子添加搜索框。 它將幫助您的訪問者更快地找到他們想要的內容,並讓您獲得更多的網頁瀏覽量。

如果您準備在 WordPress 網站上使用簡碼為帖子添加搜索框,您可以在此處獲取您的 SearchWP 副本。

正在尋找一種從您網站的搜索結果中排除特定帖子類別的方法? 查看如何從 WordPress 搜索中排除類別詳細教程。

想要將您網站上的搜索限制為僅帖子? 按照如何將搜索限制為僅 WordPress 指南中的帖子。