如何使用簡碼在 WordPress 帖子中添加搜索表單

已發表: 2021-11-24

您想在 WordPress 帖子中添加搜索表單嗎？

在您的帖子或頁面內容中添加搜索表單是鼓勵訪問者查找更多內容並在您的網站上停留更長時間的好方法。

在本文中，我們將向您展示如何使用 WordPress 搜索短代碼在您的帖子和頁面中添加搜索表單。

為什麼要在您的帖子和頁面中添加搜索表單？

如果訪問者喜歡閱讀您的 WordPress 博客上的帖子，那麼他們可能想要閱讀更多內容。在帖子中提供搜索表單將幫助他們找到更多他們感興趣的內容。

當您讓用戶輕鬆地在您的網站上花費更多時間時，您可以增加網頁瀏覽量並降低跳出率。

您的訪問者也更有可能加入您的電子郵件列表、發表評論、進行購買並在社交媒體上關注您。

在本教程中，我們將向您展示如何將標準 WordPress 搜索表單添加到您的帖子中。如果您想添加自定義搜索表單，請參閱我們的分步指南，了解如何創建自定義 WordPress 搜索表單。

我們將向您展示兩種在您的帖子中添加搜索表單的方法，第一種是最簡單的。使用下面的鏈接跳轉到您想要使用的方法。

方法一：使用插件添加搜索表單
方法二：使用代碼添加搜索表單

方法一：使用插件添加搜索表單

將搜索表單添加到帖子的最簡單方法是使用 SearchWP 插件。它是 30,000 多個網站使用的 WordPress 的最佳搜索插件。

設置 SearchWP

您需要做的第一件事是安裝並激活插件。有關更多詳細信息，請參閱我們關於如何安裝 WordPress 插件的分步指南。

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

然後，您需要在“許可證”框中輸入您的許可證密鑰。您可以在 SearchWP 網站上的帳戶中找到此信息。之後，您應該單擊激活按鈕。

接下來，您需要單擊“引擎”菜單選項。這會將您帶到一個屏幕，您可以在其中選擇搜索引擎設置。

在這裡，您需要創建一個站點範圍的搜索引擎。您可以通過點擊帖子、頁面和媒體下拉菜單來調整您的搜索引擎設置。

每個部分中的屬性相關性滑塊調整搜索引擎對內容的評價和排名方式。例如，如果您希望帖子標題高於內容，那麼您可以相應地調整滑塊。

完成調整設置後，請確保單擊“保存引擎”按鈕以保存默認搜索引擎。

將搜索表單添加到帖子

現在您需要下載 SearchWP 短代碼擴展，以輕鬆將新的自定義帖子搜索表單添加到 WordPress。

您需要訪問 SearchWP Shortcodes Extension 網站，然後單擊“下載可用許可證”按鈕。

之後，您需要以與上面安裝插件相同的方式安裝和激活擴展。現在您可以在帖子中添加搜索表單。

只需編輯帖子並將光標放在要添加搜索表單的位置。之後，單擊加號“添加塊”圖標以調出塊菜單。

接下來，在搜索框中輸入“html”。然後，選擇“自定義 HTML”塊。

添加新塊後，您可以將以下短代碼和 HTML 添加到您的頁面。如果您需要更多幫助，請參閱我們的指南，了解如何在 WordPress 中添加短代碼。

[searchwp_search_form]
   
<div class="search-results-wrapper">
 [searchwp_search_results]
  <h2>[searchwp_search_result_link]</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"]
 [searchwp_search_results_pagination direction="next" link_text="Next"]
</div>

此代碼將向帖子添加一個搜索表單，創建一個顯示搜索結果的部分，如有必要，顯示無結果消息，並在結果進入多個頁面時添加分頁。

確保單擊“發布”或“更新”以保存您的帖子並使其生效。

要查看實際的搜索表單，只需查看您的 WordPress 網站上的帖子。這就是它在我們的運行二十一二十一主題的演示站點上的外觀。

有關自定義搜索的更多提示，請參閱我們的指南，了解如何使用 SearchWP 改進 WordPress 搜索。

方法二：使用代碼添加搜索表單

您還可以使用代碼片段將搜索表單添加到您的 WordPress 帖子中。不建議初學者使用此方法，因此如果您對代碼不熟悉，則應改用方法1。

在這種方法中，您必須編輯主題的 functions.php 文件。

如果您之前沒有編輯過 functions.php 文件，請查看我們的初學者指南，了解如何將網頁中的片段粘貼到 WordPress 中。

您所要做的就是打開主題的 functions.php 文件或特定於站點的插件並粘貼以下代碼：

add_shortcode('wpbsearch', 'get_search_form');

這是使用 WordPress 主題編輯器將代碼段添加到二十一個主題的 functions.php 文件時它在我們的演示網站上的外觀。

之後，您只需將短代碼 [wpbsearch] 添加到您希望搜索表單出現的帖子或頁面中。

這將顯示默認搜索表單。要查看搜索表單，只需查看您的 WordPress 網站上的帖子。

如果您想顯示自定義搜索表單，則應使用此代碼。

function wpbsearchform( $form ) {
  
    $form = '<form role="search" method="get" id="searchform" action="' . home_url( '/' ) . '" >
    <div><label class="screen-reader-text" for="s">' . __('Search for:') . '</label>
    <input type="text" value="' . get_search_query() . '" name="s" id="s" />
    <input type="submit" id="searchsubmit" value="'. esc_attr__('Search') .'" />
    </div>
    </form>';
  
    return $form;
}
  
add_shortcode('wpbsearch', 'wpbsearchform');

隨意修改代碼以根據需要自定義搜索表單。

我們希望本教程幫助您了解如何使用 WordPress 搜索短代碼在您的帖子中添加搜索。

您可能還想了解如何創建免費的企業電子郵件地址，或者查看我們的為什麼應該在您的網站上使用 WordPress 的原因列表。

如果您喜歡這篇文章，請訂閱我們的 YouTube 頻道以獲取 WordPress 視頻教程。您也可以在 Twitter 和 Facebook 上找到我們。