丫湯很久沒有釋出一些Wordpress技術方面的文章，今天心血來潮(其實是沒梗了)來寫一篇有關分類目錄改為Jquery樹狀目錄，也就是丫湯在blog最下方所使用的分類樣式，咦？這時冒出了很多問號？大家一定都以為是利用wp-dtree這支外掛達成的效果，丫湯一直沒有介紹wp-dtree這支外掛是有原因的，因為他和不少好用的外掛或是js都會有衝突，再加上外掛當然是愈少愈好，有興趣可以來研究一下哦。
相信很多人已經用過WP-Dtree這支外掛達成這樣的效果過，也一定有人在使用這支外掛時卻造成FCG或是其它js效果出不來過，因為他用的模組比較特別，沒辦法和另一種相容，所以會互衝，但偏偏整個wp找遍，都沒有可以取代的外掛，所以很多人在這個部份忍痛割捨，難以選擇，今天就來解決這樣的窘境吧。
使用教學：
解壓縮後上傳到你的佈景資料夾裡。
然後編輯你佈景的header.php，開啟後在<head>和</head>找個空位加入以下語法：
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/treemenu.js"></script>
然後在style.css裡加入以下CSS：
.simpleTree{margin:0;padding:0;}
.simpleTree li{list-style: none;margin:0;padding:0 0 0 34px;line-height: 14px;}
.simpleTree li span{display:inline;clear: left;white-space: nowrap;}
.simpleTree ul{margin:0;padding:0;}
.simpleTree .categories{margin-left:-16px;background: url(img/root.gif) no-repeat 16px 0;}
.simpleTree .line{margin:0 0 0 -16px;padding:0;line-height: 3px;height:3px;font-size:3px;background: url(img/line_bg.gif) 0 0 no-repeat transparent;}
.simpleTree .line-last{margin:0 0 0 -16px;padding:0;line-height:3px;height:3px;font-size:3px;background: url(img/spacer.gif) 0 0 no-repeat transparent;}
.simpleTree .line-over{margin:0 0 0 -16px;padding:0;line-height: 3px;height:3px;font-size:3px;background: url(img/line_bg_over.gif) 0 0 no-repeat transparent;}
.simpleTree .line-over-last{margin:0 0 0 -16px;padding:0;line-height: 3px;height:3px;font-size:3px;background:url(img/line_bg_over_last.gif) 0 0 no-repeat transparent;}
.simpleTree .folder-open{margin-left:-16px;background: url(img/collapsable.gif) 0 -2px no-repeat;}
.simpleTree .folder-open-last{margin-left:-16px;background: url(img/collapsable-last.gif) 0 -2px no-repeat;}
.simpleTree .folder-close{ margin-left:-16px;background: url(img/expandable.gif) 0 -2px no-repeat;}
.simpleTree .folder-close-last{margin-left:-16px;background: url(img/expandable-last.gif) 0 -2px no-repeat;}
.simpleTree .doc{margin-left:-16px;background: url(img/leaf.gif) 0 -1px no-repeat;}
.simpleTree .doc-last{margin-left:-16px;background: url(img/leaf-last.gif) 0 -1px no-repeat;}
.simpleTree .ajax{background: url(img/spinner.gif) no-repeat 0 0;height: 16px;display:none;}
.simpleTree .ajax li{display:none;margin:0;padding:0;}
.simpleTree .trigger{display:inline; margin-left:-32px;width:28px;height:11px;cursor:pointer;}
.simpleTree .text{cursor: default;}
.simpleTree .active{cursor: default;padding:0px 2px;}
最後在你要顯示樹狀目錄的地方加入以下語法即可：
<div class="simpleTree"><ul>
<?php wp_list_categories('title_li=文章分類'); ?>
</ul></div>
treemenu.zip是你自己做的嗎，真是太厲害的!!
HI
http://download.steachs.com/treemenu.zip
這個檔案似乎遺失了,可以補檔嗎??謝謝^^
您好,
請問能讓分類名稱後面顯示篇數嗎??
謝謝!!
哈囉
請問這程式可以用在yam天空嗎
什麼是佈景主題資料夾
請問大大!
像”香腸炒魷魚”那種文章分類
用條列式呈現的要用什麼外掛呢
感恩
不好意思打擾ㄚ湯了
請問Sco v1.0適用這個語法嗎?
不知道是我笨還是什麼，用出來怪怪的….
拜託了!
所以這就是這篇的解答囉?
http://sofree.tw/thread-3812-1-1.html
十分感謝
不知道語法載入速度快還是外掛載入速度快