語法 | 將wp分類改用下拉式選單
Jan.05.2009 13:28 (Monday)
通常我們網誌分類都會放在側邊欄給大家點選，但是子分類的功能卻鮮少有人使用，因為設定上面比較麻煩而且大部分的人比較沒有這個需求。但是如果真的需要動用到子分類該怎麼辦呢？
像我之前接了一個案子，案主就是希望可以有多個子分類功能，所以當初在搜尋上也花了我一點時間，所以今天要跟各位分享的就是如何將wordpress的分類改成用下拉式選單來呈現。
[!]版權宣告：這篇文章出處來自Anthology of Ideas，內容語法也歸該網站所有。
1.設置分類函數
首先開啟header.php，在適當的位置放置以下語法
- <ul id="menu">
- <?php wp_list_categories('style=list&children=true&hierarchical=true&title_li=0'); ?>
- </ul>
2.修改css語法
開啟css文件，將以下語法複製到裡頭。如果對css熟悉的人也可以再進行微調的動作
- ul#menu {
- margin: 0;
- padding: 0;
- list-style: none;
- width: 100%;
- font-size:1.2em;
- }
- ul#menu li {
- float: left;
- padding: 0;
- margin: 0;
- border-right:solid 1px #fff;
- }
- ul#menu ul li {
- float: none;
- position: relative;
- border-bottom: 1px solid #7EAED7; /* fixes gap problem in IE */
- border-left: 1px solid #FFF;
- z-index:1000;
- }
- ul#menu li ul {
- margin: 0;
- padding: 0;
- display:none;
- list-style: none;
- position: absolute;
- background: #9CC;
- }
- ul#menu ul ul{
- margin-left: .2em;
- position: absolute;
- top: 0; /* if using borders, -1px to align top borders */
- left: 100%;
- }
- ul#menu * a:hover, ul#menu li a:active{
- background:#7EAED7 !important;
- color: #FFFFFF;
- }
- ul#menu li a:link,
- ul#menu li a:visited,
- ul#menu li a:hover,
- ul#menu li a:active{
- display: block;
- padding: .2em .3em;
- text-decoration: none;
- background: #5587B3;
- color: #FFFFFF;
- }
- ul#menu ul li a:link,
- ul#menu ul li a:visited,
- ul#menu ul li a:hover,
- ul#menu ul li a:active {
- width: 8em;
- }
3.新增java script檔案
我已經將js檔案上傳到空間提供大家下載，有需要的人請先下載這個js檔案，將他放到你的模版目錄底下。
然後打開header.php，在裡頭增添一行語法：
- <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/menu.js"></script>
4.設置body load
開啟header.php，搜尋以下語法
- <body>
取代成
- <body onload="mbSet('menu');">
最後再把所有有變動過的檔案存檔並且上傳，看看結果如何吧~
如果沒有意外，你應該會順利看到子分類有下拉選單的效果了。
讓分頁也用下拉式選單
同理可證，如果我們想要修改子分頁也是用同樣的步驟做修改。唯一要特別注意是在第一個步驟：
- <ul id="menu">
- <?php wp_list_categories('style=list&children=true&hierarchical=true&title_li=0'); ?>
- </ul>
要改成
- <ul id="menu">
- <?php wp_list_pages('style=list&children=true&hierarchical=true&title_li=0'); ?>
- </ul>
如果你還想要看看分類有沒有其他有趣的效果，也可以參考我之前寫的另外一篇文章：讓wp分類有樹狀展開的效果 ，他是讓文章可以收合展開，也是另外網誌分類的運用!!!
說到這分類
我的分類居然會亂跳...
開啟這個，子分類卻跳成別的
亂七八糟，也不知道為什麼會變成這樣
後台很正常!!!!!
@ 妤:
哇，真的耶，我剛去看跳的亂七八糟的。
你要不要先試著把插件關閉看看秀出來的位子對不對...
而且你的位子也錯亂很嚴重耶 QQ
那應該是那個插件亂七八糟了~還是被我有動到還是怎樣吧~
現在用原始的~就OK了~
位子錯亂~是指分類那裡嗎~版面應該還好吧?
@ 妤:
嗯嗯
我說的錯亂是分類那邊XD~因為點了上面的分類跳出的地方很奇怪，真的嚇到我了:P
你之前有改過那個插件的東西嗎？
不然就是重新下載原始的插件檔再啟用一次看看效果好了!
有，有改過圖片而已Orz
懶的再重新下載了，就用原始的就好啦~~
@ 妤:
奇怪，只改圖片應該不會發生這種事情才對
如果哪天你又享用這款插件再跟我說，我再來測試看看有沒有問題XD