Wordpressの：カスタムメニュー、私はCSSフレームワークとカスタムメニューWordPressの使用

Question

タグにクラス "現在のメニュー項目を" 追加：

<?php 
     $menuParameters = array(
      'theme_location' => 'menu-1', 
      'menu_id' => 'primary-menu', 
      'container'  => false, 
      'echo'   => false, 
      'items_wrap'  => '%3$s', 
      'depth'   => 0, 
     ); 

     $output = strip_tags(wp_nav_menu($menuParameters),'<a>'); 
     $output = preg_replace('/<a/', '<a class="nav-item"', $output); 
     echo $output;  
     ?> 

結果：

<div class="nav-right nav-menu"> 
<a class="nav-item" href="/">Page1</a> 
<a class="nav-item" href="/"> Page2</a> 
<a class="nav-item" href="/"> Page3</a> 
    </div> 

そして、何を私がしたい：（私はページ上だ場合は「2ページ」）

<div class="nav-right nav-menu"> 
<a class="nav-item" href="/">Page1</a> 
<a class="nav-item current-menu-item" href="/"> Page2</a> 
<a class="nav-item" href="/"> Page3</a> 
    </div> 

を、私は上のクラスを追加するためのフック、walker_menu、または他の解決策を見つけることができません。現在のメニュー（元のWordpressメニューの "current-menu-item"のようなもの）

ご存知ですか？

ありがとうございました！

Answer 1

アクティブなときに別のクラスを使用する理由はありますか？あなたは:active

を参照してください使用することができます

下記のお$menuParametersにcurrent引数を追加します。のようなものを試してみてください

.nav-item :active{ background:yellow;} 

Answer 2

：https://www.w3schools.com/cssref/sel_active.asp

を次に、あなたのCSSは次のようになります。それでも解決しない場合は

$menuParameters = array(
      'theme_location' => 'menu-1', 
      'menu_id'  => 'primary-menu', 
      'container'  => false, 
      'current'  => max(1, get_query_var('paged')), // added this 
      'echo'   => false, 
      'items_wrap'  => '%3$s', 
      'depth'   => 0, 
     ); 

    $output = strip_tags(wp_nav_menu($menuParameters),'<a>'); 

    $output = preg_replace('/<a/', '<a class="nav-item"', $output); 

    $output = preg_replace('/current', 'current-menu-item', $output); // added this 

    echo $output;  
    ?> 

は、$outputの二preg_replaceで少し再生したり、それを削除し、それだけでクラスcurrentなくcurrent-menu-itemを持っているときだけアクティブな項目を参照してください。あなたがそれを削除すると、私は以下の結果を期待します：

<div class="nav-right nav-menu"> 
    <a class="nav-item" href="/">Page1</a> 
    <a class="nav-item current" href="/"> Page2</a> 
    <a class="nav-item" href="/"> Page3</a> 
</div>