這幾天WordPress 3.0正式推出了,增加了不少新功能其中一個便是今天要介紹的Custom Menus(自定義選單)功能,透過這項功能可以直接在後台靈活對導航選單進行編輯,但這款新功能要主題有支援才能對位於頁首的導航列進行後台編輯,不然就只能使用在widgets上,所幸整個程式碼改寫上並不會很傷大腦(除非你家使用的主題很特殊…),話不多說馬上開始改寫囉~~

首先開啟主題目錄下的functions.php
在裡面最後一行的?>之前一行加入以下程式碼:

// WordPress 3.0 Menus Support
register_nav_menus( array(
	'primary' => __( 'Primary Navigation'),
) );

 

然後開啟header.php
由於每個主題對於導航列的寫法不盡相同,所以建議模糊尋找,主要關鍵字是wp_list_pages
以我家arthemia為例,找到是像如下這樣:

		

 

然後替換為如下程式碼:

 'page-bar', 'menu_class' => 'left clearfloat', 'theme_location' => 'primary') ); ?>

 

但是在替換前先注意看wp_nav_menu這一行,menu_id 的數值跟原本的 ul 標籤的 id 數值是一樣的,menu_class則是要跟ul 標籤的 class 數值一樣,如果你的是 ul 標籤有其中一項沒設定的話可以直接拿掉沒有設定的部份。

這樣程式碼的改寫就完畢囉,再來是前往後台的 [ 外觀 ] -> [ 選單 ],開始進行導航選單的編輯。

選單名稱建議還是以英數字為主別帶有中文字,如果要某選單位於某主選單的下拉式清單之中的話,對該區塊往後拖移就可以了,設定完記得按儲存選單,然後在佈景主題位置選擇剛建立好的選單儲存就完成囉。

如果想更了解Menus的wp_nav_menu函數的話可以至官網的 Function Reference/wp nav menu 逛逛,因為本篇文章僅說明如何與現行的主題導航列相容~~

作者: Mr. 夫

唯有力量才能制衡一切,沒有力量什麼都保護不了,就連自身也難保...

參與討論

21 則留言

  1. 版主你好
    我是用wordpress 3.0
    但想把menu改成下拉式的選單是水平的,不曉得要怎麼改?
    像yahoo台灣裡面那種menu

    1. 要讓下拉的選單是水平延伸的話要看原本主題的CSS寫法了,如果原本主題就是水平的話即使改成相容3.0的話還是呈現水平方式。

      如果要將原本垂直的改成水平的話那要花點時間研究該主題的CSS寫法了,畢竟不是每個主題改成水平的寫法都一樣。

    1. Sorry, 沒注意到這篇迴響所以太晚回應了,雖然是內建的主題不過我也沒摸過這套主題,但有時間的話我會去摸看看的。

  2. 版主你好,請問一下你這主題右邊的「最新、迴響、熱門…」那個是要從那裡去改成中文顯示呢?

  3. 感謝大大的中文化,雖然有些還是英文,不過已經看起來不錯囉!
    另外,想再請教大大一下,若是從其它地方轉移過來的文章,文章內容的影片寬度(YOUTUBE)和照片,都會超過文章的寬度的,不知道是否有什麼外掛可以統一修正這個問題?另外,有沒有什麼方法可以一起改變這幾百篇文章的文字大小呢?

    1. 看你文章是怎轉移的,如果是用備份檔案轉的話可以先用記事本開啟然後用搜尋取代的方式把YOUTUBE的影片寬度大小原始碼改掉。

      照片的話可能要用CSS之類的東西來限制吧
      這一類的圖案限制大小外掛我沒找過。

  4. 哇…看樣子這可是個大工程了…因為YOUTUBE的影片大小都不太一樣大小…

    圖片大小的限制…如果沒方便的方式來轉…那可就真的直接投降好了!哈哈

  5. Mr. 夫 大大你好:

    我想詢問下拉式選單的問題。
    希望你指點迷津~^^

    目前我的functions.php是這樣的內容:
    ==========
    add_action(‘admin_menu’, array(‘SOptions’, ‘add’));
    register_nav_menus( array(
    ‘scov4pri’ => __( ‘Primary Navigation’, ‘Sco V4.0’ ),
    ) );
    ==========

    在header.php有這樣的內容:
    ==========

    ‘menu-header’, ‘theme_location’ => ‘scov4pri’ ) ); ?>
    ==========

    在 外觀>選單 上也可以自由排列:
    http://i483.photobucket.com/albums/rr199/b81100492/-1-5.jpg

    可以順利出現在頁面上,不過卻沒有出現下拉式的子頁面。(只有最上層出現)

    用CHROME的檢查元素來看原碼,
    發現都有子頁面的存在,只是沒秀出來,
    請問我下一步該如何解決?

    感恩

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *