如何建立自定義WordPress搜尋表單

搜尋是大多數使用者在您的網站上查詢內容的方式。如果他們無法輕鬆找到他們正在尋找的內容,那麼他​​們可能會轉到另一個網站。

在本教程中,我們將逐步向您展示如何通過建立自定義WordPress搜尋表單來改進您的網站搜尋。

如何建立自定義WordPress搜尋表單

為什麼要為WordPress建立自定義搜尋表單?

預設的WordPress搜尋功能非常有限,並不總能找到最相關的內容。

隨著您向網站新增更多內容,您將需要更好的方法來幫助您的網站訪問者輕鬆找到您網站上的內容。

如果您經營線上商店或會員網站,您希望使用者在其中找到合適的產品或課程,這一點就變得更加重要。

您可能還想自定義搜尋演算法以顯示高於其他內容的特定內容,或自定義搜尋表單的外觀。

話雖如此,讓我們來看看如何自定義WordPress搜尋表單和結果頁面。我們將介紹兩種方法,您可以使用以下連結進行選擇:

如何自定義WordPress搜尋表單和結果

SearchWP是WordPress最好的自定義搜尋外掛。它易於使用,可讓您完全控制搜尋結果,並且比預設的WordPress搜尋更準確。

第一步是安裝SearchWP外掛。啟用後,您需要訪問設定 » SearchWP頁面,然後單擊“License”選單選項。

SearchWP授權設定

然後,在“License”框中輸入您的許可證金鑰,然後單擊“Activate”按鈕。您可以在SearchWP網站上的帳戶中找到此資訊。

自定義搜尋引擎

完成後,您需要單擊“Engines”選單選項。在那裡,您應該單擊“Add New”按鈕以建立新的搜尋引擎。

SearchWP搜尋引擎設定

這將建立一個名為“supplemental”的新搜尋引擎。要更改名稱,您需要單擊“Sources & Settings”按鈕。

SearchWP搜尋源設定

這會將您帶到一個頁面,該頁面還允許您選擇是否搜尋文章、頁面、媒體檔案、評論和使用者。我們將保留預設設定。

我們將搜尋引擎的名稱更改為“Custom”。繼續並將其輸入到“Engine Label”欄位中。

SearchWP自定義搜尋源

請注意,已為您選擇了“Keyword Stems”選項。當您的使用者進行搜尋時,這將忽略詞尾,以便顯示最相關的搜尋結果。

完成後,請確保單擊“Done”按鈕。

搜尋引擎的設定頁面包含文章、頁面、媒體和使用者部分。在每個部分,您可以優先考慮不同的文章屬性,或者在搜尋結果中僅包含某些類別或標籤。

您可以通過調整“Attribute Relevance”滑塊來做到這一點。

這些改變了搜尋引擎對內容的評價和排名方式。例如,如果您希望文章標題的權重高於內容,那麼您可以相應地調整滑塊。

您應該完成每個部分並對您喜歡的滑塊進行任何調整。

SearchWP搜尋源權重設定

您還可以為每個部分建立規則,以確定是在搜尋結果中包含還是排除某些內容。

例如,您可以讓訪問者輕鬆搜尋與他們剛剛閱讀的主題相同的內容。或者在線上商店中,您可以幫助您的客戶快速找到同一類別的其他產品。

繼續並單擊文章部分中的“Edit Rules”按鈕。

您會注意到,您可以建立有關文章類別、標籤和格式、釋出日期和文章ID的規則。

SearchWP文章搜尋規則設定

您可能希望讓訪問者搜尋特定的網站類別。例如,您可以向存檔頁面新增類別搜尋功能,以幫助訪問者快速找到他們正在尋找的內容。

要了解如何執行此操作,請參閱有關如何在WordPress中按類別搜尋的教程中的方法 1 。

完成自定義預設搜尋引擎設定後,請務必單擊頁面頂部的“Save Engines”按鈕以建立自定義搜尋引擎。

SearchWP設定儲存

新增帶有簡碼的搜尋表單

SearchWP Shortcodes Extension簡化了將新的自定義文章搜尋表單新增到WordPress網站的工作。

只需訪問SearchWP Shortcodes Extension網站,然後單擊“Download available with active license”按鈕即可。

SearchWP Shortcodes Extension

之後,您需要按照安裝上述外掛的相同方式安裝和啟用擴充套件。

現在,您可以使用短程式碼將自定義搜尋表單新增到您的文章、頁面和小部件。如果您之前沒有使用過短程式碼,那麼您可以在我們的初學者指南中瞭解更多關於如何在WordPress中新增短程式碼的教程

只需編輯文章並將游標放在要新增搜尋表單的位置。之後,單擊加號“ + ”新增塊圖示以顯示塊選單。

新增搜尋框短程式碼

接下來,在搜尋框中鍵入“html”,然後單擊“自定義HTML”塊以將其新增到文章中。

新增新塊後,您應該將以下短程式碼和HTML貼上到其中。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
[searchwp_search_form engine="custom" var="searchvar" button_text="Custom Search"]
<div class="search-results-wrapper">
[searchwp_search_results engine="custom" 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="custom"]
[searchwp_search_results_pagination direction="next" link_text="Next" var="searchvar" engine="custom"]
</div>
[searchwp_search_form engine="custom" var="searchvar" button_text="Custom Search"] <div class="search-results-wrapper"> [searchwp_search_results engine="custom" 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="custom"] [searchwp_search_results_pagination direction="next" link_text="Next" var="searchvar" engine="custom"] </div>
[searchwp_search_form engine="custom" var="searchvar" button_text="Custom Search"]
   
<div class="search-results-wrapper">
 [searchwp_search_results engine="custom" 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="custom"]
 [searchwp_search_results_pagination direction="next" link_text="Next" var="searchvar" engine="custom"]
</div>

此程式碼會將您的自定義搜尋表單新增到文章中,建立一個部分來顯示搜尋結果,如有必要顯示無結果訊息,並在結果進入多個頁面時新增分頁。

如果您為搜尋引擎指定了不同的名稱,則需要engine=“custom”在四個位置更改為您自己的引擎名稱。

您還可以選擇通過編輯將搜尋按鈕上的文字更改為更具描述性的內容button_text=“Custom Search”。其餘程式碼可以保持不變。

確保您單擊發布或更新以儲存您的文章並使其生效。

編輯搜尋短程式碼

要檢視正在執行的搜尋表單,只需檢視WordPress網站上的文章即可。這就是它在我們執行二〇二一主題的演示站點上的外觀。

自定義搜尋框預覽

新增實時Ajax搜尋

實時Ajax搜尋通過在使用者鍵入查詢時自動提供下拉搜尋結果來改進您的搜尋表單。

實時搜尋框預覽

將Ajax實時搜尋新增到WordPress的最簡單方法是免費的SearchWP Live Ajax Lite搜尋外掛,因為它會自動啟用實時搜尋。

有關如何安裝它的分步說明,請參閱我們關於如何將實時Ajax搜尋新增到您的WordPress站點的指南

使用SearchWP的高階設定

現在您應該導航到設定 » SearchWP並單擊Advanced選項卡。在此頁面上,您可以啟用一些設定,讓您的使用者更容易找到他們要查詢的內容。

SearchWP高階設定

選中您想要的任何這些選項:

  • 部分匹配(Partial matches)還將顯示與正在搜尋的術語不完全匹配的結果。
  • Automatic “Did you mean?” corrections會建議一個略有不同的搜尋詞,以匹配您網站上的更多文章。
  • Support “quoted/phrase searches”將允許您的使用者在搜尋確切短語時使用引號。
  • Highlight terms in results將使您的訪問者更容易在搜尋結果中找到他們正在尋找的內容。

設計搜尋表單和結果頁面

您的WordPress主題控制您網站的外觀,包括搜尋表單和搜尋結果頁面。它們將WordPress網站所有元素的格式規則儲存在CSS樣式表中。

您可以新增自己的自定義CSS來覆蓋主題的樣式規則。

如果您以前沒有這樣做過,請參閱我們關於如何在WordPress中新增自定義CSS的文章。例如,這裡有一些適用於大多數主題的自定義CSS。第一部分更改搜尋表單的樣式,第二部分自定義搜尋結果。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.searchform {
font-family:arial;
font-size:16px;
background:#ace5e3;
color:#ffffff;
border:1px solid #61c3c0;
padding:10px;
height:90px;
width:600px;
}
.search-results {
font-family:arial;
font-size:16px;
background:#ace5e3;
color:#000000;
border:1px solid #61c3c0;
padding:10px;
width:600px;
}
.searchform { font-family:arial; font-size:16px; background:#ace5e3; color:#ffffff; border:1px solid #61c3c0; padding:10px; height:90px; width:600px; } .search-results { font-family:arial; font-size:16px; background:#ace5e3; color:#000000; border:1px solid #61c3c0; padding:10px; width:600px; }
.searchform {
font-family:arial;
font-size:16px;
background:#ace5e3;
color:#ffffff;
border:1px solid #61c3c0;
padding:10px;
height:90px;
width:600px;
}
 
.search-results {
font-family:arial;
font-size:16px;
background:#ace5e3;
color:#000000;
border:1px solid #61c3c0;
padding:10px;
width:600px;
}

您可以更改程式碼中的格式以適合您自己的站點。您還可以刪除任何不想修改的行。例如,如果您不想更改搜尋表單的高度和寬度,則只需刪除這些行即可。

以下是我們的演示網站在新增自定義CSS之前和之後的螢幕截圖。

自定義CSS樣式展示

衡量搜尋結果和改善轉化

設定好自定義WordPress搜尋表單後,下一步就是衡量結果。

SearchWP帶有一個搜尋指標擴充套件,可以準確地顯示您的網站搜尋的執行情況。

SearchWP搜尋指標擴充套件

您還可以使用搜尋指標通過提升獲得更多點選次數的結果來自動改進搜尋結果。

我們希望本教程能幫助您學習如何建立自定義WordPress搜尋表單。

評論留言