添加自定义标记到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