強化 WordPress 搜尋功能 – Search & Filter + Toolset Types

有朋友詢問小蛙 WordPress 的搜尋能否加入其他的條件設定,也就是一般我們理解的進階檢索,而不是只有單一搜尋框的搜尋方式,這篇文章記錄怎麼透過外掛來做到這件事情。

目的

WordPress 本身提供了一個基本搜尋框,有點像 Google 一樣,單一搜尋框就可以搜尋任何你想要搜尋的字,簡單明瞭,但是有些情況下希望可以讓使用者作更多方面的搜尋,例如:在某些文章中加入特定屬性,搜尋的時候可以透過這些屬性來進行二次過濾。這樣講可能有點籠統,這邊舉一個實際的例子來運用。

假設現在有一個旅遊景點的網站,小蛙可能會希望除了景點之外還能做其他搜尋,像搜尋臺北,理所當然列出了所有包含「臺北」的內容,但有些時候使用者希望限縮搜尋條件「臺北市裡面的汐止區跟北投區」的結果,或是條件可以自己換「臺北市的名勝古蹟或海水浴場」 … 等,透過兩個外掛的合作就可以做到這件事情。

安裝所需外掛

Toolset Types 外掛

點我開啟外掛連結。

這個外掛小蛙是最近才發現的,他非常方便,可以額外透過 taxonomy 的方式,附加更多屬性(or 分類)到文章上,他還有很多其他功能,但小蛙在這邊只有用到分類的部份,如上面的例子,小蛙想要在「分類」的部份加入臺北市,然後透過 Toolset Types 往下細分臺北市/新北市的各區。

安裝好外掛後,點選 Toolset -> 分類

小蛙新增了一個新的分類叫做地點,新增的時候會有很多選項,除非有特殊需求或是看得懂設定的意思,不然小蛙是直接用預設

新增完之後可以發現,文章的選單下面多了一個「地點」的選項

進入「地點」選項之後可以開始建立自己要增加的選項

建立好地點之後,便可以開始寫文章了,文章的版面也同樣此時出現了「地點」的選項,如此一來就可以讓文章有「臺北市的分類」又可以有「南港的地點(taxonomy)」

到這邊前置作業就完成了,接下來開始設定 Search 部份。

Search & Filter 外掛

點我開啟外掛連結。點我開啟教學文件。

Search & Filter 是一個非常強大的外掛,有免費版本跟付費版本,小蛙這邊只會使用到免費功能,他可以直接透過 shortcode 的方式在自己想要的地方插入搜尋功能,而且這個搜尋功能不只是基本的搜尋框,可以在搜尋框上附加上其他屬性,例如文章類型、文章分類、taxonomy … 等,這些都是 WordPress 預設沒有的,立馬開始吧!

基本語法大概是長這樣

[searchandfilter fields="search,category,post_tag"]

fields 是要產生搜尋的類型,search 是基本搜尋框、category 是分類,post_tag 是文章標籤,這邊可以看到更多其他可用欄位,都是以一段 shortcode 配上一張結果圖片的方式來介紹用法。

還可以將下拉選單 (select) 換成單選 (radio) 或是多選 (checkbox),真的是一個非常方便且實用的外掛。除非有特殊需求,不然 Search & Filter 的基本功能就已經非常強大了。

測試的方式可以直接把 shortcode 放進文章裡,或者也可以從外觀 -> 小工具 -> 自訂 HTML

[searchandfilter fields="search,category,place"  types=",select,checkbox" headings=",分類,地區" operators=",,or" show_count=",1,1"]

小蛙需要搜尋框、分類(顯示縣市的)以及 place taxonomy(顯示地區的),分別是用輸入框、下拉選單、跟多選框來呈現,並切加入分類、地區等標籤,重點是後面這個 operators,這個讓你可以選擇要用 and 或是 or 運算,這個的差別在於如果小蛙選擇了「臺北市」,而地區部份為多選,當使用 and 的情況下,選了「信義」跟「南港」就必須有一個地點同時是信義也同時是南港,才會被搜尋出來,這樣子就不太符合小蛙需求,因為不會有一個地方同時在南港,又同時在信義,這時候就必須多一個 operators 來設定成 or,如此一來輸出條件就變成,符合臺北市信義區或是臺北市南港區的景點,這樣才符合小蛙的需求。而 show_count 就是要不要顯示文章數量,1 是顯示 0 是不顯示。

基本上到這邊應該都能正常運作了,不過小蛙收到的需求是希望可以把多選框改成類似標籤 (tag) 的方式呈現。在剛剛的自訂 HTML 小工具中修改一下內容,看看成果,Search & Filter + Toolset Types 真的是非常方便!

WordPress 5.0 系列:

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。