web-dev-qa-db-ja.com

ナビゲーションメニューのアンカーにさまざまなクラスを追加する

これは可能ですか？

アンカーに異なるクラスを追加したいのですが、すべてのアンカーで同じではありません。これどうやってするの？

シモンズ：私はこれを使っています：

function add_nav_class($output) {
    $output= preg_replace('/<a/', '<a class="your-class"', $output, 1);
    return $output;
}
add_filter('wp_nav_menu', 'add_nav_class');

しかし、私はリンクに異なるクラスを追加したいのですが….

とてもこんな感じ：

<li><a class="1></a></li>
<li><a class="2></a></li>

等々...

menusnavigationlinkssub-menu
2
Johan

はい、可能です。

wp_nav_menu_objectsフィルタを使ってこれを達成できます。

function my_wp_nav_menu_objects($objects, $args) {
    foreach($objects as $key => $item) {
        $objects[$key]->classes[] = 'my-class';
    }
    return $objects;
}
add_filter('wp_nav_menu_objects', 'my_wp_nav_menu_objects', 10, 2);

唯一の問題は、これらのクラスが直接リンクではなくli要素に追加されることです。しかし、これはWordPressのデフォルトの動作であり、変更するべきではないと思います。

あなたが本当にそれを変えなければならないならば、それはまだ可能です：

function my_walker_nav_menu_start_el($item_output, $item, $depth, $args) {
    // you can put your if statements in here (use item, depth and args in conditions)
    if ( $depth == 1 ) {
        $item_output = preg_replace('/<a /', '<a class="level-1-menu" ', $item_output, 1);
    } else if ( $depth == 2 )
        $item_output = preg_replace('/<a /', '<a class="level-2-menu" ', $item_output, 1);
    }
    // .. and so on
    return $item_output;
}
add_filter('walker_nav_menu_start_el', 'my_walker_nav_menu_start_el', 10, 4);
2
Krzysiek Dróżdż

あなたは以下のステップに従うことができます：

ステップ1：wp-adminで、[Appearance] - > [Menus]に移動し、メニュー項目の[CSS Class（optional）]にクラスを配置します。メニュー項目に「CSSクラス（オプション）」が表示されない場合は、画面の右上に「画面オプション」があり、「詳細メニュープロパティの表示」の下に「CSSクラス」オプションがあります。

ステップ2：あなたのそれらのフォルダ/ function.phpの下に以下のコードを追加します。

function my_walker_nav_menu_start_el($item_output, $item, $depth, $args) {
    $classes     = implode(' ', $item->classes);
    $item_output = preg_replace('/<a /', '<a class="'.$classes.'"', $item_output, 1);
    return $item_output;
 }
add_filter('walker_nav_menu_start_el', 'my_walker_nav_menu_start_el', 10, 4);

上記のコードがうまくいくことを願っていますが、それでもうまくいかない場合はお知らせください。

5
Hardy Mathew


function my_walker_nav_menu_start_el($item_output, $item, $depth, $args) {

    if (in_array('current-menu-item', $item->classes) ){
    $classes['class'] = 'active ';
    }
    $item_output = preg_replace('/<a /', '<a class="'.$classes['class'].'"', $item_output, 1);
    return $item_output;

 }
add_filter('walker_nav_menu_start_el', 'my_walker_nav_menu_start_el', 10, 4);
0
Vasanthi