這篇文章最後更新日期:2024 年 1 月 1 日
作者: Mack Chan
在不少中介或分類網站,你不難發現都提供一些簡易「篩選條件」的表格供瀏覽者快取找到合適的內容,例如一個房地產網站,你可以依據物業的地理位置、物業的價格、房地產發展商、房間間格、附近的公共設施和交通配套等的因素,去選擇合適你的參考資料。
✅ VK Filter Search Pro 房地產篩選表格案例:
前往參考案例網站
下方教學會快速讓你了解如果透過 VK Filter Search Pro 外掛製作一個具有篩選功能的頁面,我們可以輕鬆透過 WordPress 區塊編輯器 呼喚出相關的功能,預設的狀態就能使用,當然你可以微調和增減部分功能設定。
✅ 相關網站連結:
VK Filter Search 免費版
VK Filter Search Pro 付費版
VK Filter Search Pro:How to Add Forms
你將會學習得到以下知識和技能:
- 如何 [新增] VK Filter Search Pro 區塊 (Block)
- 如何 [調整] VK Filter Search Pro 外掛設定
如何新增 VK Filter Search Pro 區塊 (Block)?
步驟一:
在新段落區塊中輸入 /VK 並按下 Enter 鍵,以快速新增 VK Filter Search Pro 區塊,點擊圖中區塊即可。
標準的 VK Filter Search Pro 區塊
官方預設標準的 VK Filter Search Pro 區塊包含這 4 個組成部分,你可以自由新增或移除個別部分,點擊每個部位,在右方的 [區塊設定] 可以調整更細部的選項。
區域一:
分類 (Category) 是較常用的篩選條件,直接了當地說明了搜尋的大方向。
區域二:
標籤 (Tag) 未必每位站長和作者都有填寫,但這類標籤提供更仔細和深入的描述條件。
區域三:
關鍵字 (Keyword) 是依賴 WordPress 原生的搜尋功能,是最萬用和簡單的搜尋條件,但如果網站的文章數量不足,會發生沒有可以查詢的內容。
區域四:
點擊 [Search / 搜尋] 可以開始搜尋和呈現結果,如果不滿意「Search」這個字詞,可以在區塊設定 Submit Text 裡調整,例如名為「搜索」或「開始搜尋」。
從「清單檢視」分析結構
善用區塊編輯器的 WordPress 清單檢視 功能,你可以拆解這個組合區塊是由 3 個小區塊組成,分別是關鍵字、分類和標籤區塊。
允許微調區塊次序和排版
VK Filter Search Pro 允許你自由調整排版和位置,你怎至可以調整在不同裝置時的大小比例,寬度例如 [全寬]、[1/2] 或 [1/3] 也是沒問題,這代表可以設定在電腦瀏覽時是 [1/2],但手機卻是 [全寬] 比例。
自由組合不同的篩選條件
這個建基於你是使用 免費版 還是 付費版 的服務,能夠新增的功能會不同,功能傍邊有一個 [Pro] 代表是付費版功能,優先建議使用免費版,如認為不足夠時才考慮升級外掛,因為標準版已經很足夠大部分使用情景。
你可以自由組合不同的篩選條件,客製作你滿意的篩選器,不妨參考下方的案例,可以啟發你更多的可能性。
✅ VK Filter Search Pro 房地產篩選表格案例:
前往參考案例網站
區塊設定:內容類型 (Post Type)
比較進階的 WordPress 用戶,應該都知道 WordPress 的內容類型主要分成兩種,分別是文章 (Post) 和頁面 (Page),這個選項可以讓你設定搜尋的範圍,如沒有特定考量,選擇預設的 [任何類型 / Any] 即可。
區塊設定:進階調整
區域一:
推薦打開「Display this form on search result page」,這代表當訪客搜尋之後,這個篩選表格仍然一直置頂於頁面上方,訪客發現結果不對時,可以立即重新執行搜尋的動作。
區域二:
打勾這個選項,在一些 WordPress 預設的彙整頁面上方,也會出現這份篩選表格。
區域三:
篩選表格的搜尋按鈕,官方預設值字串是「Search」,如果希望改成中文,請在這裡輸入「搜尋」或相關同義詞。
區塊設定:附加的 CSS 類別
區域一:附加的 CSS 類別
進階面板讓你將 CSS 類別新增至區塊,以便編寫自訂 CSS,並視需要設定區塊樣式,建議具備 CSS 程式碼的基本知識後再使用此功能。
✅ 需要協助?了解如何 自訂義 CSS 樣式
預覽 VK Filter Search Pro 表格
在沒有任何修改 CSS 語法之後,外掛會取用你的 WordPress 佈景主題 裡的 CSS 樣式,一般外觀不會和網站產生太大衝突,如果需要改變按鈕和欄位的外觀,你需要透過 自訂 CSS 外掛 來處理。
搜尋之後的內容呈現效果
最終呈現的效果跟你預設的 最新文章 效果相似,不過是依據使用者提供的關鍵字、分類和標籤進行有系統的排序,這樣的好處是大大節省使用的搜尋時間和成本。
常見問題 FAQ
閱讀完以上教學,你將會學習得到以下知識和技能:
1. 如何 [新增] VK Filter Search Pro 區塊 (Block)
2. 如何 [調整] VK Filter Search Pro 外掛設定
我需要升級 VK Filter Search Pro 付費版嗎?
免費版的 VK Filter Search 外掛足夠滿足一般網站使用者和經營者,包含非常實用的關鍵字搜尋區塊 (Keyword Search Block),適用於顯示文章 (Post)、頁面 (Page) 和自訂內容類型 (Custom Post Type) 的搜尋結果。
參考資料和引用文獻:
- 比較完整免費版 vs 付費版差異?
- VK Filter Search 免費版
- VK Filter Search Pro 付費版
- WordPress 官方網站主站 (英語)
- WordPress 官方網站分站 (繁體中文)
- WordPress 官方外掛 (Plugin) 目錄
- WordPress.com 官方教學 | 安裝外掛程式
- Learn WordPress:Choosing and Installing a Plugin
- Themeisle:How to Install a WordPress Plugin
- Kinsta:How to Install WordPress Plugins
- Astra:How to Install WordPress Plugins
- Namecheap:A Quick look at the WordPress Plugins Tutorial
- SiteGround:How to Install WordPress Plugins
- HubSpot:How to Install, Add, and Use WordPress Plugins
- 維基百科:WordPress 是什麼?
- 網站迷谷:區塊編輯器
- 網站迷谷:傳統編輯器
我們提供市場上最新的網站架設
新聞、教學和相關知識,我們不會向用戶
發送垃圾和推廣內容,而你可以隨時「取消訂閱」。
WordPress 學員人數
15,000+ 人 (持續增加之中)