web-dev-qa-db-fra.com

Construction HTML du sous-menu Nav Walker personnalisé

J'ai configuré mon Nav Walker personnalisé et il fonctionne correctement avec les éléments du menu principal et les affiche comme je le souhaite.

Cependant, le même code HTML est appliqué aux éléments sub-menu, ce qui n'est pas ce que je veux.

Je vise à obtenir le sub-menu pour avoir le style suivant:

<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>

Voici la structure HTML pour la navigation complète

<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>

Voici l'appel HTML pour le wp_nav_menu:

<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>

Voici la construction de mon HTML personnalisé Walker: (NOTE: je suis vraiment nouveau dans ce domaine, donc ça va être compliqué ...)

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

Voici le CSS si nécessaire:

Pastebin Link

Je ne sais pas si je suis en train de construire correctement pour obtenir le style séparé que je veux.

Que conseilleriez-vous?

Y a-t-il des alternatives?

Critique constructive sur le code? (Ne soyez pas trop dur!: P)

MODIFIER -----:

J'ai fait quelques recherches supplémentaires pour comprendre le code php, et je réalise maintenant où commence la définition du début et de la fin du sous-menu (avec start_lvl et end_lvl), mais je ne comprends toujours pas comment séparer ce code va dans les volets de navigation Parent et dans leurs sous-menus respectifs.

C’est ce que je cherche après l’affichage de la navigation: http://jsfiddle.net/TPD5L/

menusnavigationsub-menuwalker
1
Mallander

Solution: Copiez-collez le code ci-dessous dans votre fonction. puis dans l'utilisation du modèle

my_nav_menu($menu_location);

// mettez ceci dans vos fonctions 

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();
}
2
MortalViews