web-dev-qa-db-ja.com

カスタムナビゲーションウォーカーメニュー - 子供の数の表示

カスタムのウォーカーメニューがあります（下記のコードを参照）。

私のナビゲーションメニューはこんな感じにしたい

----------------------------------
Home | link1 | link2 | link3 (5)
----------------------------------

5はlink3の子の数です。

誰かが私がこれを実行するのを手伝ってくれる？

これが私の現在のカスタムナビゲーションウォーカーコードです。

<?php
/**
 * Cleaner walker for wp_nav_menu()
 *
 * Walker_Nav_Menu (WordPress default) example output:
 *   <li id="menu-item-8" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8"><a href="/">Home</a></li>
 *   <li id="menu-item-9" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9"><a href="/sample-page/">Sample Page</a></l
 *
 * Roots_Nav_Walker example output:
 *   <li class="menu-home"><a href="/">Home</a></li>
 *   <li class="menu-sample-page"><a href="/sample-page/">Sample Page</a></li>
 */
class Roots_Nav_Walker extends Walker_Nav_Menu {
  function check_current($classes) {
    return preg_match('/(current[-_])|active|dropdown/', $classes);
  }

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

  function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
    $item_html = '';
    parent::start_el($item_html, $item, $depth, $args);

    if ($item->is_dropdown && ($depth === 0)) {
      $item_html = str_replace('<a', '<a class="dropdown-toggle" data-toggle="dropdown" data-target="#"', $item_html);
      $item_html = str_replace('</a>', ' <b class="caret"></b></a>', $item_html);
    }
    elseif (stristr($item_html, 'li class="divider')) {
      $item_html = preg_replace('/<a[^>]*>.*?<\/a>/iU', '', $item_html);
    }
    elseif (stristr($item_html, 'li class="nav-header')) {
      $item_html = preg_replace('/<a[^>]*>(.*)<\/a>/iU', '$1', $item_html);
    }

    $output .= $item_html;
  }

  function display_element($element, &$children_elements, $max_depth, $depth = 0, $args, &$output) {
    $element->is_dropdown = !empty($children_elements[$element->ID]);

    if ($element->is_dropdown) {
      if ($depth === 0) {
        $element->classes[] = 'dropdown';
      } elseif ($depth === 1) {
        $element->classes[] = 'dropdown-submenu';
      }
    }

    parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
  }
}

/**
 * Remove the id="" on nav menu items
 * Return 'menu-slug' for nav menu classes
 */
function roots_nav_menu_css_class($classes, $item) {
  $slug = sanitize_title($item->title);
  $classes = preg_replace('/(current(-menu-|[-_]page[-_])(item|parent|ancestor))/', 'active', $classes);
  $classes = preg_replace('/^((menu|page)[-_\w+]+)+/', '', $classes);

  $classes[] = 'menu-' . $slug;

  $classes = array_unique($classes);

  return array_filter($classes, 'is_element_empty');
}
add_filter('nav_menu_css_class', 'roots_nav_menu_css_class', 10, 2);
add_filter('nav_menu_item_id', '__return_null');

/**
 * Clean up wp_nav_menu_args
 *
 * Remove the container
 * Use Roots_Nav_Walker() by default
 */
function roots_nav_menu_args($args = '') {
  $roots_nav_menu_args['container'] = false;

  if (!$args['items_wrap']) {
    $roots_nav_menu_args['items_wrap'] = '<ul class="%2$s">%3$s</ul>';
  }

  if (current_theme_supports('bootstrap-top-navbar')) {
    $roots_nav_menu_args['depth'] = 3;
  }

  if (!$args['walker']) {
    $roots_nav_menu_args['walker'] = new Roots_Nav_Walker();
  }

  return array_merge($args, $roots_nav_menu_args);
}
add_filter('wp_nav_menu_args', 'roots_nav_menu_args');
menuswalker
3
Giri
function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
    $item_html = '';
    parent::start_el($item_html, $item, $depth, $args);
    $locations = get_nav_menu_locations();
    $menu = wp_get_nav_menu_object( $locations['primary_navigation'] );
    $menu_items = wp_get_nav_menu_items($menu->term_id);
    $count = 0;
    foreach( $menu_items as $menu_item ){
        if( $menu_item->menu_item_parent == $item->ID ){
            $count++;           
        }       
    }
    if ($item->is_dropdown) {
      $item_html = str_replace('</a>', ' <span class="badge">'.$count.'</span></a>', $item_html);
    }
    if ($item->is_dropdown && ($depth === 0)) {
      $item_html = str_replace('<a', '<a class="dropdown-toggle" data-toggle="dropdown" data-target="#"', $item_html);
      $item_html = str_replace('</a>', ' <b class="caret"></b></a>', $item_html);
    }
    elseif (stristr($item_html, 'li class="divider')) {
      $item_html = preg_replace('/<a[^>]*>.*?<\/a>/iU', '', $item_html);
    }
    elseif (stristr($item_html, 'li class="nav-header')) {
      $item_html = preg_replace('/<a[^>]*>(.*)<\/a>/iU', '$1', $item_html);
    }

    $output .= $item_html;
  }
1
Giri

array_mapとarray_count_valuesを使って@ Giriの答えに追加しました。これが将来誰かに役立つなら。私はとても単純なことにカウンターとforeachループを使いたくありませんでした。

function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
    if ($item->hasChildren) {
        $locations = get_nav_menu_locations(); // Getting the locations of the nav menus array.
        $menu = wp_get_nav_menu_object( $locations['primary_navigation'] ); // Getting the menu calling the walker from the array.
        $menu_items = wp_get_nav_menu_items($menu->term_id); // Getting the menu item objects array from the menu.
        $menu_item_parents = array_map(function($o) { return $o->menu_item_parent; }, $menu_items); // Getting the parent ids by looping through the menu item objects array. This will give an array of parent ids and the number of their children.
        $children_count = array_count_values($menu_item_parents)[$item->ID]; // Get number of children menu item has.
    }
}
2
yaharga

別の選択肢は、$item変数がstart_el()関数内に何を含んでいるかを調べることです。

たとえば、menu-orderプロパティが役に立ちます。

function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
    echo $item->menu_order;
}

4つのメニュー項目がある場合、これは1234のように出力されます。

1
sirmdawg

この解決策に対する最も明確なアプローチは、display_elementが（他のすべてのWalker_Xクラスと共に）元のWalkerクラスから使用する$this->has_children関数（Walker_Nav_Menuが設定されている）から子の数を追跡することです。

これはあなたの拡張されたWalker_Nav_Menu関数start_el、start_lvl、end_lvl、end_el、そしてdisplay_elementを使って$this->total_childrenスコープ内に入れ子にされた他の関数の子の数へのアクセスを許します。 ）そして、大きなWalker構造体でたくさんのサーバーリソースを節約します。

class Extended_Walker_Nav_Menu extends Walker_Nav_Menu {
    public $total_children;

    public function display_element( $element, &$children_elements, $max_depth, $depth, $args, &$output ) {
        if ( ! $element ) {
            return;
        }
        $id_field = $this->db_fields['id'];
        $id       = $element->$id_field;
        $this->total_children = 0;
        if ( ! empty( $children_elements[ $id ] ) ) {
            $this->total_children = count( $children_elements[ $id ] );
        }
        parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
    }
}
0
AlexGW