想找資料嗎？到這看看也許會有收穫喔。
‧wordpress: 佈景主題 / 插件介紹 #
‧網站教學 : css新手必看 / css筆記 / seo
‧電影片單 : 驚悚 / 懸疑 / 靈異 / 動作 / 文藝 / 劇情 / 喜劇 / 紀錄 / 科幻 / 史詩 / 戰爭 / 動畫
2009/01/05

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


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

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

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

1.設置分類函數

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

  1. <ul id="menu">
  2. <?php wp_list_categories('style=list&children=true&hierarchical=true&title_li=0'); ?>
  3. </ul>

2.修改css語法

開啟css文件，將以下語法複製到裡頭。如果對css熟悉的人也可以再進行微調的動作

  1. ul#menu {
  2.     margin: 0;
  3.     padding: 0;
  4.     list-style: none;
  5.     width: 100%;
  6.     font-size:1.2em;
  7. }
  8.  
  9. ul#menu li {
  10.     float: left;
  11.     padding: 0;
  12.     margin: 0;
  13.     border-right:solid 1px #fff;
  14. }
  15.  
  16. ul#menu ul li {
  17.     float: none;
  18.     position: relative;
  19.     border-bottom: 1px solid #7EAED7; /* fixes gap problem in IE */
  20.     border-left: 1px solid #FFF;
  21.     z-index:1000;
  22. }
  23.  
  24. ul#menu li ul {
  25.     margin: 0;
  26.     padding: 0;
  27.     display:none;
  28.     list-style: none;
  29.     position: absolute;
  30.     background: #9CC;
  31. }
  32. ul#menu ul ul{
  33.     margin-left: .2em;
  34.     position: absolute;
  35.     top: 0; /* if using borders, -1px to align top borders */
  36.     left: 100%;
  37. }
  38.  
  39. ul#menu * a:hover, ul#menu li a:active{
  40. background:#7EAED7 !important;
  41. color: #FFFFFF;
  42. }
  43.  
  44. ul#menu li a:link,
  45. ul#menu li a:visited,
  46. ul#menu li a:hover,
  47. ul#menu  li a:active{
  48.     display: block;
  49.     padding: .2em .3em;
  50.     text-decoration: none;
  51.     background: #5587B3;
  52.      color: #FFFFFF;
  53. }
  54.  
  55.  
  56. ul#menu ul li a:link,
  57. ul#menu ul li a:visited,
  58. ul#menu ul li a:hover,
  59. ul#menu ul li a:active {
  60.     width: 8em;
  61. }

3.新增java script檔案

我已經將js檔案上傳到空間提供大家下載，有需要的人請先下載這個js檔案，將他放到你的模版目錄底下。
然後打開header.php，在裡頭增添一行語法：

  1. <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/menu.js"></script>

4.設置body load

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

  1. <body>

取代成

  1. <body onload="mbSet('menu');">

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

讓分頁也用下拉式選單

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

  1. <ul id="menu">
  2. <?php wp_list_categories('style=list&children=true&hierarchical=true&title_li=0'); ?>
  3. </ul>

要改成

  1. <ul id="menu">
  2. <?php wp_list_pages('style=list&children=true&hierarchical=true&title_li=0'); ?>
  3. </ul>

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

Related Posts with Thumbnails
迴響(6筆)
分類:wordpress技巧
人氣:2,446    
  • 引用網址：
  • 文章標籤：
  • 上篇文章：
  • 下篇文章：

      • comments(6)
    1. 妤
      #1
      妤//LV.72
      reply
      2009/01/06

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

    2. muki
      #2
      muki//LV.953
      reply
      2009/01/06

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

    3. 妤
      #3
      妤//LV.72
      reply
      2009/01/07

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

    4. muki
      #4
      muki//LV.953
      reply
      2009/01/07

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

    5. 妤
      #5
      妤//LV.72
      reply
      2009/01/08

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

    6. muki
      #6
      muki//LV.953
      reply
      2009/01/08

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

    comments(6)



    :wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!: