fbpx

WP筆記《分類樹狀目錄》免外掛使用jquery製作分類樹狀目錄

丫湯很久沒有釋出一些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> 

你可能對這些內容也有興趣

阿湯 作者:阿湯

對電腦 & 網路資訊充滿興趣與熱情、瘋了似的每日堅持發文,「阿湯」這個名字是由湯姆克魯斯而來的,雖然我沒有他帥氣,也不會演電影,但我會寫文章....

更多關於的文章》

10 個留言

  1. Avatar leo表示:

    treemenu.zip是你自己做的嗎,真是太厲害的!!

    阿湯說:

    算是吧..

  2. Avatar aidec表示:

    HI

    http://download.steachs.com/treemenu.zip

    這個檔案似乎遺失了,可以補檔嗎??謝謝^^

    阿湯說:

    已補

  3. Avatar 嵐曦表示:

    您好,
    請問能讓分類名稱後面顯示篇數嗎??
    謝謝!!

    阿湯說:

    修改程式碼可以

  4. Avatar 郭魚月表示:

    哈囉
    請問這程式可以用在yam天空嗎
    什麼是佈景主題資料夾

    阿湯說:

    不行~

  5. Avatar 阿志表示:

    請問大大!
    像”香腸炒魷魚”那種文章分類
    用條列式呈現的要用什麼外掛呢
    感恩

    阿湯說:

    沒有外掛,是自行寫CSS的

  6. Avatar NG表示:

    不好意思打擾ㄚ湯了
    請問Sco v1.0適用這個語法嗎?
    不知道是我笨還是什麼,用出來怪怪的….
    拜託了!

    阿湯說:

    你要直接寫進sidebar.php,另外自訂一段php,或是強制定義樹狀分類的css才會跟我的一樣.

  7. Avatar NG表示:

    所以這就是這篇的解答囉?
    http://sofree.tw/thread-3812-1-1.html

    十分感謝

    阿湯說:

    嗯~

  8. Avatar 聽。風表示:

    不知道語法載入速度快還是外掛載入速度快

    阿湯說:

    不同類型,這和外掛使用的模組完全不同

發表留言 »

姓名(*)
信箱(*)