簡介

當我們在逛一些購物網頁或是有許多項目要瀏覽常需要使用到搜尋功能或是更進一步的搜尋分類項目，網頁有了這個功能會讓使用者在操作上可以更快速的找到想要看的東西，在使用體驗上可以更加分。那這篇我們基於WP的環境中加入搜尋與篩選器的功能。

前置作業

安裝外掛
當然第一步是要按裝 “Search & Filter” 外掛，如下圖。安裝好Active Now之後我們先放著，我們來新增一些”Category“與”Post“，用意是在搜尋時可以找到Category中的某篇文章。

新增Category
我們先新增Post的資料夾Category，先點左側Post裡面的Category，並在下圖紅色大框框處填上Name(Category名稱)，下方欄位可看使用者自己需不需要而新增內容。在這我們先新增三個類別，新增好的類別會出現在右方紅色箭頭處的表格中。

新增數個Post
有了Category後就可以新增Post了，如下圖有兩個地方可以新增，一個是左側Post->Add New，或是在Post頁面中，上方的Add New按鈕。

進入了頁面可以新增你想要新增的文章內容，這邊要注意到的是下圖右側括號處，這邊是指定你的文章要附屬在哪個Category中，都完成後就Public (公開發布文章)，在下圖的右上方按鈕。

Search & Filter Setting

我們可以先到Plugin頁面找到剛剛安裝好的外掛，並看到Settings可以看到完整的該外掛介紹。如下圖，但我們這邊先講比較重要的東西，要如何使用。就是複製WP專屬的ShortCode貼在Page中想要的位置，下面會介紹幾種(我看得比較順眼的)Type的Search & Filter。

加入Page

上述項目都設定好之後，就可以把Search & Filter嵌入我們的網頁Page中。

貼上ShortCode，儲存網頁後，可以按下Preview看看你的先前動作有沒有完成，如下圖，就完成了。

Reference: http://docs.designsandcode.com/search-filter/#examples