自定义导航漫游子菜单HTML构造

时间:2014-05-19 作者:Mallander

我已经设置了我的自定义导航助行器,它与主菜单项配合良好,并按我的意愿显示它们。

但是,相同的HTML应用于sub-menu 不是我想要的元素。

我的目标是sub-menu 要具有以下样式:

<ul>
    <li>
        <h2 class="dropdown-text">Blog 1</h2>
    </li>
    <li>
        <h2 class="dropdown-text">Blog 2</h2>
    </li>
    <li>
        <h2 class="dropdown-text">Blog 3</h2>
    </li>
    <li>
        <h2 class="dropdown-text">Blog 4</h2>
    </li>
</ul>
以下是完整导航的HTML结构

<div class="postit-surround">
<a href="#">
    <div class="postit">
        <div class="pin">
            <img src="<?php echo get_template_directory_uri(); ?>/assets/drawing-pin.png">
        </div>
        <div class="postit-title">
            <h1 class="nav-title-text">Products</h1>
        </div>
        <div class="corner-peel">
            <img src="<?php echo get_template_directory_uri(); ?>/assets/corner-flick-cyan.png">
        </div>
    </div>
</a>
<div class="navigation-dropdown">
    <ul>
        <li>
            <h2 class="dropdown-text">Products 1</h2>
        </li>
        <li>
            <h2 class="dropdown-text">Products 2</h2>
        </li>
        <li>
            <h2 class="dropdown-text">Products 3</h2>
        </li>
        <li>
            <h2 class="dropdown-text">Products 4</h2>
        </li>
        <li>
            <h2 class="dropdown-text">Products 5</h2>
        </li>
    </ul>
</div>
</div>
以下是wp\\U nav\\U菜单的HTML调用:

<div class="navigation-container">
<?php 

$walker = new my_nav_walker;
wp_nav_menu( array( \'theme_location\' => \'header-menu\', \'menu\' => \'ul\', \'menu_class\' => \'navigation\', \'menu_id\' => \'\', \'walker\' => $walker ) ); 


?>
</div>
这是我的自定义Walker HTML的构造:(注意:我对这个很陌生,所以这会很混乱……)

class my_nav_walker extends Walker {
       function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {

            $direct = get_template_directory_uri();

            $item_output = $args->before;
            $item_output .= \'<div class="postit-surround">\';
            $item_output .= \'<a\'. $attributes .\'>\';
            /** This filter is documented in wp-includes/post-template.php */

            $item_output .= \'<div class="postit">
                                    <div class="pin">\';
            $item_output .= \'<img src="\' . $direct . \'/assets/drawing-pin.png">
                                    </div>
                                    <div class="postit-title">
                                            <h1 class="nav-title-text">\';
            $item_output .= $args->link_before . apply_filters( \'the_title\', $item->title, $item->ID ) . $args->link_after;

            $item_output .= \'</h1>
                            </div>
                                    <div class="corner-peel">
                                            <img src="\' . $direct . \'/assets/corner-flick-green.png">
                                    </div>
                            </div>\';
            $item_output .= \'</a>\';
            $item_output .= \'</div>\';
            $item_output .= $args->after;

        }    

} // Walker_Nav_Menu
以下是CSS(如果需要):

PasteBin Link

我不确定我是否正确地进行了构造,以获得我想要的单独样式。

你有什么建议?

有其他选择吗?

对准则的建设性批评?(不要太苛刻!:P)

编辑------:

我在理解php代码方面做了更多的研究,现在我意识到子菜单的开始和结束的定义从哪里开始(使用start\\u lvl和end\\u lvl),但我仍然不知道如何区分哪些代码进入父导航窗格,哪些代码进入各自的子菜单。

This is what I\'m after with the display of the naviagtion: http://jsfiddle.net/TPD5L/

1 个回复
最合适的回答,由SO网友:MortalViews 整理而成

解决方案:将以下代码复制粘贴到函数中。然后在模板使用中

my_nav_menu($menu_location);

//put this in your functions

class MY_Menu_Walker_Ext extends Walker {

    var $tree_type = array(\'post_type\', \'taxonomy\', \'custom\');
    var $db_fields = array(\'parent\' => \'menu_item_parent\', \'id\' => \'db_id\');

    function start_el(&$output, $object, $depth = 0, $args = array(), $current_object_id = 0) {
        $output .="<li><h2 class=\'dropdown-text\'>{$object->title}</h2>";
    }

    function end_el(&$output, $object, $depth = 0, $args = array()) {
        $output.=\'</li>\';
    }

}

class my_custom_menu {

    public $menu;
    public $menuItems;
    public $parents;
    public $walker;

    public function __construct($menu_location) {
        $this->setMenu($menu_location);
        $this->getMenuItems();
        $this->getParents();

        $this->walker = new MY_Menu_Walker_Ext();
    }

    public function drawMenu() {

    }

    public function setMenu($menu_location) {

        $this->menu = $this->getMenuByLocation($menu_location);
    }

    protected function getMenuByLocation($menu_location) {
        $locations = get_nav_menu_locations();

        $menu = null;
        if ($locations && isset($locations[$menu_location])) {
            $menu = wp_get_nav_menu_object($locations[$menu_location]);
        }

        return $menu;
    }

    public function get() {

    }

    public function getMenuItems() {
        if ($this->menuItems)
            return $this->menuItems;
        $this->menuItems = wp_get_nav_menu_items($this->menu);

        return $this->menuItems;
    }

    public function getParents() {
        if ($this->parents)
            return $this->parents;
        $parents = array();

        foreach ($this->menuItems as $item) {
            if ($item->menu_item_parent == 0) {
                array_push($parents, $item);
            }
        }

        $this->parents = $parents;
        return $this->parents;
    }

    public function getChild($parent_id) {

        $childs = array();


        foreach ($this->menuItems as $item) {
            if ($parent_id == $item->menu_item_parent) {
                $item->menu_item_parent = 0;

                array_push($childs, $item);
                foreach ($this->menuItems as $item1) {
                    if ($item->ID == $item1->menu_item_parent) {
                        array_push($childs, $item1);
                    }
                }
            }
        }



        return $childs;
    }

    public function draw() {
        echo "<div class=\'postit-surround\'>";

        foreach ($this->parents as $item) {
            $this->displayParentHTML($item->title);
            $this->drawChildren($this->getChild($item->ID));
        }
        echo "</div>";
    }

    public function displayParentHTML($title) {
        ?>
        <a href="#">
            <div class="postit">
                <div class="pin">
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/drawing-pin.png">
                </div>
                <div class="postit-title">
                    <h1 class="nav-title-text"><?php echo $title ?></h1>
                </div>
                <div class="corner-peel">
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/corner-flick-cyan.png">
                </div>
            </div>
        </a>


        <?php
    }

    public function drawChildren($children) {
        $defaults = array(\'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\' => \'\', \'theme_location\' => \'\');
        $args = array(
            \'theme_location\' => \'header-menu\',
            \'container\' => \'div\',
            \'container_class\' => \'navigation-dropdown\',
            \'items_wrap\' => \'<ul >%3$s</ul>\',
            \'depth\' => 0,
        );
        $args = wp_parse_args($args, $defaults);

        echo "<div class=\'navigation-dropdown\'><ul>";
        echo $this->walker->walk($children, 2, $args);
        echo "</ul></div>";
    }

}

function my_nav_menu($name = null) {
    $myMenu = new my_custom_menu($name);
    $myMenu->draw();
}

结束

相关推荐

如何从wp_NAV_MENU Walker中删除拖尾</li>标记

我已经使用了theme二十三a我的基本主题,并尝试使用了https://stackoverflow.com/questions/12159486/wordpress-change-header-navigation-list-items-to-div 当我尝试验证页面时,我得到一个带有无效尾随的错误</li> 标记我正在尝试从walker类创建此结果<div class=\"box1\"> <a href=\"#\"><span class=\"c