丫湯很久沒有釋出一些Wordpress技術方面的文章，今天心血來潮(其實是沒梗了)來寫一篇有關分類目錄改為Jquery樹狀目錄，也就是丫湯在blog最下方所使用的分類樣式，咦？這時冒出了很多問號？大家一定都以為是利用wp-dtree這支外掛達成的效果，丫湯一直沒有介紹wp-dtree這支外掛是有原因的，因為他和不少好用的外掛或是js都會有衝突，再加上外掛當然是愈少愈好，有興趣可以來研究一下哦。

01

 

相信很多人已經用過WP-Dtree這支外掛達成這樣的效果過，也一定有人在使用這支外掛時卻造成FCG或是其它js效果出不來過，因為他用的模組比較特別，沒辦法和另一種相容，所以會互衝，但偏偏整個wp找遍，都沒有可以取代的外掛，所以很多人在這個部份忍痛割捨，難以選擇，今天就來解決這樣的窘境吧。

 

使用教學：

先下載這個檔案：https://steachs.com/d/files/treemenu.zip

解壓縮後上傳到你的佈景資料夾裡。

然後編輯你佈景的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>

Categorized in:

WordPress,

Last Update: 2010 年 01 月 30 日

Tagged in:

, ,