語法 | 將wp分類改用下拉式選單

通常我們網誌分類都會放在側邊欄給大家點選,但是子分類的功能卻鮮少有人使用,因為設定上面比較麻煩而且大部分的人比較沒有這個需求。但是如果真的需要動用到子分類該怎麼辦呢?

像我之前接了一個案子,案主就是希望可以有多個子分類功能,所以當初在搜尋上也花了我一點時間,所以今天要跟各位分享的就是如何將wordpress的分類改成用下拉式選單來呈現。

[!]版權宣告:這篇文章出處來自Anthology of Ideas,內容語法也歸該網站所有。

1.設置分類函數

首先開啟header.php,在適當的位置放置以下語法

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,在裡頭增添一行語法:


4.設置body load

開啟header.php,搜尋以下語法



取代成


最後再把所有有變動過的檔案存檔並且上傳,看看結果如何吧~
如果沒有意外,你應該會順利看到子分類有下拉選單的效果了。

讓分頁也用下拉式選單

同理可證,如果我們想要修改子分頁也是用同樣的步驟做修改。唯一要特別注意是在第一個步驟


要改成

如果你還想要看看分類有沒有其他有趣的效果,也可以參考我之前寫的另外一篇文章:讓wp分類有樹狀展開的效果 ,他是讓文章可以收合展開,也是另外網誌分類的運用!!!

引用網址:

EVERYBODYs COMMENT:

  • 1
    (LV.74) // 2009.01.06 20:48

    說到這分類
    我的分類居然會亂跳...
    開啟這個,子分類卻跳成別的
    亂七八糟,也不知道為什麼會變成這樣
    後台很正常!!!!!

  • muki
    2
    muki (LV.1015) // 2009.01.06 23:23

    @ 妤:
    哇,真的耶,我剛去看跳的亂七八糟的。
    你要不要先試著把插件關閉看看秀出來的位子對不對...
    而且你的位子也錯亂很嚴重耶 QQ

  • 3
    (LV.74) // 2009.01.07 22:36

    那應該是那個插件亂七八糟了~還是被我有動到還是怎樣吧~
    現在用原始的~就OK了~
    位子錯亂~是指分類那裡嗎~版面應該還好吧?

  • muki
    4
    muki (LV.1015) // 2009.01.07 22:41

    @ 妤:
    嗯嗯
    我說的錯亂是分類那邊XD~因為點了上面的分類跳出的地方很奇怪,真的嚇到我了:P
    你之前有改過那個插件的東西嗎?
    不然就是重新下載原始的插件檔再啟用一次看看效果好了!

  • 5
    (LV.74) // 2009.01.08 20:49

    有,有改過圖片而已Orz
    懶的再重新下載了,就用原始的就好啦~~

  • muki
    6
    muki (LV.1015) // 2009.01.08 21:30

    @ 妤:
    奇怪,只改圖片應該不會發生這種事情才對
    如果哪天你又享用這款插件再跟我說,我再來測試看看有沒有問題XD


  • LEAVE YOUR COMMENT:




    :wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!:
     
    字體大小: 小字型 12px大字型 15px
    ▲ back to top