WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

歡迎回到鵠學苑— WordPress 文章 分類WP-dTree 樹狀圖 列表呈現 超詳細攻略!今天的教學內容有一點難度,但同時也非常的實用,就是 WP-dTree 文章 分類 以樹狀列表的方式呈現 。一個好網站所必須具備的基本條件,不是過多的視覺配色,或著各種花俏的效果,最基礎的是必須讓使用者能夠清楚明暸的找到網站內想表達的核心內容,或者可以說讓使用者可以更直觀的方式去找到想要得到的資訊,而 樹狀圖 配合下拉式的選單列表,所呈現給使用者的效果就是微型的部落格地圖,讓所有網頁連結都一覽無遺。
而 WP-dTree這個外掛最主要的功能,就是能讓頁面、文章、分類、標籤等以各種設定的方式呈現,讓使用者可以透過樹狀圖快速的找到網站內想要瀏覽或瞭解的內容,簡單說起來這個外掛的功能就是讓你的網站具有想書本 “目錄” 的功能,是一個對於許多架站的站長來說不可或缺的工具!現在跟著鵠學苑的腳步,讓我們開始學習吧!
(小提醒:鵠學苑裡的所有教學均是以 Apple  Mac OSX系統 做步驟示範!)

外掛下載點
https://tw.wordpress.org/plugins/wp-dtree-30/

透過WordPress後台安裝WP-dTree外掛以及使用位置介紹

第一步:進入到WordPress後台介面,從左方工具欄找到外掛(plugins)的選項,點擊安裝外掛 → 右上方搜尋欄內輸入WP-dTree→ 點選立即安裝 → 安裝結束後點選啟用,安裝上如果有問題,可以參考鵠學苑之前的文章WordPress 教學 基礎介紹六(外掛) 。

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現
WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

第二步:在左方工具欄外掛的位置上方,有另一個”外觀”的選項,點開後找到小工具這個項目,會看到如下圖的列表,在下一節的外掛設定會以WP-dTree Categoties 當作講解的示範。

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現
第三步:一樣在左方工具欄下找到”設定”項目,顯示出來的列表中會有WP-dTree樹狀圖的選項,點選進去後會進到如下圖的畫面,這些選項基本上是不需要更動的,只是要提醒大家想做設定的位置,教學還是以實作示範為主,有興趣的同學可以自行試點看看功能,但如果是架站新手或者網站已經公開的同學,並不建議自己試,如果導致網站出問題,就得不償失了喔!

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

以部落格文章分類為範例,介紹WP-dTree外掛各種設定功能

第一步:回到外觀 → 小工具的選項,會到以下畫面,WP-dTree 樹狀圖可以根據不同的來源來操作資料分層顯示,接下來我會以類別(分類)Categoties來示範給各位同學看如何設定這個外掛。

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

第二步:點將外掛從左邊的區域拉到右邊想顯示的地方,我在這裡示範的是在Blog Sidebar(文章頁面的側邊欄)上顯示,點開WP-dTree Categoties分類,會有下拉式詳細的設定。

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現
第三步:第一個是Title,這是設定顯示在樹狀圖上方名稱,在示範裡面叫分類會比較適合。

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現
第四步:第二個是open all–展開全部子分類,close all-關閉全部子分類,這個選項可以自行更改名稱及分隔線顯示的樣式。

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

第五步:接著是Use lines–在分類文字的開頭加入線條,Use icons-在分類文字的開頭加入檔案夾的圖示,如下圖所示。

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

第六步:Close same level–當點擊同一層分類的其中一項使其展開時,其他已經展開的分類會關閉,這個部分的功能是能讓使用者更清楚的了解現在是在瀏覽哪一個相關分類。

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

第七步:Truncate titles–設定分類名稱顯示的長度,可以縮短成只顯示部份名稱。

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

第八步:Folders are links–勾選此項,點選檔案夾圖示旁的文章名稱會連結到對應的分類頁面,且下方文章列表不會展開;不勾選的話,點選文章只會展開該分類底下的文章項目。

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

第九步:Highlight selection–勾選此項,點選檔案夾圖示旁分類名稱時,名稱的下方會有下橫線的醒目提示,提醒瀏覽者在哪一個分類。

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

第十步:Open to selection–勾選此項,以展開的分類不會在跳轉頁面後自動收合。

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

 

第十一步:

1.Exclude–不顯示的文章分類,此處要輸入分類id,如果有多個分類要設定,id以小寫英文逗號分隔,如: 3,4…。

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

2.Include–要顯示的文章分類,此處要輸入分類id,如果有多個分類要設定,id以小寫英文逗號分隔,如: 3,4…。

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

3.Force open to–每一次入網頁都強制展開的分類,此處要輸入分類id,如果有多個分類要設定,id以小寫英文逗號分隔,如: 1,2…。

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

 

5.Order–排序的方式,ASC是正向排序,DESC是反向排序。

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

 

第十二步:Sort by–分類的排序方式,以下說明

1.name-按照名稱排序。

2.id-按照id的號碼順序排序。

3.slug-按照分類的代稱排序。

4.conut-按照分類內文章的數量排序。

5.group–按照分類的組別排序。

 

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現
第十三步:Sort posts by:分類內文章的排序方式。

1.Title–按照文章標題第一的英文字母,按照A,B,C的順序編排。

2.Menu order–按照首頁主要選單設定的順序排序。

3.Date–按照文章的發表日期進行排序。

4.Id–按照文章id的號碼順序排序。

5.Modified–按照文章修改的日期排序。

6.slug–按照文章分類的代稱排序。

7.author–按照作者的名稱排序。

8.Limit–分類顯示的數量。

9.Limit posts–分類文章顯示的數量。

10.Post order–分類下文章排序顯示的方式,ASC是正向排序,DESC是反向排序。

 

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

第十四步:Show more link–分類文章數量如果被限制,在文章展開的清單下方所顯示的文字,可以自行更改想顯示的文字內容,(%excluded%)…這一段語法會在文字的後方加入未顯示的文章數量,所以不要隨意更動。

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現
第十五步:Show descendands of–選擇在最上層的且具有下層的分類不顯示,只顯示其他子分類;如果選擇子分類或不具有下層的上層分類,所有的選單都不會顯示。

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現
第十六步:Set “Child of” to active category以及Only *direct* children of–勾選第一個選項,並在第二個選項內選擇分類,將指定所選擇的分類內文章的頁面才會有顯示樹狀圖,其他文章頁面以及首頁的樹狀圖將不顯示。

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

第十七步:Exclude posts–排除不顯示樹狀圖的文章id號碼。

第十八步:

1,Allow duplicate entries–允許重複的分類顯示,比如一篇文章具有兩個分類,勾選此項就會在兩個分類內都顯示。

2.Hide empty categories–隱藏沒有內容的分類。

3.List posts–隱藏子分類下的文章列表。

4.Show post count–在分類名稱結尾的地方顯示文章數量。

5.Show RSS–在分類名稱結尾的地方顯示RSS的圖示,顯示給訂閱者本篇文章的資訊。

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

WordPress 文章 分類 以 WP-dTree 樹狀圖 列表呈現

結語:

其實雖然這篇教學是非常詳細的介紹每個選項的功能並配上圖片流程做解說,但建議如果是第一次接觸網頁設計的同學,可以參考學苑內的另一篇文章 WordPress安裝 ,在本機上面安裝WordPress並直接下載 WP-dTree樹狀圖這個外掛來實際操作使用,會對於今天教學的內容更快上手!畢竟文字敘述表達的意思有限,也不是每個人都適合單純以文字學習的。另外,這個外掛使用的時機,在於做一個小型的樹狀網站地圖,目的就是為了讓使用者能夠更清楚的直奔自己想要了解的主題,在鵠學苑推薦給各位的外掛,都是能幫網站加分的好工具喔!
今天的教學進入尾聲拉!各位不要忘記關注鵠學苑,有問題也歡迎大家在留言喔!我們下一次的教學課程見拉!!

架站相關文章:

網站架設知識推薦閱讀:

如何使用 Elementor 建立 WooCommerce 單一商品頁?圖文步驟教學
Elementor 選單小工具 – 客製化 Menu Widget 功能與樣式操作教學
Site Kit For WordPress – 網站後台顯示 Google 分析數據外掛教學

鵠學苑

鵠學苑

我們是由一群熱愛 WordPress 網站架設的同好所組成的團隊,希望可以將這套 頂尖的 CMS 管理系統推廣給想要架站的朋友們,並且能夠在過程中互相交流心得,讓網站架設過程變得更有效率!

訂閱電子報

立即訂閱鵠崙設計(鵠學苑)!我們將不定期發送架站教學文章、最新網站版型介紹以及網頁設計最優惠價格!

熱門文章

最新文章

相關文章

標籤雲

Scroll to Top