Jak mogę dodać div wokół wordpress ul pojemnika

Question

Wordpress Wyjścia moje menu podrzędne wewnątrz tego znacznika ul ...

<ul class="sub-menu"> 

jak mogę owinąć prosty div wokół niego?

Najlepiej zrobić to poprzez functions.php, ale jquery też może działać.

Answer 1

Podczas gdy byłoby łatwo użyć czegoś takiego jak jQuery do zawijania menu podrzędnych, NIE jest dobrą praktyką używanie jQuery do tego celu. Umieść to w functions.php:

class Child_Wrap extends Walker_Nav_Menu 
{ 
    function start_lvl(&$output, $depth = 0, $args = array()) 
    { 
     $indent = str_repeat("\t", $depth); 
     $output .= "\n$indent<div class=\"custom-sub\"><ul class=\"sub-menu\">\n"; 
    } 
    function end_lvl(&$output, $depth = 0, $args = array()) 
    { 
     $indent = str_repeat("\t", $depth); 
     $output .= "$indent</ul></div>\n"; 
    } 
} 

jestem przy założeniu, że menu jest generowane w nagłówku, więc idź do header.php (lub cokolwiek plik wykorzystuje funkcję wp_nav_menu) i patrzeć na wszystko, co zaczyna z "wp_nav_menu".

Ponieważ nie mam żadnego kodu do wyświetlenia, mogę tylko odgadnąć argumenty, których używa (jeśli są). Jeśli wygląda dokładnie tak samo jak „wp_nav_menu()” z niczego pomiędzy nawiasami, a następnie zmienić go na następujące kwestie:

wp_nav_menu(array('walker' => new Child_Wrap())) 

W przeciwnym razie, proszę edytować swoje pytanie z kodem, że menu jest przy użyciu tak mogę pomóc dalej.

Answer 2

W function.php

class Child_Wrap extends Walker_Nav_Menu 
{ 
    function start_lvl(&$output, $depth) 
    { 
     $indent = str_repeat("\t", $depth); 
     $output .= "\n$indent<div class=\"sub-menu-wrapper\"><ul class=\"sub-menu\">\n"; 
    } 
    function end_lvl(&$output, $depth) 
    { 
     $indent = str_repeat("\t", $depth); 
     $output .= "$indent</ul></div>\n"; 
    } 
} 

wywołanie funkcji gdzie wp_nav_menu znajduje. (Ex: header.php)

$defaults = array('container' => 'ul', 'menu_class' => 'scroll', 'menu_id' => 'main-menu-nav' , 'walker' => new Child_Wrap()); 

wp_nav_menu($defaults); 

Jeśli chcesz to zrobić przy użyciu jQuery , możesz to zrobić w następujący sposób. Ale najlepsze sposoby to pierwsza metoda. W tym miejscu czasami wyświetla się jako pomieszane menu podczas ładowania strony.

jQuery('ul.sub-menu').wrap('<div class="sub-menu-wrapper" />');