web-dev-qa-db-ja.com

ウォーカー機能でメニュークラスを使用する

とにかく、オプションでオンになっているカスタムメニューのCSSクラスを使用して、ウォーカー関数を介してそれらをli'sではなくspanに適用することはできますか。

私のカスタムウォーカー：

class ik_walker extends Walker_Nav_Menu {

    function start_lvl(&$output, $depth) {
        $GLOBALS['ik_walker_counter'] = 0;
        $output .= '<nav class="site-navigation" role="navigation">'.
            '<ul>';
    }

    function end_lvl(&$output, $depth) {
        $output .= '</ul>'.
            '<button id="menu" class="menu-button" type="button" role="button" aria-label="Menu Toggle">'.
            '<span class="icon-menu"></span>'.
            '</button>'.
            '</div>';
    }

    function start_el(&$output, $item, $depth, $args) {
        global $wp_query;
        $GLOBALS['ik_walker_counter']++;
        $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
        $class_names = $value = '';
        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
        $class_names = ' class="' . esc_attr( $class_names ) . '"';
        $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';
        $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 .= ' class="c'.$GLOBALS['ik_walker_counter'].'"';
        $item_output = $args->before;
        $item_output .= '<a'. $attributes .'>';
        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
        if(strlen($item->description)>2){ $item_output .= '<br /><span class="sub">' . $item->description . '</span>'; }
        $item_output .= '<span class="'. $item->classes .'"></span>';
        $item_output .= '</a>';
        $item_output .= $args->after;
        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }
}

私はこれを試していました：

$item_output .= '<span class="'. $item->classes .'"></span>';

しかし、私はただ得る：

<span class="Array"></span>

これにより、menu cssオプションを使用してクラスを制御できるようになり、それぞれが固有のクラスを持つことができます。

どんな助けでも大いに感謝されるでしょう。

menuswalker
1
Doidgey

すべてのクラス名を結合する：

してみてください：

$item_output .= sprintf( '<span class="%s"></span>', join( ' ', $item->classes ) );

の代わりに

$item_output .= '<span class="'. $item->classes .'"></span>';

$item->classesの配列要素を文字列に結合します。

たとえば、aaa bbb cccをアイテムのクラステキストフィールドに追加すると、次のように表示されます。

 Array
                (
                    [0] => aaa
                    [1] => bbb
                    [2] => ccc
                    [3] => menu-item
                    [4] => menu-item-type-post_type
                    [5] => menu-item-object-post
                )

クラス名を除外します。

itemを含むすべてのクラス名を削除したい場合は、次のようにします。

$item_output .= sprintf( '<span class="%s"></span>', 
                          join( ' ', array_filter( $item->classes, 'custom_filter' ) ) 
                );

配列フィルタコールバックは

/**
 * Only keep items not containing the string 'item'
 *
 * @param string $var
 * @return string $var | '' Empty if contains 'item'
 */

function custom_filter( $var )
{
    return ( FALSE === strpos( $var, 'item' ) ) ? $var : ''; 
}

ps：itemを含むクラス名を削除することで節約できると思いますが、それ以外の場合は必要に応じて変更できます。

1
birgire