製作出色的自定義 WordPress 搜索表單的 3 種方法

已發表: 2022-11-23

WordPress 是世界上最受歡迎的內容管理系統 (CMS)。除了是一個功能強大且超級靈活的工具之外，它還非常易於使用。沒有網頁設計或編碼經驗的人可以使用 WordPress 在幾分鐘內啟動他們的網站。

用戶將訪問您的 WordPress 網站以搜索他們感興趣的內容。搜索欄可以幫助他們做到這一點。如果您的網站沒有，人們將很難找到他們正在尋找的內容。這種挫敗感導致人們離開您的網站並前往其他地方。

那不行！

在本文中，我們將向您展示如何將自定義 WordPress 搜索表單集成到您的網站中。

什麼是自定義 WordPress 搜索表單？
#1 應用插件
#2 修改代碼
#3 使用自定義 CSS 設置搜索表單和結果頁面的樣式

什麼是自定義 WordPress 搜索表單？

WordPress 已經內置了本機搜索功能。然而，默認的搜索工具非常有限並且不是很“智能”。它並不總能找到您要查找的內容。

默認的 WordPress 搜索功能足以滿足內容不多的新網頁或小型網頁。

但是隨著內容數據庫的增長，安裝更好的搜索工具對於幫助訪問者瀏覽您的網站非常重要。如果您經營電子商務網站，一個好的搜索工具就更為重要。它有助於將潛在客戶引導至適合他們的產品。

您可能還希望您的搜索工具以特定順序顯示結果。例如，最受歡迎的文章或項目排在第一位。默認搜索工具不允許您這樣做。相反，您必須手動編輯搜索算法。

最後但同樣重要的是，自定義搜索工具可以風格化以反映您網站的審美或品牌！

pfo-custom-wordpress-search-form-example

什麼是 get_search_form 函數？

get_search_form指的是在您的網站上顯示搜索表單的功能。您可以在 WordPress 管理面板的“外觀”>“小部件”選項卡中找到它。

它管理搜索表單小部件和您網站上需要搜索功能的任何其他頁面。如果沒有這個功能，您的網站就如同完全沒有搜索工具一樣好。

如何在 WordPress 中自定義搜索表單

您可以使用許多不同的方法來自定義 WordPress 中的搜索表單。這取決於您的編碼技能水平以及您願意在此任務上花費多少時間。

#1 應用插件

插件是在您的網站上啟動和運行自定義 WordPress 搜索表單的最簡單、最快的方法。例如，Ivory Search 是一個免費插件，專門用於增強 WordPress 搜索工具的功能。您可以添加和編輯新的搜索表單並執行不同類型的搜索。

此外，使用短代碼，您可以將搜索欄放置在網站上您想要的任何位置（例如頁眉、頁腳、菜單欄等）。

pfo-ivory-search-plugin

如果您沒有太多編碼經驗，我們強烈推薦這是一個簡單的工具。雖然它不像編寫搜索工具那樣通用，但對於基本使用來說應該足夠了。

#2 修改代碼

有兩種方法可以在您的 WordPress 站點的 .php 核心文件中從頭開始構建搜索表單：使用函數或使用模板。

有一個功能

您可以使用add_filter掛鉤將默認的 WordPress 搜索工具替換為自定義搜索工具。在您的functions.php文件中，將以下代碼添加到堆棧中：

 函數 custom_search_form( $form ) {
$form = '<form role="search" method="get" class="searchform" action="' . home_url( '/' ) . '" >
<div class="custom-form"><label class="screen-reader-text" for="s">' 。 __（ '搜索：' ） 。 '</標籤>
<input type="text" value="' .get_search_query() .'" name="s" />
<input type="submit" value="'.esc_attr__( 'Search' ) .'" />
</div>
</形式>';
返回$表格；
}

add_filter( 'get_search_form', 'custom_search_form', 40 );

這段代碼所做的是將您的自定義表單存儲在$form變量中，由於add_filter掛鉤，它將替換默認的 WordPress 搜索工具。

您可以通過編輯$form變量值中的標籤、文本、ID 和其他元素來進一步自定義上述代碼。

使用模板

如果您不想修改functions.php文件，另一種方法是使用搜索表單模板。創建自定義 WordPress 搜索表單，然後將其作為searchform.php添加到您的主目錄中。 WordPress 將自動使用自定義搜索表單而不是默認的。

為此，請打開您選擇的 IDE 並創建一個新文件。將其命名為“searchform.php” 。將以下代碼粘貼到編輯器中：

 <?php
/* 自定義搜索表單 */
？>
<form role="search" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>" class="input-group mb-3">
<div class="輸入組">
<input type="search" class="form-control border-0" placeholder="Search" aria-label="search nico" name="s" value="<?php echo esc_attr( get_search_query() ); ? >">
<div class="input-group-append">
<span class="input-group-append p-0">
<i class="fas fa-search text-muted"></i>
</span>
</div>
</div>
</表格>

根據您的喜好修改上面的代碼！

#3 使用自定義 CSS 設置搜索表單和結果頁面的樣式

現在您已經啟動並運行了自定義搜索功能，下一部分是設置它的樣式。默認外觀非常無聊，帶有普通無襯線字體的白色文本框。

如果你想改變它，最好的辦法是通過幾行 CSS 代碼。

此 CSS 代碼模板與絕大多數 WordPress 主題兼容。只需通過您的 WordPress 管理面板複製並粘貼即可。

 .searchform {
字體系列：宋體；
字體大小：16px；
背景：#ace5e3；
顏色：#ffffff；
邊框：1px 實心#61c3c0；
填充：10px；
高度：90px；
寬度：600px；
}

。搜索結果 {
字體系列：宋體；
字體大小：16px；
背景：#ace5e3；
顏色：#000000；
邊框：1px 實心#61c3c0；
填充：10px；
寬度：600px；
}

根據您的喜好修改代碼中的變量。您可以選擇字體、字體大小、背景顏色、邊框等。如果代碼中有任何您不想更改的元素，只需刪除該行即可。

例如，如果您不想更改搜索表單的字體系列，則只需刪除“font-family:arial;” 線。

立即創建您自己的自定義 WordPress 搜索表單！

大多數人都可以使用插件生成的簡單搜索表單。但是，如果您更擅長編碼並希望將高級功能集成到您網站的搜索表單中，那麼上面的代碼模板可能會很有用。

自定義 WordPress 搜索表單是一個非常簡單的功能，但在使您的網站更加用戶友好方面非常有效。通過自定義字段 WordPress 功能進行表單搜索可以幫助您吸引更多訪問者，將他們轉化為常客，如果您經營電子商務網站，還可以轉化為付費客戶。

您可以在此處了解有關添加智能 WooCommerce 產品搜索的更多信息。

我們希望本指南對您有所幫助，並希望您在閱讀本文時已經啟動並運行自定義搜索表單！