使用自定义Walker拆分wp_NAV_MENU

时间:2015-03-05 作者:Snowball

我正在尝试创建一个最多显示5个项目的菜单。如果有更多项目,则应将其包装到另一个项目中<ul> 元素创建下拉列表。

5项或更少:

Dropdown

6项或更多

Dropdown

我知道这类功能可以很容易地用一个助行器创建,该助行器可以计算菜单项的数量,如果有5个以上的菜单项,则将其包装成一个单独的<ul>. 但我不知道如何创造这个步行者。

当前显示我的菜单的代码如下:

<?php wp_nav_menu( array( \'theme_location\' => \'navigation\', \'fallback_cb\' => \'custom_menu\', \'walker\' =>new Custom_Walker_Nav_Menu ) ); ?>
我注意到,如果菜单不是由用户定义的,而是使用了回退功能,那么walker就没有任何效果。我需要它在两种情况下都起作用。

4 个回复
最合适的回答,由SO网友:gmazzap 整理而成

使用自定义助行器start_el() 方法有权访问$depth 参数:当它是0 元素是顶级元素,我们可以使用此信息维护内部计数器。

当计数器达到极限时,我们可以使用DOMDocument 要从完整的HTML输出中获得最后添加的元素,请将其包装在子菜单中,然后再次添加到HTML中。

编辑当元素数正好是我们所需的数字+1时,例如,我们要求5个元素可见,而菜单有6个元素,则拆分菜单没有意义,因为无论哪种方式,元素都是6。对代码进行了编辑以解决此问题。

代码如下:

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;
   }
}
用法非常简单:

// 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>\')
));

SO网友:kraftner

甚至有一种方法可以单独使用CSS实现这一点。这有一些局限性,但我仍然认为这可能是一种有趣的方法:

限制您需要对下拉列表的宽度进行硬编码以支持浏览器。你基本上需要CSS3 selectors. 但从IE8到现在的一切都应该正常工作,尽管我还没有测试过这个:nth-child 和~ 我最近读了Quantity Queries for CSS 是什么让我找到了这个解决方案。

方法基本上是这样的:

隐藏第4次添加后的所有项目... 点使用before 伪元素

/* 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;
}
我还创建了一个JSFIDLE来实际显示它:http://jsfiddle.net/jg6pLfd1/

如果您还有任何问题,请留下评论,我很乐意进一步澄清代码。

SO网友:mjakic

您可以使用wp_nav_menu_items 滤器它接受菜单输出和保存菜单属性的参数,如菜单slug、容器等。

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>\';
}

SO网友:Snowball

获得了一个工作函数,但不确定它是否是最佳解决方案。

我使用了一个定制的助行器:

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

  }
}
显示实际菜单的功能如下:

        <?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>";
        }
        ?>
我声明了全局变量$menu\\u items,并使用它来显示结束<li><ul>-标签。很可能在定制助行器中也能做到这一点,但我没有找到在哪里以及如何做到这一点。

Two problems:1、如果菜单中只有5个项目,它会将最后一个项目也包装成一个虽然没有必要的项目。

如果用户实际为主题位置分配了一个菜单,那么它就可以工作,如果wp\\u nav\\u菜单显示了回退功能,那么助行器不会启动

结束

相关推荐

自定义Walker_NAV_MENU以在项目为类别时显示帖子

我想定制导航菜单漫游器,这样当它遇到一个类别时,它会自动生成菜单项的5个最新帖子子项。有没有一种方法可以动态地将项目添加到菜单对象,或者在start\\el函数中设置一个条件更好?