2017-12-26 48 views
0

私はHTML構造を持っていて、クラスとIDを維持しているWordPressメニューのメニュー要素を変更したいのですが、wp_get_nav_menu_items()for eachを使用して取得した要素方法を知らない。メニューとサブメニューPHP for Wordpress

親カテゴリとサブアイテムWPカテゴリのすべてのカテゴリがメニューを持つ深さの5レベルまで変更されています。たとえば、Devicesを最初のアイテムの深さ0で置き換え、2番目のレベルの携帯電話を変更して、変更を行います。

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

答えて

0

あなたはNレベルのHTMLメニュー構造を置くためにwordpressのnavメニューウォーカークラスをカスタマイズすることができます。彼女は、ブートストラップ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())); ?> 

・ホープ、この意志はあなたを助けた例です。詳細について

関連する問題