메뉴 및 하위 메뉴 Wordpress 용 PHP

Question

HTML 구조가 있으며 클래스 및 ID를 유지 관리하는 WordPress 메뉴의 메뉴 요소를 변경하려면 wp_get_nav_menu_items() 및 for each을 사용하여 얻을 수있는 요소를 변경하고 싶습니다. 어떻게해야할지 모르겠다.

부모와 하위 메뉴 WP 메뉴 카테고리에 대한 모든 카테고리가 메뉴를 갖는 5 단계의 깊이까지 변경됩니다. 예를 들어 기기를 첫 번째 항목 깊이 0으로 대체하고 두 번째 레벨의 휴대 전화를 변경하고 변경합니다.

<!-- mp-menu --> 
       <nav id="mp-menu" class="mp-menu mp-overlap"> 
        <div class="mp-level mp-level-open" data-level="1"> 
         <h2 class="icon icon-world">All Categories</h2> 
         <ul> 
          <li class="icon icon-arrow-left"> 
           <a class="icon icon-display" href="#">Devices</a> 
           <div class="mp-level" data-level="2"> 
            <h2 class="icon icon-display">Devices</h2> 
            <a class="mp-back" href="#">back</a> 
            <ul> 
             <li class="icon icon-arrow-left"> 
              <a class="icon icon-phone" href="#">Mobile Phones</a> 
              <div class="mp-level"> 
               <h2>Mobile Phones</h2> 
               <a class="mp-back" href="#">back</a> 
               <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 class="icon icon-arrow-left"> 
              <a class="icon icon-tv" href="#">Televisions</a> 
              <div class="mp-level"> 
               <h2>Televisions</h2> 
               <a class="mp-back" href="#">back</a> 
               <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 class="icon icon-arrow-left"> 
              <a class="icon icon-camera" href="#">Cameras</a> 
              <div class="mp-level"> 
               <h2>Cameras</h2> 
               <a class="mp-back" href="#">back</a> 
               <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 class="icon icon-arrow-left"> 
           <a class="icon icon-news" href="#">Magazines</a> 
           <div class="mp-level"> 
            <h2 class="icon icon-news">Magazines</h2> 
            <a class="mp-back" href="#">back</a> 
            <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 class="icon icon-arrow-left"> 
           <a class="icon icon-shop" href="#">Store</a> 
           <div class="mp-level"> 
            <h2 class="icon icon-shop">Store</h2> 
            <a class="mp-back" href="#">back</a> 
            <ul> 
             <li class="icon icon-arrow-left"> 
              <a class="icon icon-t-shirt" href="#">Clothes</a> 
              <div class="mp-level"> 
               <h2 class="icon icon-t-shirt">Clothes</h2> 
               <a class="mp-back" href="#">back</a> 
               <ul> 
                <li class="icon icon-arrow-left"> 
                 <a class="icon icon-female" href="#">Women's Clothing</a> 
                 <div class="mp-level"> 
                  <h2 class="icon icon-female">Women's Clothing</h2> 
                  <a class="mp-back" href="#">back</a> 
                  <ul> 
                   <li><a href="#">Tops</a></li> 
                   <li><a href="#">Dresses</a></li> 
                   <li><a href="#">Trousers</a></li> 
                   <li><a href="#">Shoes</a></li> 
                   <li><a href="#">Sale</a></li> 
                  </ul> 
                 </div> 
                </li> 
                <li class="icon icon-arrow-left"> 
                 <a class="icon icon-male" href="#">Men's Clothing</a> 
                 <div class="mp-level"> 
                  <h2 class="icon icon-male">Men's Clothing</h2> 
                  <a class="mp-back" href="#">back</a> 
                  <ul> 
                   <li><a href="#">Shirts</a></li> 
                   <li><a href="#">Trousers</a></li> 
                   <li><a href="#">Shoes</a></li> 
                   <li><a href="#">Sale</a></li> 
                  </ul> 
                 </div> 
                </li> 
               </ul> 
              </div> 
             </li> 
             <li> 
              <a class="icon icon-diamond" href="#">Jewelry</a> 
             </li> 
             <li> 
              <a class="icon icon-music" href="#">Music</a> 
             </li> 
             <li> 
              <a class="icon icon-food" href="#">Grocery</a> 
             </li> 
            </ul> 
           </div> 
          </li> 
          <li><a class="icon icon-photo" href="#">Collections</a></li> 
          <li><a class="icon icon-wallet" href="#">Credits</a></li> 
         </ul> 

        </div> 
       </nav> 
       <!-- /mp-menu --> 

Answer 1

당신은 N 레벨 HTML 메뉴 구조를 넣으려면 WordPress의 nav 메뉴 워커 클래스를 사용자 정의 할 수 있습니다. 그녀는 워커

탐색 부트 스트랩의 예를이 사용 방법

if (!class_exists('BootstrapBasicMyWalkerNavMenu')) { 
class BootstrapBasicMyWalkerNavMenu extends Walker_Nav_Menu 
{ 


    //Overwrite display_element function to add has_children attribute. Not needed in >= Wordpress 3.4 
    /** 
    * @link https://gist.github.com/duanecilliers/1817371 copy from this url 
    */ 
    function display_element($element, &$children_elements, $max_depth, $depth = 0, $args, &$output) 
    { 
     if (!$element) 
      return; 
     $id_field = $this->db_fields['id']; 

     //display this element 
     if (is_array($args[0])) 
      $args[0]['has_children'] = !empty($children_elements[$element->$id_field]); 
     else if (is_object($args[0])) 
      $args[0]->has_children = !empty($children_elements[$element->$id_field]); 
     $cb_args = array_merge(array(&$output, $element, $depth), $args); 
     call_user_func_array(array(&$this, 'start_el'), $cb_args); 

     $id = $element->$id_field; 

     // descend only when the depth is right and there are childrens for this element 
     if (($max_depth == 0 || $max_depth > $depth + 1) && isset($children_elements[$id])) { 

      foreach ($children_elements[$id] as $child) { 

       if (!isset($newlevel)) { 
        $newlevel = true; 
        //start the child delimiter 
        $cb_args = array_merge(array(&$output, $depth), $args); 
        call_user_func_array(array(&$this, 'start_lvl'), $cb_args); 
       } 
       $this->display_element($child, $children_elements, $max_depth, $depth + 1, $args, $output); 
      } 
      unset($children_elements[$id]); 
     } 

     if (isset($newlevel) && $newlevel) { 
      //end the child delimiter 
      $cb_args = array_merge(array(&$output, $depth), $args); 
      call_user_func_array(array(&$this, 'end_lvl'), $cb_args); 
     } 

     //end this element 
     $cb_args = array_merge(array(&$output, $element, $depth), $args); 
     call_user_func_array(array(&$this, 'end_el'), $cb_args); 
    }// display_element 


    /** 
    * @link https://gist.github.com/duanecilliers/1817371 copy from this url 
    */ 
    public function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) 
    { 
     if ((is_object($item) && $item->title == null) || (!is_object($item))) { 
      return ; 
     } 

     $indent = ($depth) ? str_repeat("\t", $depth) : ''; 

     $li_attributes = ''; 
     $class_names = $value = ''; 

     $classes = empty($item->classes) ? array() : (array) $item->classes; 
     //Add class and attribute to LI element that contains a submenu UL. 
     if (is_object($args) && $args->has_children) { 
      //$classes[] = 'dropdown'; 
      $li_attributes .= ' data-dropdown="dropdown"'; 
     } 
     $classes[] = 'menu-item-' . $item->ID; 
     //If we are on the current page, add the active class to that menu item. 
     $classes[] = ($item->current) ? 'active' : ''; 

     //Make sure you still add all of the WordPress classes. 
     $class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args)); 
     $class_names = ' class="' . esc_attr($class_names) . '"'; 

     $id = apply_filters('nav_menu_item_id', 'menu-item-' . $item->ID, $item, $args); 
     $id = strlen($id) ? ' id="' . esc_attr($id) . '"' : ''; 

     $output .= $indent . '<li' . $id . $value . $class_names . $li_attributes . '>'; 

     //Add attributes to link element. 
     $attributes = !empty($item->attr_title) ? ' title="' . esc_attr($item->attr_title) . '"' : ''; 
     $attributes .=!empty($item->target) ? ' target="' . esc_attr($item->target) . '"' : ''; 
     $attributes .=!empty($item->xfn) ? ' rel="' . esc_attr($item->xfn) . '"' : ''; 
     $attributes .=!empty($item->url) ? ' href="' . esc_attr($item->url) . '"' : ''; 
     $attributes .= (is_object($args) && $args->has_children) ? ' class="dropdown-toggle" data-toggle="dropdown"' : ''; 

     $item_output = (is_object($args)) ? $args->before : ''; 
     $item_output .= '<a' . $attributes . '>'; 
     $item_output .= (is_object($args) ? $args->link_before : '') . apply_filters('the_title', $item->title, $item->ID) . (is_object($args) ? $args->link_after : ''); 
     $item_output .= (is_object($args) && $args->has_children) ? ' <span class="caret"></span> ' : ''; 
     $item_output .= '</a>'; 
     $item_output .= (is_object($args) ? $args->after : ''); 

     $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args); 
    }// start_el 


    public function start_lvl(&$output, $depth = 0, $args = array()) 
    { 
     $indent = str_repeat("\t", $depth); 
     $output .= "\n$indent<ul class=\"sub-menu dropdown-menu\">\n"; 
    } 


} 
} 

,이 뜻이 당신을 도와줍니다

<?php wp_nav_menu(array('theme_location' => 'your-menu-location', 'container' => false, 'menu_class' => 'nav navbar-nav', 'walker' => new BootstrapBasicMyWalkerNavMenu())); ?> 

희망입니다. 자세한 내용은

,

• Understanding the Walker Class
• WP Bootstrap Navwalker
• Custom Nav Menu Walker Function