現在のメニュー項目クラスをワードプレスメニューテンプレートに追加する

Question

私はスケーリングのためにメニュー項目内のブートストラップのようなものを使用するために私自身のメニューテンプレートを使用しようとしてきました。今までそれは信じられないほどうまく動作しますが、私は問題を見つけました。

いくつかのクラスを追加したり削除したりすることで、誤ってアクティブなメニューアイテムスタイリングのための.current-menu-item classのような標準クラスが削除されました。私はGoogleとスタックの答えのいくつかを試してきましたが、悲しいことに良い解決策を見つけることができませんでした。だから、これは私が今持っているものです。

/** 
* Class walker_home_menu 
* Menu for the home page 
*/ 
class walker_home_menu extends Walker_Nav_Menu 
{ 

    // Displays start of an element. E.g '<li> Item Name' 
    // @see Walker::start_el() 
    // In your functions.php 

    function start_lvl(&$output, $depth = 0, $args = array()) 
    { 
     $indent = str_repeat("\t", $depth); 
     $output .= "\n$indent\n"; 
    } 

    function end_lvl(&$output, $depth = 0, $args = array()) 
    { 
     $indent = str_repeat("\t", $depth); 
     $output .= "$indent\n"; 
    } 

    function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) 
    { 
     $indent = ($depth) ? str_repeat("\t", $depth) : ''; 
     $class_names = $value = ''; 
     $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)); 
     $class_names = $class_names ? ' class="' . esc_attr($class_names) . '"' : ''; 
     $id = apply_filters('nav_menu_item_id', 'menu-item-' . $item->ID, $item, $args); 
     $id = $id ? ' id="' . esc_attr($id) . '"' : ''; 
     $output .= $indent . ''; 
     $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) . '"' : ''; 
     $item_output = '<li class="col-lg-2 col-md-2 col-sm-3 col-xs-6 home-menu-item text-center">'; 
     $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; 
     $item_output .= "</li>"; 
     $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args); 
    } 

    function end_el(&$output, $item, $depth = 0, $args = array()) 
    { 
     $output .= "\n"; 
    } 
} 

私が達成したい目標は、私がアクティブなメニュー項目に異なる背景を与えることができるよように、アクティブなメニュー項目のためのactiveクラスを追加することです-color throught CSS。

事前にお世話になりました！ ハッピーコーディング！

Answer 1

私は私の質問に解決策を見つけました。私は多くのことが作成されると思うので、私は自分の質問に答えるカスタムメニューを作成するのが好きです。

私のコードを投稿する前に、$class_itemsという変数を<li class="..">セクションに追加しようとしました。しかし、私はどんなsuccesも持っていませんでした。今まで少なくとも。

答えは、WordPressのメニュー項目のクラスを正しく追加することです。以下のコードを参照してください。

 $item_output = '<li class="col-lg-2 col-md-2 col-sm-3 col-xs-6 home-menu-item text-center' . $class_names . '">'; 

.activeスタイリングのための.current-menu-itemのようなワードプレスのクラス名は、私は自分自身を作った新しい作成したレイアウトの後に追加されます。

これは、この問題を抱えているすべての人に役立ちます。

私のコードをベースとしてコピーしたい人のためのシンプルなソリューションは、ここでは最後の作業スニペットです。

/** 
* Class walker_home_menu 
* Menu for the home page 
*/ 
class walker_home_menu extends Walker_Nav_Menu 
{ 

    // Displays start of an element. E.g '<li> Item Name' 
    // @see Walker::start_el() 
    // In your functions.php 

    function start_lvl(&$output, $depth = 0, $args = array()) 
    { 
     $indent = str_repeat("\t", $depth); 
     $output .= "\n$indent\n"; 
    } 

    function end_lvl(&$output, $depth = 0, $args = array()) 
    { 
     $indent = str_repeat("\t", $depth); 
     $output .= "$indent\n"; 
    } 

    function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) 
    { 
     $indent = ($depth) ? str_repeat("\t", $depth) : ''; 
     $class_names = $value = ''; 
     $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)); 
     $class_names = $class_names ? ' ' . esc_attr($class_names) . '"' : ''; 
     $id = apply_filters('nav_menu_item_id', 'menu-item-' . $item->ID, $item, $args); 
     $id = $id ? ' id="' . esc_attr($id) . '"' : ''; 
     $output .= $indent . ''; 
     $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) . '"' : ''; 
     $item_output = '<li class="col-lg-2 col-md-2 col-sm-3 col-xs-6 home-menu-item text-center' . $class_names . '">'; 
     $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; 
     $item_output .= "</li>"; 
     $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args); 
    } 

    function end_el(&$output, $item, $depth = 0, $args = array()) 
    { 
     $output .= "\n"; 
    } 
} 

乾杯とハッピーコーディング！