postgrid

如何在頁面顯示不同分類文章-利用The Post Grid做文章類別篩選器

假如你的部落格有很多分類類別,但是你又不希望將每個分類都做一個頁面出來,這時透過簡單的”文章類別篩選器“,所有文章都可以出現在同一頁面中,並且可以直接透過類別去做文章類別篩選。

今天就來教大家如何使用 The Post Grid 這款外掛,讓你可以直接在同一個頁面中,透過點選類別就只會出現那一類別的文章。

在下方輸入你的名字跟信箱,就可以獲得 Kevin 獨家推薦的 WordPress 外掛清單,未來有最新的 WordPress 相關文章或是優惠也會及時通知你喔!

.

什麼是文章類別篩選器?

postgrid8

上圖為 Kevin 利用 Post Grid 做出的文章篩選器截圖,顧名思義就是利用文章類別去做篩選。

在最上方,你可以看見許多不同分類(圖像設計、外掛推薦……),當我點選圖像設計,就只會出現圖像設計相關文章;同理,當我點選外掛推薦就只會出現外掛推薦相關文章。

使用The Post Grid做出文章類別篩選器

安裝外掛

首先到 WordPress 外掛,輸入 The Post Grid 外掛並安裝,完成後啟用,你會看見左側選單出現 The Post Grid。

postgrid
postgrid2

點擊進去後,點選Add New Grid開始創建自己的文章類別篩選器。

postgrid3

The Post Grid 設定四大步驟

STEP 1:文章資源(Post Source)

Post Source 中你可以自己幫文章類別篩選器創一個標題,接著 Post Type 選擇 post

postgrid4

接著往下看進階篩選( Advance filter options ),Category可以將你所有想放入篩選器類別大標題選入(這邊的類別必須自己到 文章>分類 創建)。

Relation 跟 Order Setting 就看你要怎麼呈現你的篩選器,我這裡是利用日期去做排序。

postgrid6
postgrid7

STEP 2:篩選器外觀設定(Layout Setting)

這裡請選擇 Isotope LayoutShow all text 打上”所有分類“;Column可以依照自己希望每一列有幾則貼文來設定,其他設定不用改。

postgrid9
postgrid10

STEP 3:希望出現什麼內容(Field Selection)

這邊就看你希望自己文章在篩選器中要出現什麼內容,Kevin 只簡單選擇標題和貼文時間,主要是不希望內容太凌亂。

STEP 4:風格(Style)

這裡依照自己喜歡的顏色去做設定就可以囉!按下右上角的發佈就完成囉!未來只要將每篇文章寫好分類,文章就會自動被丟到對應的分類中啦!

postgrid13

STEP 5:將文章類別篩選器放入頁面

來到你想要放置文章類別篩選器的頁面,使用 Elementor 編輯。

postgrid14

搜尋 The post Grid,並拉至想要放置的位置,Select post grid 可以選擇你剛剛做好的篩選器,如此一切就大功告成啦。

postgrid15
postgrid16

結論

透過 The post Grid,我們可以很方便的製作出文章篩選器,讓頁面變得更加美觀,而且讓人一目了然。

如果這篇文章有幫助到你,也歡迎你分享給更多人知道,或者你有什麼想法也都歡迎在底下留言以及按個讚作為鼓勵。

更多 WordPress 架站相關文章
電郵行銷工具

網路行銷私藏工具

選擇好的網路行銷工具,能夠讓你事半功倍。這裡藏著 Kevin 私藏的網路行銷工具,想要學習網路行銷一定不能錯過。 

網路行銷學習書籍

網路行銷究極攻略
網路行銷究極攻略
書籍介紹

這本書會教你該怎麼從一開始吸引潛在顧客,緊接著如何一步步建立漏斗”引導”顧客願意掏出錢給你,到最後如何吸引顧客不斷回流,每個細節都說明的很仔細。

推薦原因

作者 Russell 是知名的 Clickfunnel 的創始人,透過此軟體他已經成功幫助了無數的人成為千萬富翁。書中沒有太複雜的專有名詞,而且用了很多的小插畫做解釋,即使你是數位行銷新手也能輕鬆掌握書中知識。如果你正在學習網路行銷,那你一定不能錯過這本好書。

更多網路行銷工具請看:Kevin 私藏網路行銷工具

電郵行銷學習必看書籍:網路行銷究極攻略

歡迎按讚我的粉絲專頁會有最新文章、Email 行銷知識、網路行銷工具優惠、網路學習資源的訊息。

Kevin 有創立一個社團,歡迎加入討論!
Email 行銷 / WordPress架站 / 線上學習資源 | Hola Kevin

如果我的文章對你有幫助,歡迎贊助我一杯咖啡!



你也可以使用 Paypal 贊助喔!

​你可能會想看

​額外資訊

訂閱Hola-Kevin獲得更多最新資訊

.

留言

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