Wp_nav_menu'yu özel yürüteç ile böl

En fazla 5 öğe gösteren bir menü oluşturmaya çalışıyorum. Daha fazla öğe varsa, <ul>bir açılır liste oluşturmak için bunları başka bir Öğeye sarmalıdır.

5 veya daha az ürün:

6 Ürün veya daha fazla

Ben bu tür işlevsellik kolayca menü öğeleri sayar ve daha sonra 5 ayrı bir kalan varsa sarar bir walker ile oluşturulabilir biliyorum <ul>. Ama bu yürüteç nasıl yaratılacağını bilmiyorum.

Şu anda menümü gösteren kod şöyledir:

<?php wp_nav_menu( array( 'theme_location' => 'navigation', 'fallback_cb' => 'custom_menu', 'walker' =>new Custom_Walker_Nav_Menu ) ); ?>

Menü kullanıcı tarafından tanımlanmadıysa ve bunun yerine geri dönüş işlevini kullanıyorsa, yürüteçin bir etkisi olmadığını fark ettim. Her iki durumda da çalışmasına ihtiyacım var.

Özel bir Walker kullanarak, start_el()yöntem param'a erişebilir $depth: 0elemnt en iyisi olduğunda ve bu bilgiyi dahili bir sayacı korumak için kullanabiliriz.

Sayaç bir sınıra ulaştığında DOMDocument, tam HTML çıktısından yalnızca son eklenen öğeyi almak, bir alt menüye sarmak ve tekrar HTML'ye eklemek için kullanabiliriz.

Düzenle

Eleman sayısı tam olarak ihtiyacımız olan sayı + 1 olduğunda, örneğin 5 elemanın görünür olması ve menünün 6 olması gerektiğinde, menüyü bölmek mantıklı değildir, çünkü elemanlar her iki şekilde 6 olacaktır. Kod, bunu ele almak için düzenlendi.

İşte kod:

class SplitMenuWalker extends Walker_Nav_Menu {

  private $split_at;
  private $button;
  private $count = 0;
  private $wrappedOutput;
  private $replaceTarget;
  private $wrapped = false;
  private $toSplit = false;

  public function __construct($split_at = 5, $button = '<a href="#">&hellip;</a>') {
      $this->split_at = $split_at;
      $this->button = $button;
  }

  public function walk($elements, $max_depth) {
      $args = array_slice(func_get_args(), 2);
      $output = parent::walk($elements, $max_depth, reset($args));
      return $this->toSplit ? $output.'</ul></li>' : $output;
  }

  public function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0 ) {
      $this->count += $depth === 0 ? 1 : 0;
      parent::start_el($output, $item, $depth, $args, $id);
      if (($this->count === $this->split_at) && ! $this->wrapped) {
          // split at number has been reached generate and store wrapped output
          $this->wrapped = true;
          $this->replaceTarget = $output;
          $this->wrappedOutput = $this->wrappedOutput($output);
      } elseif(($this->count === $this->split_at + 1) && ! $this->toSplit) {
          // split at number has been exceeded, replace regular with wrapped output
          $this->toSplit = true;
          $output = str_replace($this->replaceTarget, $this->wrappedOutput, $output);
      }
   }

   private function wrappedOutput($output) {
       $dom = new DOMDocument;
       $dom->loadHTML($output.'</li>');
       $lis = $dom->getElementsByTagName('li');
       $last = trim(substr($dom->saveHTML($lis->item($lis->length-1)), 0, -5));
       // remove last li
       $wrappedOutput = substr(trim($output), 0, -1 * strlen($last));
       $classes = array(
         'menu-item',
         'menu-item-type-custom',
         'menu-item-object-custom',
         'menu-item-has-children',
         'menu-item-split-wrapper'
       );
       // add wrap li element
       $wrappedOutput .= '<li class="'.implode(' ', $classes).'">';
       // add the "more" link
       $wrappedOutput .= $this->button;
       // add the last item wrapped in a submenu and return
       return $wrappedOutput . '<ul class="sub-menu">'. $last;
   }
}

Kullanımı oldukça basit:

// by default make visible 5 elements
wp_nav_menu(array('menu' => 'my_menu', 'walker' => new SplitMenuWalker()));

// let's make visible 2 elements
wp_nav_menu(array('menu' => 'another_menu', 'walker' => new SplitMenuWalker(2)));

// customize the link to click/over to see wrapped items
wp_nav_menu(array(
  'menu' => 'another_menu',
  'walker' => new SplitMenuWalker(5, '<a href="#">more...</a>')
));

Bunu sadece CSS ile mümkün kılmanın bir yolu bile var. Bunun bazı sınırlamaları var, ama yine de ilginç bir yaklaşım olabileceğini düşündüm:

Sınırlamalar

• Açılır pencerenin genişliğini sabit olarak kodlamanız gerekir
• Tarayıcı Desteği. Temel olarak CSS3 seçicilerine ihtiyacınız var . Ama bunu test etmedim, ancak IE8 kadar her şey çalışması gerekir.
• Bu daha çok bir kavram kanıtıdır. Yalnızca alt öğe yoksa çalışmak gibi çeşitli dezavantajlar vardır.

Yaklaşmak

Gerçekten "Miktar Sorguları" yaratıcı kullanım kullanmıyorum rağmen :nth-childve ~ben son okudum CSS Miktar Sorgular bu çözümün götürdü nelerdi.

Yaklaşım temel olarak şudur:

1. 4.den sonra tüm öğeleri gizle
2. ...Bir beforesözde öğe kullanarak noktalar ekleyin .
3. Noktaları (veya gizli öğelerin herhangi birini) gezdirirken ekstra öğeleri, yani alt menüyü gösterin.

İşte varsayılan bir WordPress menü işaretlemesi için CSS kodu. Satır içi yorum yaptım.

/* Optional: Center the navigation */
.main-navigation {
    text-align: center;
}

.menu-main-menu-container {
    display: inline-block;
}

/* Float menu items */
.nav-menu li {
    float:left;
    list-style-type: none;
}

/* Pull the 5th menu item to the left a bit so that there isn't too
   much space between item 4 and ... */
.nav-menu li:nth-child(4) {
    margin-right: -60px;
}

/* Create a pseudo element for ... and force line break afterwards
   (Hint: Use a symbol font to improve styling) */
.nav-menu li:nth-child(5):before {
    content: "...\A";
    white-space: pre;
}

/* Give the first 4 items some padding and push them in front of the submenu */
.nav-menu li:nth-child(-n+4) {
    padding-right: 15px;
    position: relative;
    z-index: 1;
}

/* Float dropdown-items to the right. Hardcode width of dropdown. */
.nav-menu li:nth-child(n+5) {
    float:right;
    clear: right;
    width: 150px;
}

/* Float Links in dropdown to the right and hide by default */
.nav-menu li:nth-child(n+5) a{
    display: none;      
    float: right;
    clear: right;
}   

/* When hovering the menu, show all menu items from the 5th on */
.nav-menu:hover li:nth-child(n+5) a,
.nav-menu:hover li:nth-child(n+5) ~ li a{
    display: inherit;
}

/* When hovering one of the first 4 items, hide all items after it 
   so we do not activate the dropdown on the first 4 items */
.nav-menu li:nth-child(-n+4):hover ~ li:nth-child(n+5) a{
    display: none;
}

Ayrıca eylemde göstermek için bir jsfiddle oluşturdum: http://jsfiddle.net/jg6pLfd1/

Bunun nasıl çalıştığı hakkında başka sorularınız varsa lütfen yorum bırakın, kodu daha fazla açıklığa kavuşturmaktan memnuniyet duyarız.

wp_nav_menu_itemsFiltre kullanabilirsiniz . Menü çıktısını ve menü bilgi kutusu, kapsayıcı vb.

add_filter('wp_nav_menu_items', 'wpse_180221_nav_menu_items', 20, 2);

function wpse_180221_nav_menu_items($items, $args) {
    if ($args->menu != 'my-menu-slug') {
        return $items;
    }

    // extract all <li></li> elements from menu output
    preg_match_all('/<li[^>]*>.*?<\/li>/iU', $items, $matches);

    // if menu has less the 5 items, just do nothing
    if (! isset($matches[0][5])) {
        return $items;
    }

    // add <ul> after 5th item (can be any number - can use e.g. site-wide variable)
    $matches[0][5] = '<li class="menu-item menu-item-type-custom">&hellip;<ul>'
          . $matches[0][5];

    // $matches contain multidimensional array
    // first (and only) item is found matches array
    return implode('', $matches[0]) . '</ul></li>';
}

Çalışan bir işlev var, ancak en iyi çözüm olup olmadığından emin değilim.

Özel bir yürüteç kullandım:

class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {
function start_el(  &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
    global $wp_query;
    $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

    $classes = empty( $item->classes ) ? array() : (array) $item->classes;
    $classes[] = 'menu-item-' . $item->ID;

    $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args, $depth ) );
    $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

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

    /**
     * This counts the $menu_items and wraps if there are more then 5 items the
     * remaining items into an extra <ul>
     */
    global $menu_items;
    $menu_items = substr_count($output,'<li');
    if ($menu_items == 4) {
      $output .= '<li class="tooltip"><span>...</span><ul class="tooltip-menu">';
    }

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

    $atts = array();
    $atts['title']  = ! empty( $item->attr_title ) ? $item->attr_title : '';
    $atts['target'] = ! empty( $item->target )     ? $item->target     : '';
    $atts['rel']    = ! empty( $item->xfn )        ? $item->xfn        : '';
    $atts['href']   = ! empty( $item->url )        ? $item->url        : '';

    $atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args, $depth );

    $attributes = '';
    foreach ( $atts as $attr => $value ) {
      if ( ! empty( $value ) ) {
        $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
        $attributes .= ' ' . $attr . '="' . $value . '"';
      }
    }

    $item_output = $args->before;
    $item_output .= '<a'. $attributes .'>';
    $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
    $item_output .= '</a>';
    $item_output .= $args->after;

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

  }
}

Gerçek menüyü gösteren işlev aşağıdaki gibidir:

        <?php
        wp_nav_menu( array( 'container' => false, 'theme_location' => 'navigation', 'fallback_cb' => 'custom_menu', 'walker' =>new Custom_Walker_Nav_Menu ) );
        global $menu_items;
        // This adds the closing </li> and </ul> if there are more then 4 items in the menu
        if ($menu_items > 4) {
            echo "</li></ul>";
        }
        ?>

Genel değişken $ menu_items bildirdim ve kapanış <li>ve <ul>-tags göstermek için kullandım. Muhtemelen bunu özel yürüteç içinde yapmak mümkündür, ama nerede ve nasıl bulamadım.

İki sorun: 1. Menüde sadece 5 Öğe varsa, son öğeyi de bir alternatif haline getirir, buna gerek yoktur.

2. Sadece kullanıcı theme_location için bir menü tahsis ederse çalışır, wp_nav_menu geri dönüş işlevini gösteriyorsa yürüteç ateş etmez