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

根据Wordpress文档http://codex.wordpress.org/Function_Reference/wp_nav_menu#Example，只需在菜单中添加Walker：

<?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";
    }
}

有条件地，我们可以检查 $ depth 的值，仅为所需的子级别输出自定义标记;

有关详细信息，请参阅：http://shinraholdings.com/62/custom-nav-menu-walker-function/#example-code

Answer 2

菜单标记在带有Walker类的wp-includes / classes.php中生成，具体为class Walker_Page extends Walker {

如果查看类中的函数，可以看到生成实际标记的位置。

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

Answer 3

这可能有所帮助：

将wp_nav_menu（）与自定义助行器类

结合使用

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

将wp_get_nav_menu_items（）与clean_custom_menus（）函数结合使用

http://digwp.com/2011/11/html-formatting-custom-menus/

Answer 4

你可以使用jQuery .wrap函数，比如

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

不要忘记在标题中添加正确的jQuery .js。

您也应该使用.ready（）函数。

Answer 5

不完全确定您需要什么，但这里有一些关于创建自定义WP菜单的参考。

在数据库中查看wp_posts表。这是导航菜单项的位置。

对于自定义CSS，您可以使用CSS编辑器。可以在仪表板的“演示文稿”选项卡中的“编辑CSS”下找到它。它包括一个用于打字的空白区域和两个按钮。您可以进行实时更改并立即查看结果。

要使用自定义导航菜单代替主题的默认菜单，必须在主题的 functions.php 文件中注册对此功能的支持。

请参阅：http://codex.wordpress.org/Navigation_Menus和http://codex.wordpress.org/Function_Reference/register_nav_menus

将自定义标记添加到Wordpress菜单

5 个答案: