添加自定義標記到Wordpress菜單

Question

我一直在尋找很長一段時間來解決這個問題，但沒有發現任何東西，所以你們將是我最後的希望！

我正在嘗試在Wordpress 3網站上構建一個新的CSS3菜單。我需要擴展默認菜單標記，但不知道如何。

這是我使用的主題，以輸出菜單此刻的標籤：

<?php wp_nav_menu(array('container_class' => 'menu-header', 'theme_location' => 'primary')); ?> 

目前我的默認菜單加價看起來是這樣的：

<div class="menu-header"> 
<ul id="menu-main-menu" class="menu"> 
    <li id="menu-item-62" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-43 current_page_item menu-item-62"><a href="#">Top Level Menu Item</a></li> 
    <li id="menu-item-70" class="menu-item menu-item-type-post_type menu-item-70"><a href="#">Top Level Menu Item</a> 
    <ul class="sub-menu"> 
    <li id="menu-item-71" class="menu-item menu-item-type-taxonomy menu-item-71"><a href="#">Sub Level Menu Item</a></li> 
    </ul> 
    </li> 
    <li id="menu-item-220" class="menu-item menu-item-type-post_type menu-item-220"><a href="#">Top Level Menu Item</a></li> 
    <li id="menu-item-129" class="menu-item menu-item-type-post_type menu-item-129"><a href="#">Top Level Menu Item</a> 
    <ul class="sub-menu"> 
    <li id="menu-item-206" class="menu-item menu-item-type-post_type menu-item-206"><a href="#">Sub Level Menu Item</a></li> 
    <li id="menu-item-207" class="menu-item menu-item-type-post_type menu-item-207"><a href="#">Sub Level Menu Item</a></li> 
    <li id="menu-item-200" class="menu-item menu-item-type-post_type menu-item-200"><a href="#">Sub Level Menu Item</a></li> 
    </ul> 
    </li> 
    <li id="menu-item-243" class="menu-item menu-item-type-post_type menu-item-243"><a href="#">Top Level Menu Item</a></li> 
</ul> 
</div> 

我需要添加圍繞每個<ul class="sub-menu">...</ul> 2米div的所以我需要加價看起來像這樣：

<div class="menu-header"> 
<ul id="menu-main-menu" class="menu"> 
    <li id="menu-item-62" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-43 current_page_item menu-item-62"><a href="#">Top Level Menu Item</a></li> 
    <li id="menu-item-70" class="menu-item menu-item-type-post_type menu-item-70"><a href="#">Top Level Menu Item</a> 
    <div class="sub-menu-container"> 
    <div class="submenu"> 
    <ul class="sub-menu"> 
     <li id="menu-item-71" class="menu-item menu-item-type-taxonomy menu-item-71"><a href="#">Sub Level Menu Item</a></li> 
    </ul> 
    </div> 
    </div> 
    </li> 
    <li id="menu-item-220" class="menu-item menu-item-type-post_type menu-item-220"><a href="#">Top Level Menu Item</a></li> 
    <li id="menu-item-129" class="menu-item menu-item-type-post_type menu-item-129"><a href="#">Top Level Menu Item</a> 
    <div class="sub-menu-container"> 
    <div class="submenu"> 
    <ul class="sub-menu"> 
     <li id="menu-item-206" class="menu-item menu-item-type-post_type menu-item-206"><a href="#">Sub Level Menu Item</a></li> 
     <li id="menu-item-207" class="menu-item menu-item-type-post_type menu-item-207"><a href="#">Sub Level Menu Item</a></li> 
     <li id="menu-item-200" class="menu-item menu-item-type-post_type menu-item-200"><a href="#">Sub Level Menu Item</a></li> 
    </ul> 
    </div> 
    </div> 
    </li> 
    <li id="menu-item-243" class="menu-item menu-item-type-post_type menu-item-243"><a href="#">Top Level Menu Item</a></li> 
</ul> 
</div> 

有誰知道如何做到這一點？

Answer 1

不完全確定你需要什麼，但這裏有一些關於創建自定義WP菜單的參考。

在數據庫中查找wp_posts表。這是導航菜單項目的位置。

對於自定義CSS，您可以使用CSS編輯器。可以在儀表板的「演示」選項卡中的「編輯CSS」下找到它。它由用於打字的空白區域和兩個按鈕組成。您可以進行實時更改並立即查看結果。

要使用自定義導航菜單取代主題的默認菜單，必須在主題的functions.php文件中註冊對此功能的支持。

參見：http://codex.wordpress.org/Navigation_Menus和http://codex.wordpress.org/Function_Reference/register_nav_menus

Answer 2

你可以只使用一個jQuery .wrap功能，如

$('div.submenu').wrap('<div class="sub-menu-container" />'); 

不要忘了適當的jQuery的.js文件添加到您的標題。

您應該也可以使用.ready（）函數。如果你通過在類的功能，你可以看到的是產生實際的標記，其中

Answer 3

菜單標記在WP-包括/ classes.php產生與Walker類，特別是class Walker_Page extends Walker {

。

http://codex.wordpress.org/Function_Reference/Walker_Class

Answer 4

這可能會幫助：

與定製學步車類

http://www.kriesi.at/archives/improve-your-wordpress-navigation-menu-output

與clean_custom_menus（）函數

http://digwp.com/2011/11/html-formatting-custom-menus/結合wp_get_nav_menu_items（）聯合wp_nav_menu（）

Answer 5

根據WordPress的文檔http://codex.wordpress.org/Function_Reference/wp_nav_menu#Example，只需添加一個沃克菜單：

<?php wp_nav_menu(array(
    'container_class'=>'menu-header', 
    'theme_location'=>'primary', 
    'walker'=>new my_Walker_Menu_List() //This is the trick! 
)); ?> 

然後在主題functions.php文件中添加以下代碼：

class my_Walker_MegaMenu extends Walker_Nav_Menu{ 
    /** 
    * @see Walker::start_lvl() 
    * @since 3.0.0 
    * 
    * @param string $output Passed by reference. Used to append additional content. 
    * @param int $depth Depth of page. Used for padding. 
    */ 
    function start_lvl(&$output, $depth = 0, $args = array()) { 
     $indent = str_repeat("\t", $depth); 
     //$output .= "\n$indent<ul class=\"sub-menu\">\n"; //this is default output; 

     //if($depth==0) //'0'==>1st-sub-level; '1'=2nd-sub-level; .... 
     $output .= "\n$indent<div class=\"sub-menu-container\"><div class=\"submenu\"><ul class=\"sub-menu\">\n"; 
    } 

    /** 
    * @see Walker::end_lvl() 
    * @since 3.0.0 
    * 
    * @param string $output Passed by reference. Used to append additional content. 
    * @param int $depth Depth of page. Used for padding. 
    */ 
    function end_lvl(&$output, $depth = 0, $args = array()) { 
     $indent = str_repeat("\t", $depth); 
     //$output .= "$indent</ul>\n"; //this is default output; 

     //if($depth==0) //'0'==>1st-sub-level; '1'=2nd-sub-level; .... 
     $output .= "$indent</ul></div></div>\n"; 
    } 
} 

有條件，我們可以檢查$深度的值僅輸出所需子級別的自定義標記;

欲瞭解更多信息，你可以看到：http://shinraholdings.com/62/custom-nav-menu-walker-function/#example-code