高级WordPress菜单结构?

时间:2015-07-26 00:58:30

标签: php wordpress

我正在尝试使用WordPress菜单获取以下HTML输出,但是使用默认的navmenu功能,它似乎是不可能的。我尝试将菜单数据存储在一个数组中,然后用我自己的代码显示它,但是我遇到了多个子菜单级别的问题....最好的方法就是这样做了近20个小时。< / p>

提前非常感谢!!!!

  

WordPress导航菜单消息示例

<?php

$defaults = array(
    'theme_location'  => '',
    'menu'            => '',
    'container'       => 'div',
    'container_class' => '',
    'container_id'    => '',
    'menu_class'      => 'menu',
    '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'          => ''
);

wp_nav_menu( $defaults );

?>
  

我想要实现的菜单结构

<!-- mp-menu -->
    <nav id="mp-menu" class="mp-menu">
        <div class="mp-level">
            <h2>All Categories</h2>
            <ul>
                <li class="icon icon-arrow-left">
                    <a class="icon icon-display" href="#">Devices</a>
                    <div class="mp-level">
                        <h2>Devices</h2>
                        <ul>
                            <li>
                                <a href="#">Mobile Phones</a>
                                <div class="mp-level">
                                    <h2>Mobile Phones</h2>
                                    <ul>
                                        <li><a href="#">Super Smart Phone</a></li>
                                        <li><a href="#">Thin Magic Mobile</a></li>
                                        <li><a href="#">Performance Crusher</a></li>
                                        <li><a href="#">Futuristic Experience</a></li>
                                    </ul>
                                </div>
                            </li>
                            <li>
                                <a class="icon icon-tv" href="#">Televisions</a>
                                <div class="mp-level">
                                    <h2>Televisions</h2>
                                    <ul>
                                        <li><a href="#">Flat Superscreen</a></li>
                                        <li><a href="#">Gigantic LED</a></li>
                                        <li><a href="#">Power Eater</a></li>
                                        <li><a href="#">3D Experience</a></li>
                                        <li><a href="#">Classic Comfort</a></li>
                                    </ul>
                                </div>
                            </li>
                            <li>
                                <a href="#">Cameras</a>
                                <div class="mp-level">
                                    <h2>Cameras</h2>
                                    <ul>
                                        <li><a href="#">Smart Shot</a></li>
                                        <li><a href="#">Power Shooter</a></li>
                                        <li><a href="#">Easy Photo Maker</a></li>
                                        <li><a href="#">Super Pixel</a></li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#">Magazines</a>
                    <div class="mp-level">
                        <h2>Magazines</h2>
                        <ul>
                            <li><a href="#">National Geographic</a></li>
                            <li><a href="#">Scientific American</a></li>
                            <li><a href="#">The Spectator</a></li>
                            <li><a href="#">The Rambler</a></li>
                            <li><a href="#">Physics World</a></li>
                            <li><a href="#">The New Scientist</a></li>
                        </ul>
                    </div>
                </li>
                <li><a href="#">Collections</a></li>
            </ul>
        </div>
    </nav>

1 个答案:

答案 0 :(得分:0)

考虑使用自定义助行器类。

更多信息: https://codex.wordpress.org/Class_Reference/Walker

在这里: http://shinraholdings.com/62/custom-nav-menu-walker-function/#example-code

在这里: https://codex.wordpress.org/Function_Reference/wp_nav_menu

您无法单独更改基本选项,从而无法做您想做的事情!