Search Our Shop
Welcome to the online shop of awesomeness! Here you will find all kinds of products to revolutionize how you work, live, and play.
Use the search form below to get yourself moving in the right direction.
為什么人們首先使用網站搜索表單?這是因為他們正在尋找通過瀏覽網站或使用導航無法獲得的即時和相關結果。

有時,這些搜索結果會提供他們問題的答案(例如有關公司退貨政策的信息)或匹配產品或內容的列表(例如與頁面構建器插件相關的博客文章)。不過,無論他們在尋找什么,有一件事是肯定的:
訪問者希望您的wordpress搜索表單能夠快速準確地提供結果。
當您從整體上看待消費者行為時,這是有道理的。谷歌在在線搜索方面設定了一個幾乎不可能的標準。根據SparkToro的調查結果,Google中超過一半的搜索都是零點擊的。基本上,谷歌已經使搜索變得如此高效,以至于人們通常不需要訪問網站來獲得他們問題的答案。
當然,您的網站訪問者并沒有使用內部搜索來期待或想要零點擊結果。他們正在使用搜索來查找您網站的其他部分進行探索。但是,你的WordPress的搜索和谷歌搜索做的共同點是:消費者想要快速,方便,并從他們兩個中找到相關的結果。
只有一個問題:WordPress自帶的搜索功能不是很好。
這就是為什么在本教程中,我們將探索您需要了解的一切,以優(yōu)化訪問者的WordPress搜索體驗:
如果您以正確的方式設計網站,訪問者自然會遵循您在他們面前布置的路徑。一個組織良好的菜單也有幫助。
也就是說,內部搜索在這方面發(fā)揮著重要作用。
將WordPress搜索視為您網站的快速通行證。當您的搜索功能按其應有的方式執(zhí)行時,它可以在幾秒鐘內將您的訪問者從第1步帶到第5步。
這對于包含大量內容的 WordPress 網站特別有用。這里有些例子:
Nordic Ware等在線商店可以幫助訪問者從主頁訪問:
Nordic Ware:主頁在標題中帶有搜索欄
只需使用網站右上角的搜索欄即可獲得更窄的產品列表:
Nordic Ware:搜索結果頁面
通過始終顯示產品搜索表單,訪客無需篩選商店的菜單或類別來查找他們正在購買的特定商品。
擁有大型內容存儲庫的網站(例如閃電博有36頁的WordPree教程技巧文章(并且還在不斷增加))將從搜索欄中受益:
閃電博:WordPress教程技巧分頁
通過在文章列表頂部放置一個特定于資源中心的搜索表單,讀者可以比滾動36頁更快地找到他們正在尋找的主題:
閃電博資源中心列表頂部的WordPress搜索欄
包含大量內容的資源中心可能會變得難以導航。由于您希望保持博客頁面簡短以保持較高的加載速度,因此增加出現的文章數量并不是一個好主意。
相反,搜索欄將幫助您的訪問者更有效地瀏覽與其當前興趣無關的文章。
搜索是訪問者在在線目錄列表(例如房地產、旅游、專業(yè)服務等)的網站上做的第一件事,就像來自Trulia的這個例子:
Trulia:主頁搜索屬性
搜索元素總是很簡單,可以開始。例如,指定地點、人名或職位。但是結果頁面始終允許用戶根據需要過濾結果:
Trulia:示例搜索結果頁面
搜索是Elementor等產品的幫助中心和知識庫的有用組件:
Elementor:知識庫文章主題和計數
與手動搜索類別相比,搜索可幫助用戶更快地找到問題的答案:
Elementor:在文檔中搜索“模板”
在很多情況下,用戶在使用SaaS產品時遇到的問題可以很容易地由用戶自己解決。如果您想讓實時聊天和幫助臺支持遠離易于解決的問題,請使您的知識庫易于搜索。
如果有大量的東西在您的網站,不要假設導航將幫助游客努力通過自己的方式吧。建立類似快速通行證的搜索體驗,讓他們準確地到達他們需要和想去的地方。
您有幾個選項可以為您的網站實施和啟用基本的WordPress搜索:
根據您安裝的WordPress主題,您只需點擊幾下即可將搜索添加到您的菜單中。在這個例子中,我使用了Astra主題,順便說一句,結果非???!
首先要做的是轉到外觀>自定義:
WordPress – 導航到自定義菜單
接下來,轉到標題> 主菜單。
WordPress – 自定義菜單
在“菜單中的最后一項”下,從下拉菜單中選擇“搜索”。
WordPress – 在菜單中添加搜索欄
這將添加一個搜索圖標和欄作為導航菜單的最后一個元素。
WordPress – 添加了主題設置的搜索欄
使用其他WordPress主題時,此搜索激活設置可能與您的主題定制器不在同一位置。如果它可用,您會在“標題”設置下找到它。否則,您必須使用以下選項之一手動添加它。
WordPress小工具使您能夠將內容添加到內容周圍元素(如側邊欄和頁腳)中的專用塊中。
您可以使用WordPress小工具創(chuàng)建的一種內容塊是搜索欄。
首先在外觀菜單下找到小部件:
WordPress – 找到小工具菜單
您可以在此處找到所有可用的小部件部分。根據您使用的主題或模板,您可能只會看到側邊欄或頁腳,或者您可能會看到更全面的選擇,如下所示:
小工具示例
無論如何,您現在需要做的是決定您希望搜索欄出現的位置。
假設您計劃每天發(fā)布新的博客內容,并且知道存檔將快速增長。因此,在每個博客頁面上都有一個搜索欄將是有益的。
滾動到小部件的底部并找到名為“搜索”的小工具:
搜索小工具
您可以通過單擊它并選擇將其添加到哪個部分來添加它,如下所示:
使用下拉菜單添加搜索小工具
或者您可以將小工具拖放到您希望它出現在的部分塊中:
通過拖放添加搜索小工具
一旦你把它放在你想要的地方,給它一個名字:
為您的搜索小工具命名
保存您的更改,然后訪問您的站點以確認它看起來像您希望的那樣:
搜索欄添加到博客
您現在可以看到搜索欄位于博客側邊欄的頂部,可供您的讀者使用。
雖然將搜索欄放在網站始終存在的元素中很有用,但您也可能會找到將其包含在頁面實際內容中的理由。
有幾種方法可以實現這一點:
使用WordPress編輯器
Gutenberg編輯器無疑使設計更具創(chuàng)意的頁面布局變得更加容易,而無需依賴HTML或短代碼。
借助WordPress編輯器,您現在可以添加到頁面中的一個這樣的元素是搜索小部件:
在古騰堡搜索小工具區(qū)塊
使用此選項時,您可以更好地控制搜索欄的顯示方式。例如,您可以更改搜索欄的標題、占位符文本以及按鈕:
使用古騰堡自定義搜??索欄
您甚至可以使用自定義CSS類更改搜索區(qū)塊的樣式。
使用頁面構建器插件
對于那些喜歡使用拖放式頁面構建器插件(如Elementor)的人,您也可以使用您選擇的插件訪問搜索小工具。這個過程類似于你對古騰堡所做的。
打開新頁面或文章并激活Elementor編輯器后,從您的Elements列表中搜索WordPress搜索小工具:
Elementor中的搜索小工具
將搜索元素拖到您希望它出現在頁面上的位置。例如,這是一個404頁面,可幫助用戶通過搜索欄回到正軌:
帶有搜索欄的404頁面示例
如您所見,與Gutenberg相比,頁面構建器插件讓您可以更好地控制WordPress搜索欄的顯示位置,允許您將其分層放置在其他內容之上。
使用主題
在某些情況下,您可能會發(fā)現一個主題和模板會自動向您的網站內容添加搜索。但是,執(zhí)行此操作的主題類型往往是高度專業(yè)化的,例如住宅房地產主題:
住宅房地產主題演示
由于在這些目錄列表網站上搜索可能會變得復雜,因此主題開發(fā)人員將功能構建到模板中是有道理的。
預訂站點主題是另一個已經內置搜索功能的示例,就像這個來自Travel Booking主題的演示:
旅行預訂主題演示
可以想象,將搜索功能內置到您的 WordPress 主題和模板中將省去很多麻煩,而不必自己構建如此復雜的東西。如果主題針對性能進行了優(yōu)化,那么它的搜索引擎解決方案也應該如此(再次,少擔心一件事)。
還有另一種向您的網站添加基本搜索表單的方法,但它要求您熟悉編碼。
為此,請轉到外觀 > 主題編輯器:
主題編輯器
您在這里要做的是使用functions.php主題文件為搜索欄創(chuàng)建一個短代碼:
functions.php主題文件
在文件底部,添加以下代碼片段:
add_shortcode( 'shortcodename', 'get_search_form');
將“shortcodename”替換為您自己的搜索表單名稱。確保全部為小寫,沒有空格、數字或符號。更新文件后,您就可以開始在您的網站上使用短代碼。
下面是一個例子:
用于向您的網站添加搜索欄的自定義短代碼
添加短代碼的方式與將任何常規(guī)文本添加到站點的方式相同。請記住將其括在方括號 [] 中。
雖然您將無法在編輯器中看到搜索欄,但請查看頁面的預覽,您會在網站的前端看到它:
添加了短代碼的搜索欄
盡管這是一個快速編輯,這對本文的目的有好處,但最佳實踐建議永遠不要編輯您的主題代碼,而是創(chuàng)建一個WordPress子主題。
您可以使用許多選項將基本的WordPress搜索功能添加到您的網站。但這足夠了嗎?
除非您有一個非常小的網站或者您想將搜索限制在您的博客上,否則它可能不會。讓我解釋。
WordPress的原生搜索表單會查看您的網頁和博客文章中的以下類型的內容:
可以想象,這對您的用戶來說是非常有限的。首先,如果您需要從網站上的其他類型的頁面或內容(如WooCommerce產品)中檢索結果,基本搜索表單將不會顯示匹配結果。您網站的其他元素也是如此,例如:
WordPress搜索不僅限于顯示的結果。它也受大小限制。您的網站越大,您的數據庫處理結果的難度就越大,向訪問者提供這些結果所需的時間也就越長。
那么,如果您需要比WordPress搜索所允許的更強大和更可持續(xù)的東西怎么辦?
讓我們看看一些可以改進它的方法。
如果以下至少一項適用于您,您應該閱讀有關修復WordPress搜索的下一部分:
準備好潛水了嗎?您可以采取以下6項重要措施來改進WordPress搜索:
與其給訪問者留下一個簡單的搜索欄來幫助他們?yōu)g覽您的網站,不如創(chuàng)建一個自定義搜索頁面呢?
例如在網站菜單中搜索“denim”
您的訪問者并非不熟悉使用搜索,但可以通過專用搜索頁面改善體驗。
要創(chuàng)建自定義頁面,您需要通過FTP或文件管理器后端訪問您的網站。
進入WordPress數據庫后,您將查找以下文件路徑:
/wp-content/themes/[您的主題名稱]/page.php
page.php是一個定義網頁基本結構的文件。換句話說,它是一個頁面模板。我們現在要做的是為您的搜索頁面創(chuàng)建一個模板。
注意:如果您看到名為search.php的文件,請不要管它。該文件規(guī)定了搜索結果頁面的顯示方式,而不是初始搜索頁面。
復制page.php并將新文件命名為searchpage.php。然后,打開它進行編輯。
復制到新文件的page.php代碼示例
這個文件中的大部分代碼都需要替換,因為這里定義了一個典型的網頁或博客文章。相反,您需要將其剝離,以便它只包含您在搜索頁面上需要的內容。這是我如何構建搜索頁面的示例:
Search Our Shop
Welcome to the online shop of awesomeness! Here you will find all kinds of products to revolutionize how you work, live, and play.
Use the search form below to get yourself moving in the right direction.
WordPress Codex提供了更多關于在創(chuàng)建自定義搜索頁面時您可以做什么和不可以做什么的指導。但是,如果您喜歡我將要向您展示的結果,您可能唯一需要更改的是出現在以下內容之間的內容:
和:
保存searchpage.php模板后,返回WordPress。我們現在需要創(chuàng)建一個名為“搜索”的頁面。
給頁面一個標題并打開側邊欄上的“頁面屬性”。您將看到剛剛創(chuàng)建的“搜索頁面”的模板:
已創(chuàng)建搜索頁面模板
選擇搜索模板并發(fā)布頁面。您現在將在實時URL上看到它,它應該是:https://yourdomainname.com/search/。而且,如果您使用了與上面代碼類似的東西,它會生成一個看起來像這樣的頁面:
WordPress 中的自定義搜索頁面示例
創(chuàng)建和發(fā)布此頁面后,您可以隨心所欲。您可以將其添加到您的菜單中或在其他地方鏈接到它。只需確保將鏈接放置在訪問者容易看到的地方。
雖然上述提示為您提供了一個運行WordPress搜索的新位置,但它無助于解決搜索內容類型的問題。對我們來說幸運的是,有許多插件可以解決這個問題。
使用WP擴展搜索升級基本WordPress搜索
如果您只想梳理網站上的更多內容和元數據,那么WP Extended Search是一個不錯的選擇。
WordPress中的WP擴展搜索設置
使用此插件,您的訪問者將能夠從以下位置檢索結果:
這是一個輕量級且易于配置的插件,可提高小型商業(yè)網站和博客的基本搜索功能。
使用Advanced Woo Search升級WooCommerce搜索
如果您有電子商務網站,則可以改用Advanced Woo Search插件。
啟用后,您可以將WooCommerce搜索表單放置在網站上的任何位置。如果您希望它替換現有的所有基本WordPress搜索表單,該插件有一個快速的“Seamless integration”選項,可以自動為您替換它們。
您還可以手動將表單添加為小工具或短代碼。由你決定。
該表單將類似于基本的WordPress表單:
Advanced Woo Search示例
此表格與您之前使用的表格之間有兩個主要區(qū)別。
首先是表單搜索您的WooCommerce產品內容和元數據,包括標題、SKU、摘錄、類別、標簽和ID。
這是第二個區(qū)別:
Advanced Woo Search:實時搜索結果
當您的訪問者開始輸入他們的搜索查詢時,就會出現匹配的結果。這就是所謂的“實時”搜索,由于插件使用了AJAX,它可以立即發(fā)生。
如果這些選項看起來很有希望,但您正在為WordPress搜索表單尋找更強大或更快的升級,請繼續(xù)閱讀。
接下來,讓我們談談您可以采取哪些措施來改善向訪問者顯示搜索結果的方式。
這就是為什么您不能跳過此提示的原因:
搜索結果的默認顯示
默認情況下,WordPress搜索顯示與此頁面類似的結果。頁面頂部會顯示“搜索結果:[關鍵字]”,然后是每個匹配的頁面或文章。如果有特色圖片(如上面的牛仔褲),它將完整顯示。
然后是一段摘錄:
搜索結果顯示大圖和摘錄
這只是一個匹配結果。想象一下,如果有幾個“牛仔”匹配項,更不用說幾十個或數百個匹配項,那么瀏覽這個搜索結果頁面會有多困難。
為了解決這個問題,我們將尋找一個WordPress插件來提供幫助。
使用Ivory Search改善表單外觀
與上面提到的插件一樣,Ivory Search使您可以選擇從中提取哪些類型的內容和元數據搜索結果。但是,有了這個,您不必在基本頁面和發(fā)布數據或電子商務之間做出選擇。您可以在這里選擇垃圾:
Ivory Search設置
關于此插件的另一個值得注意的提示是,它可以讓您與網站的其余部分一起自定義搜索表單:
Ivory Search:在主題定制器中定制設計
您可以控制搜索表單的所有方面:
除此之外,您還可以配置諸如實時AJAX搜索之類的內容,并讓您的訪問者實時查看他們的匹配項:
來自自定義搜索欄的實時搜索結果與Ivory Search
將此插件視為WordPress搜索的下一步。
使用Ajax搜索自定義搜索結果的顯示方式
現在,不僅僅是您的搜索表單的外觀會在您的訪問者身上留下痕跡。您對結果顯示的處理也會影響他們的體驗。
使用Ajax Search Lite和Pro插件,您將真正為他們帶來更智能、更快速的搜索體驗。
以下是一些您可以執(zhí)行的操作的示例:
Ajax搜索插件:搜索行為
Behaviors使訪問者的搜索體驗更加高效,例如在他們開始輸入時立即打開搜索表單并將他們重定向到搜索結果,無論他們是點擊返回鍵還是放大鏡圖標。
Ajax搜索插件:自動完成和建議
自動完成和建議利用Google搜索功能來加快訪問者的搜索速度。
Ajax搜索插件:關鍵字高亮
關鍵字突出顯示是另一個有用的功能,可以在匹配結果中突出顯示用戶的關鍵字。這使得更容易發(fā)現更相關的結果。
這是一個可能如何顯示的示例:
搜索結果中突出顯示的關鍵字
該插件還使您能夠指定結果的準確顯示方式:結果頁面的布局方式以及應顯示哪些元素(如特色圖片 + 摘錄 + 作者姓名)。
此外,您可以告訴搜索引擎從某個地方提取圖像。例如,如果特色圖片不可用,您可以請求在搜索結果中使用頁面上的第一張圖片。
您還可以決定每個圖像的裁剪方式和大小。通過這種方式,您可以使搜索結果頁面的大小和外觀更易于管理——隨著網站內容量的增加,這一點變得尤為重要。
還有一件事:這個插件不僅可以幫助您使搜索結果看起來更好。它也加快了他們在您的訪客面前的速度:
Ajax搜索插件:性能優(yōu)化以加快搜索速度
您可以在此插件中進行三項性能優(yōu)化:
通過配置這三個設置,您可以幫助您的Web服務器不會被連續(xù)的搜索請求淹沒。
也就是說,這只是優(yōu)化WordPress搜索速度的冰山一角。
雖然WordPress搜索表單的外觀和搜索功能很重要,但它發(fā)生的速度也很重要。
使用Elasticsearch獲得超快速和復雜的搜索功能
在某個時候,WordPress搜索插件和您的MySQL數據庫將不再適用。當您網站的搜索查詢激增時,確保最佳搜索體驗的唯一方法是使用Elasticsearch。
Elasticsearch是一種開源搜索和分析引擎,以其速度、穩(wěn)定性和可擴展性而聞名——它只是Elastic堆棧的一部分。當與Logstash(用于數據處理)和Kibana(用于數據可視化和管理)結合使用時,Elasticsearch以您以前從未見過的方式為您網站的搜索引擎提供支持:
盡管Elasticsearch是開源的并且可以免費使用,但您需要為其托管Elasticsearch托管(這不是免費的)。您可以通過多種方式獲得此信息:
1. ElasticPress
ElasticPress插件使您能夠將ElasticPress搜索功能無縫集成到您的WordPress站點中。此插件是一種流行的解決方案,可與為Elasticsearch提供支持的WordPress主機集成。
ElasticPress設置
2. Elastic
如果你愿意,你可以直接去源碼:Elastic。您也有幾個選項可以部署搜索引擎。
您可以獲得完整的堆棧并利用其先進的數據處理和管理工具。這是設置和入職流程的一部分:
Elastic:全棧部署配置
更重要的是,您可以控制如何優(yōu)化Elasticsearch服務器:
在Elastic中選擇部署優(yōu)化
建議是根據您的網站將處理的查詢類型提供的,這使得您可以輕松決定如何最好地加速和增強您的搜索引擎。
如果您想簡化設置,請改用Elastic的站點搜索工具:
Elastic Site搜索儀表盤
然后,您將進入此儀表板,在您的網站被編入索引后,您可以:
它不像Elastic Stack那樣強大,但如果您只是在尋找易于實施和管理的高性能搜索,這是一個很好的選擇。
3. Amazon Elasticsearch
Amazon擁有自己的Elasticsearch服務也就不足為奇了。如果您已經在使用AWS托管和部署服務,這對您來說將是一個不錯的選擇。
與上述選項類似,它是一項托管服務,可讓您為您的網站創(chuàng)建具有復雜查詢功能的快速搜索引擎。
另一種優(yōu)化WordPress搜索速度的方法是緩存搜索結果。通過啟用緩存,您的服務器將不必一遍又一遍地持續(xù)處理相同的查詢。相反,它將檢索并顯示靜態(tài)搜索結果頁面,為訪問者提供近乎即時的結果。
啟用緩存的一種方法是使用WordPress緩存插件。
最受好評的插件之一W3 Total Cache引起了人們對搜索結果頁面緩存的關注,因此如果您正在尋找一種優(yōu)先考慮您需要的性能優(yōu)化類型的緩存解決方案,請從那里開始。
或者你可以試試WP Rocket。雖然默認情況下它不緩存搜索結果頁面,但它創(chuàng)建了緩存搜索結果幫助器插件來實現這一確切目的。
啟用此功能的另一種方法是使用前面提到的Ajax Search Pro插件。我已經向您展示了Lite版本插件優(yōu)化搜索性能的幾種方法。Pro版本增加了更多優(yōu)化,包括圖像預緩存和搜索短語緩存。
最后但并非最不重要的一點,請記住在Google Analytics中激活搜索跟蹤。您可以在“管理”>“所有網站數據”>“查看設置”下找到它。
在Google Analytics中激活搜索跟蹤
要打開現場搜索跟蹤,請將開關切換到“ON”。這將顯示一個名為“查詢參數”的新字段。這是您的 URL(和數據庫)中定義搜索查詢和結果的元素。
Google Analytics的搜索參數
在這種情況下,字母“s”定義了網站上的搜索查詢。如果您不確定自己的搜索參數是什么,請運行測試搜索并找到問號后面的字母或單詞。
如果您的搜索允許訪問者選擇類別和過濾器,您也可以啟用站點搜索類別。您可能需要在此處指明多個參數。
在Google Analytics中完成搜索設置后,您將能夠在“行為”>“站點搜索”下找到您的所有數據。
Google Analytics中的站點搜索數據
就像谷歌分析的其他部分一樣,這些數據為您提供了大量的機會來弄清楚:
密切關注訪問者使用搜索進行的操作,您可以更有效地為他們塑造其余的現場體驗。
WordPress搜索可能看起來很簡單——如果您只需要一個基本的搜索功能來幫助訪問者瀏覽十幾個頁面。
您可以向網站上的多個區(qū)域添加簡單的WordPress搜索功能,例如頁眉、菜單、側邊欄、頁腳,甚至與您的內容一致。您也可以通過多種方式添加這些搜索元素:
不要忘記:您的網站越大,導航變得越復雜,您就越需要一個解決方案來增強WordPress搜索功能,以便為訪問者提供更好的用戶體驗。大多數時候,更好的用戶體驗會為您帶來更多的轉化。此外,您還可以使用SearchWP改進WordPress搜索。
更多關于WordPress搜索的技巧和教程: