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

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

目的

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

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

安裝所需外掛

Toolset Types 外掛

點我開啟外掛連結。

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

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

2TNCPaqxhC5xA6S60MO6CqrvBxQRoIDMsER5ZDfXnnXn B utHzBfZVkCxYHelWg5JO RRTAtnANpzmNBi9FyfXwIEdZuRICPFzmny VV2 kyQJ99XB4v1v1GlpI41sDHPKZ 5YTQaKW es8QrKe 5mPBYLCr3RAfG9UySRqBbdb3UK91mtPi7PHSYd hejW13ur4T4gbw F8yhGAKwTLf0j1PUNnT25kqr974imZwb6ossD5IUd7m9bpfG0xTmVd4NW6 caXY1R0HHrzqaTZTvkE0BTPC8TiCN1xQRcdeLtFWY79Q293Vd94CYlEZklO4qQ4a52YZgwM6HF nc3hATyykcONypzzbTYoDlc2W29D3Ap6OYpFMagfQng18gtomvy64LDiT4UWtCDAA5YPpzAVRci9LncsYmt6ii8LZaq9PbJAENRdqOtsWxlGkZ892MmDslqQUOdt8Dxm7Oc0Zhz7Vp0JPhmoAu4kepeJweK iBWfEtIXdK2SacP7UsveOHHRn57c0FN5AmhFv82jEeIcBrzgqetXs3GCliRy280sJ1SdtNzAbidFSjCy5tZl5N2qRGj81LI307I3gky4OOkXJ8PMM56XzQ4y CyCHUnsKLXZYVz 32hLRIlNqZVOwfGaqRlmRMGH3pxb9Js9BXvRQ=w361 h273 no 強化 WordPress 搜尋功能 - Search & Filter + Toolset Types

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

x6dSuYNjKOB0 rZZchMV4we5gJ0rSmltxaxxYDpkjN4gZjnI8oveCrZMXceOnaFTr9e5hJFoge mluu0miVyHeBkGowOqT6xt14fv60mdHfUmaiLFIFoNFLGew4vmrXx0knUWv6m7X RvrMulj09pNV2quebnSll6IYYWUcavSNqYFIMeNEBuBks5w XCAlDGjRlVODwAGkvVjk6zWjHf5QVVc0s39tOymmBX40Z86 ZZtoQScx 24PYsFBsZXgViG jKI0enIIB9ynhrS jyQs QaPvF7uM430hGvE hz0 JtN85t uRtcn9KlTh78iHw0Ug8hDHUpg ka9 kjtAU91d wtr8rN34RBgrzYJlfP3 BwOlj56SZcLVT95etinVu1fM5OlfY2RAwnSHUMkN 58RT6fcZjItEan18lUIwoiKgVGwXEsY viud9vgPk9KQJ9 dSfGrtE rHf3zW5GYwi9XtwRemkdHWYxBaNLw0N0ia8F6ygSwuaWtYMhmpa9arVIheR77NAS9j9ieJR NEUDCfHu0OiLfrZeT4S dNGcEQtcmjDyqrhzZrgd9RwiDKGeAQWK99I1WxKFOqbUNhmFQ1Jzzfw0oUeN2 zqd6nfxpPoaEqefjNeeVZs4T9z9PYtW6Y5ZNUKXq6nt5x1Zmw=w680 h282 no 強化 WordPress 搜尋功能 - Search & Filter + Toolset Types

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

wG9tdbin99C2Y0fxpeXbM57G3QuUhQOckrL8XwcCg0RL6qbx9AJaaPpR 3cMv 94IP6rhdcS wGbErb213lq2Zg9W GtFp00MqBlnk1VavqCsCbi48SZwlgr1VEMbvEj kUL2 O4kgGi1mCYjRxe6UImAskCdcqD HEYGmqd75un7ZPUx5cJbNpUVomhLZlED6i30b vjcA3G3sryxPvlncSHdLjJCK ZN ACjnjnN1JMfn0iR0ikcbwmQYM8C7U 9VDJYx9rX aLDsHw8V7vTpI zLpgF6fiA TuPcEHNmjxuME8tYFJLzGr aFs ZTRynlWODc2t70tWQ3QL iJbKNYyWhZva1ylNlLlv6 uACncDAfICCIsQYfzWqCIW362gvC 0Mup6tLr1fk C7hIpVjN yRyYuh3efueGz2 fz2eeddpWA2q AArMl9KxBCLwc48nHqqgcUp7RUdEAXiKYMITaO9Wf53EjrCTZ1ESKXlJi5aachdIzKFddtRg2svcQUl08Ibcm78swmFsKxJTnfm8DYaN1c9XEH fDBPOEzTyFgr EpvPTM2CMh87a8QLKWGNVoM9wKd7cFDHgN HdYdWXgLNikQQ Uc2vVbBDpmyGSUXbxwtYJ1XA7eIZ2RpZF9RRq5zhGRWWEBlowfygqw=w358 h206 no 強化 WordPress 搜尋功能 - Search & Filter + Toolset Types

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

ToVXqBab bYD0UlMByf25jl7SuGf1fc BAYmkbVuDVEEQG5DeEHxoaHW5NVXBkjWfnnUgJ4wJzpFsUWNDuRJw99OfUnvpVV7yt3q3iLx ivkHtOqjndkfZ6GGPy3bnkmJlgxdBG1bvl1W92EgdpEHh9mFdJW b5yyU3lK0BZDjdCqX u8NADjtUeLU T jOcM4YLBT0kzhLyUb5xjTkBDgi0J44rpqokPJwrqUkkDSjEalLJdrtuIB0U KbEBK6YUA1zzyP5aIjghEoz7sN2DUGyQ 1B5PPJ pR96rdYynlPz0f95s3GFHC2YFH1cbQaqmXj1nZkJcHAFW7T52RdmqVWZaeuXc2AlW8Vrql4Esv1FrEySoD5kwbMqHGh1Nzu07HMgK1z3gk1pIM0Ep2TprzVsFoazp9T OG3f6BwHknvMgn0IcmQktPerBzXSaoq3x EIW5hYHdnABpML4m0bykN9m9B4FVBEfQhYulOjVivX2QMxII fu2XYnCJyVtEL TsmTNZJ KCRyRmzXRlfOLMKP0ls3cXn0cw8X89APW5MBAPIUYl25OmIGwi7EPtX3uh Z5G0yMllJ6UBL0yWKgEJ2SX0 6HsomgEtmHkmCszmazp7BE6SVD512jFrxToiJm0 l2 kQaOnR5pAEk CA=w864 h747 no 強化 WordPress 搜尋功能 - Search & Filter + Toolset Types

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

JqHv AVR6NVuPNSw3WggtfGRWAa1PskUqPZpZ3rSfSjlG3FKRR72au1VumUqMKVlLni pcNL87mHKViTd0LxG41 Bs1p9jJiwFP rGCcizTd2Jn3RtknGk6mOf3leP6oESt2PlOHh86C7aifKN 5jAbMfAMTXTJ0X50F20eSCfPmXlhErEENvVoFK8iDSQff9YNswTbFG3DZapqKOUfaeLOi K5yf 2aN3cG3yIR56SnxVe7JwJtaFNnws9czdbtohq1cTkXce e84t6vZ4dzoC7kTaFBEjFVyMJPuAWQ9LFxF2hb0j5m6ZUO333d9XHK8A3AcozYo9V4D3N0XK4uSDpepsPdniUTH8sDnfBUhT302S 9b8u4RIHQcFpUG6abdgvAm1908eUu5o2Hah4zuHLfXVHDHdLvdsmvQTqMnRSif2NY Cqv11NAHHSWqRsdIb8nfx50jbLzkejPiPj uO6T7uHvF8ZlbazV1obBIWWbxgnKPAm50ryHsnOx7jQBX uVKZXGgpNOe Ki2lNAKnort5K96l7b5dbI7BIbmq7tJh4qbGBZNLQ71M7WZjy6o9CaPlh2ZmzhlawrXw V M6oL LAoAYNUrmtFFffAIGcqrpVdV9bjCeaiOYfHQazETzg1u SF2UpLV7waNBxcg=w923 h708 no 強化 WordPress 搜尋功能 - Search & Filter + Toolset Types

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

Search & Filter 外掛

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

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

基本語法大概是長這樣

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

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

cqciNhjVtP3bpO XeVRiji VB32p7kV COMLVRI9qP lNJ xJBg91bO0uaQWDGJOrjUg1TbimNG2KIZu89Ap3rlg4VMG5MOQl36jgWCl1I4YVA6KlCkGPeeThXYgMFjmer2dfh C K4mHUIwsEoK6dvBVOYWObj6PHn1p51ezOHdw1u 5hRkR4Ogt6IjiH9uA3SO6KK6U rsEGeESjq6Fdz7 Maieg2nQLR1MSCC 5LvswGRvZcoCS7E Z31EMxpCl1tiIn56mKYAeN7qESZUygaDtfiUGBKXq8ABF MR4U2Fz5lAhzVoSIaxxGmm fc5Lg7tKdCVo2n5IU vl0Q932BC2MikUQbhPbwLiD9T6g93Rz2NemzpWmWklJfWNGxPZuHestb5X1T0UiaaaR4hNKulfXPz4EIQNAKbAEfBD9S5 GPmKPhtmJUKC2I1zqb9JiX5DcoToc1Htn4SLHovmz8zZGNoMZYXBrA2bwzp0WF7nAS0eGjcMglQL1T tATQz 6rxS5ybp5qPiV8OvCsWL6 FXxyiHJjVodoyyfuaRPniY7QsxC D v3xEIj 0JDryA7Uk4AYGJr194BbRARt29JUxxbEIjil nq29b1OEQpNnvq3oXn7GAxTFbKh14KKkzLzTKVD 9 xjbdIOR72FQ=w603 h490 no 強化 WordPress 搜尋功能 - Search & Filter + Toolset Types

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

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

lqA6Vdi5abUmo3nCha48nxbrxopHfIs5Oyp63v01KueBWyCEWgY rF X7uerX7TvuOOtqlNbGIqHnVWJlrPpLa9Xaj1gchs1M9uC1Dx1sny0ULjKK6tVA2dEH5kk0iVCuJflPoQ2bRyHq786RY SgD5y9hsDOXdPiGABv6z1p FozTRuucQw6tUYNBeQ9f5 Zrzmoowxx5iceNzsb29iz9dYNsYd6Y6Z4oLvjx4IOtoTOIeKkpMXOYzYh5eQ0YYigbG03o hyKhrv3vAqarBCmR50a7EUjVnU2S9jhGIj8jzH12ouk fXn3xejEkWd1bD8qqA4gKxTGlmLO4f3oJxKH8Gmh9jufPPk9Hwxe4aNIFIVss66ppbPJkV7n2AMqhi8qvcdvoW2PfYGLbo3vYXxiIUYmJvCpP04y6GA2HDG5HUwd0SK35NR 2KDoZo7krQEQ 9CSPoPPsOwGtQoFlC8v2jFRyDpwvcEbSkSXaVXkHpH5PTThkgSFEcajAOp5JCopyTq84CSYC ov0fkItVuQWwS pJhaTBjRP OfNEA SOjMMyF2Zmwrr5yZdzBB 74W6i21nKxW7zmDGPJaj 2cvjEl qIHob5rw euUtQM1fuvRJMzTNNeeNUcvBNhn6ZF8u0oi8 8ZLpTp0ITWn53x6Q=w320 h241 no 強化 WordPress 搜尋功能 - Search & Filter + Toolset Types
pMQyAOOx5 nswzJZVA8Avus45Koy0pfDEiURB0v6qHCgbjfCkKzQU5FliNG494RVsizdQmatzd6GOAG1LNUHJXQlZ7ZSS93paaYxJw0ZY69xVgvGrMAYM3jmHaRoES3kS Upo6BL738GvKhNPsL1626RySnU2hjjcfAucYRm0OIY7fg89QUxVpOnFcIgUcl69lcZzsv2fZdzR71xa6CBHBvrTgXI3e5NW pTRTBX6UBRpp NwXgy8dpe34WHTdXsqOSuQacJi6E9UjRxAwVOzsHTdODb 2lzkFtMRIt8s RPnNFHDOsun6m4ypQqF58IS9OQgP6uHoqlt5Qv0YuzCAb ID6JMa0ivJ5kBPjIh gIb8mc2KGJrGTua0Rb6ypvw ZYGPuoaj KgTAZrKoMCo4KTPfClFFzfS6uaFQ62A4 TnlhGRbZcxpy6qrKo8eF0gTEAdet5dIy2dFsHH cs6wIzPo8z tTFIlgqVCWqCQge6Sh5vHMVACNMmx9FQ8cTJa4Kn2BmQqHbjWo Is9MbjlG RKY7nn8ohYgH3H4rG116FRjXEmH4UuPbRLpTtPXI5mzgHiy C2eFCZsgJNulzTK2xdwJUAC5YZaZR45KbEEBIlA2MHOAhcBUWQpiigd6mvocaGC7Eq 4hB8nF1zmkgQ=w438 h517 no 強化 WordPress 搜尋功能 - Search & Filter + Toolset Types
[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 是不顯示。

n8MvUQzggcuLc6bzXGS0HozBkNr Hkx6IuZkBuLO8w0cjmRvPpijPphn3DVwYz9uqCD UQLS SLa2uETtR3L8rWwam2cfmsqiKyfwm5bcVwUeOvK3uXauiczyuRS mZLl3mqDUCPZ3C1kv2gdOxi2ZJLLIzO9ej1udvIN3UzWS LaUBykPLuwWV4TsSb3YnKtEnnl LkvGXwG C5 dawPYeQqhNMmsL2YK1kpKzDpZk4iQb5PDda3WlhzJl8bOCib6P Ky7lE X5wgX88K5tLwNNwIAqoDo6GxGWi6 W2kbz2UHNjPvzzB5nPJSFuD9xTD3epLlz5YeXQeHOqaHaVyIdmmo8tGiwvzQJl xttkw Ox5jB4sJpYzrWDSxs4KGcBSWjAyPzg3ATg2z5lvwkw49WXu5lFARzbJWBbXdt6w2X28JY4cIpHSJr7gD9uKUVf dEPumFYGs4GJP2fN ust 8oMwkVZ1LISnddtf8m067H1btpx 1I3hsdncLa1Vistawum1huVmGI48K75hxNql1sYjr 9ffR2v7ox73cVFIBY goVn rYZSO23JXJ8W40dtMo0ZIRl32SuRpMkSrWU0WYXsVdzcubBQaiccRA8nquT 95FwbPIY90nVNZS4JAKbJ3E7EtSpSZdITTAkLS3Q=w354 h480 no 強化 WordPress 搜尋功能 - Search & Filter + Toolset Types

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

hEwjZHIuWaVUol4scWxs2lWlnm7C1dVPoS0G2FeGzUUyPBJkZawhYTpdHSv6ijdRiC0KFaHs6UIxn2W 0hN28 L95CKCX0h2xEnrnWwyzMvqG6NurnE1iHhmju4fy1oFwywWEWJExaVRqXRbaJB5W PN0D7g lrvHD D0URxcjywx7sCfGBZkdfyWQnZP9RhJj X8ZOhU2pkDVMkQJfynmGwhclV1398 yCjR6q9aTkdKleAGh U82AQBpNn0bHlhw7jqV5H8oq rRVfi7xAFHg eztGX7f0hJKLsMqpMNZyMyFge4fe23aVNeIN4FY0Kt0KTn2sKNGqVflyHcxPZL3IPnD9 DHQARZio2LquKq8zEgKNIRu8T8IzvUvLClVyqHTM7sI2z7OTgVtXwdWA01OVJd3RpPCOYrupk8NwAAa3kiR88pAW 4w5Hsqqf7PdTzv3YvHupKYlDzjFBtDSkx7Bs EcsS3ja2SubZ6shnExYVNbw9zMkOTRwf0 Br3DlLD0SccaLknLlF6G8R7Bnw2LJmO1CuHDJJ7gkhb7RNaVz4rrG3fbcsm22wJF2tXMrW4y3qk8nXjMkDZRseqynRS yhu68eFUL hae HNiV79396DJb1mxmuT SfIwoqHa0qTe2WdcWb0pEyO0 t98OQ=w352 h382 no 強化 WordPress 搜尋功能 - Search & Filter + Toolset Types

WordPress 5.0 系列:

    2 個回應

    1. 匿名訪客表示:

      感謝教學 很實用!!

    發佈留言

    發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

    這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料