How to override menu markup?

时间:2015-02-10 作者:Benn

我试图覆盖wp菜单标记,并在每个子菜单ul周围添加额外的div。

像这样的

<ul>
    <li><a>Coffee</li>
    <li><a>Tea</a>
        <div class="holder">
            <ul class="sub-menu">
                <li><a>Black tea</a></li>
                <li><a>Green tea</a></li>
            </ul>
        </div>
    </li>
    <li><a>Milk</a>
        <div class="holder">
            <ul class="sub-menu">
                <li><a>Red</a></li>
                <li><a>Blue</a></li>
            </ul>
        </div>
    </li>
</ul>
有可能在里面做这个吗?

$defaults = array(
    \'theme_location\'  => \'primary\',
    \'menu\'            => \'\',
    \'container\'       => \'div\',
    \'container_class\' => \'\',
    \'container_id\'    => \'mega-menu\',
    \'menu_class\'      => \'mega\',
    \'menu_id\'         => \'\',
    \'echo\'            => true,
    \'fallback_cb\'     => \'wp_page_menu\',
    \'before\'          => \'\',
    \'after\'           => \'\',
    \'link_before\'     => \'\',
    \'link_after\'      => \'\',
    \'items_wrap\'      => \'<ul id="%1$s" class="%2$s">%3$s</ul>\',
    \'depth\'           => 0,
    \'walker\'          => \'\'
);
非常感谢您的帮助。

2 个回复
SO网友:Benn

好的,明白了。对于任何需要这样做的人,如果只需要向现有的wp菜单结构添加内容,最好扩展Walker\\u Nav\\u菜单类。否则,如果您要扩展Walker类,则必须完全重建菜单。

包括此类

class Walker_Extend_Menu extends Walker_Nav_Menu {

    // Tell Walker where to inherit it\'s parent and id values
    var $db_fields = array(
        \'parent\' => \'menu_item_parent\', 
        \'id\'     => \'db_id\' 
    );

    /**
     * Starts the list before the elements are added.
     *
     * @see Walker::start_lvl()
     *
     * @since 3.0.0
     *
     * @param string $output Passed by reference. Used to append additional content.
     * @param int    $depth  Depth of menu item. Used for padding.
     * @param array  $args   An array of arguments. @see wp_nav_menu()
     */
    public function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\\t", $depth);
        $output .= "\\n$indent<div class=\\"holder\\">\\n$indent<ul class=\\"sub-menu\\">\\n";
    }

    /**
     * Ends the list of after the elements are added.
     *
     * @see Walker::end_lvl()
     *
     * @since 3.0.0
     *
     * @param string $output Passed by reference. Used to append additional content.
     * @param int    $depth  Depth of menu item. Used for padding.
     * @param array  $args   An array of arguments. @see wp_nav_menu()
     */
    public function end_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\\t", $depth);
        $output .= "$indent</ul>\\n</div>\\n";
    }

}
并在wp\\U nav\\U菜单中呼叫您的助行器

$defaults = array(
    \'theme_location\'  => \'primary\',
    \'menu\'            => \'\',
    \'container\'       => \'div\',
    \'container_class\' => \'\',
    \'container_id\'    => \'mega-menu\',
    \'menu_class\'      => \'mega\',
    \'menu_id\'         => \'\',
    \'echo\'            => true,
    \'fallback_cb\'     => \'wp_page_menu\',
    \'before\'          => \'\',
    \'after\'           => \'\',
    \'link_before\'     => \'\',
    \'link_after\'      => \'\',
    \'items_wrap\'      => \'<ul id="%1$s" class="%2$s">%3$s</ul>\',
    \'depth\'           => 0,
    \'walker\'          => new Walker_Extend_Menu ()
);

SO网友:jdm2112

我相信您正在寻找的是一个自定义导航助行器来控制HTML结构。

WP Codex文章列出了一个控制菜单HTML结构的好例子http://codex.wordpress.org/Class_Reference/Walker#General_Menu_Example

// Tell Walker where to inherit it\'s parent and id values
var $db_fields = array(
    \'parent\' => \'menu_item_parent\', 
    \'id\'     => \'db_id\' 
);

/**
 * At the start of each element, output a <li> and <a> tag structure.
 * 
 * Note: Menu objects include url and title properties, so we will use those.
 */
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
    $output .= sprintf( "\\n<li><a href=\'%s\'%s>%s</a></li>\\n",
        $item->url,
        ( $item->object_id === get_the_ID() ) ? \' class="current"\' : \'\',
        $item->title
    );
}
}

我会看看是否可以测试一个直接解决子菜单问题的示例。

结束

相关推荐

Add Protocol to Custom Menus

我一直在使用tel: 自定义菜单中的链接与响应性设计相结合,为我的智能手机主题添加了“立即呼叫”按钮。它一直运行良好。一位客户刚刚要求我也添加一个“发送文本”按钮。我想我会用sms: 它似乎有可接受的设备支持。然而,当我保存菜单时,WordPress将其从URL中删除。经过研究,我得出结论,这与esc_url() 和/或wp_kses() (参见Trac ticket #18268). 我编造了以下代码,试图自己添加SMS协议并将其放入函数中。php:<?php function add_n