web-dev-qa-db-ja.com

Wordpressメニュー-アンカーにクラスを追加

標準のbootstrap "nav-link"クラスをWordpressメニューによってレンダリングされたアンカーに追加します。これまでのところ...

1 /変数をwp_nav_menu（）に渡すことができます

<?php wp_nav_menu(array(
                            'theme_location' => 'header-menu',
                            'menu_class' => 'navbar-nav',
                            'container' => 'false'
        ) );
        ?>

その方法でメニューにクラスを適用し、含まれているdivを削除します。

2 /次に、Wordpress外観>メニューUIを使用して、「nav-item」クラスをliタグに適用します。

Q。クラスをwordpressメニューアンカーに適用する方法

wordpresswordpress-theming
11
TimothyAURA

WP nav_menu_link_attributes 針：

add_filter( 'nav_menu_link_attributes', function($atts) {
        $atts['class'] = "nav-link";
        return $atts;
}, 100, 1 );

...または、クロージャが気に入らない場合：

function add_link_atts($atts) {
  $atts['class'] = "nav-link";
  return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_link_atts');

メニューリスト項目のフィルター

WordPressメニューUIを使用してメニューリストアイテムにクラスを追加することを回避するには、 'nav_menu_css_class'フィルターを利用できます。

add_filter( 'nav_menu_css_class', function($classes) {
    $classes[] = 'nav-item';
    return $classes;
}, 10, 1 );
33
DavidCara

これにより、クラス[〜＃〜] only [〜＃〜]をSPECIFIC MENのアンカーに追加できます。以下の$menuClassMap値にクラスを追加するだけです。

    function mytheme__menu_anchors_add_css( $atts, $item, $args ) {

        $menuClassMap = [
            'navbar-menu' => 'my-footer-menu-link-class',
            'footer-menu' => 'my-footer-menu-link-class',
        ];

        $additionalClassName = $menuClassMap[$args->menu->slug] ?? '';

        if($additionalClassName){
            if(!array_key_exists('class', $atts)){
                $atts['class'] = '';
            }
            $classList = explode (' ' , $atts['class']);
            $classList[] = $additionalClassName;
            $atts['class'] = implode (' ' , $classList);
        }
        return $atts;

    }

    add_filter( 'nav_menu_link_attributes', 'mytheme__menu_anchors_add_css', 10, 3 );
1
Fusion

wp_nav_menu（）のパラメーター は、デフォルトの機能でクラスをリンクに追加できません。これを使用すると、<a href="#"></a>を<span class="wrapped-anchor"><a href="#"></a></span>のような任意のhtmlで囲むことができます。

<?php 
   $parameters = TimothyAURA->set_specific_parameters_you_want(); // i mean, realy fullfill the array with the options you want based on the docs.
   $parameters['before'] = '<span class="wrapped-anchor">';
   $parameters['after'] = '</span>';
   wp_nav_menu($parameters);

本当にアンカーのクラスを設定する必要がある場合、Walkerオブジェクトを渡す必要があります。ただし、 この特定のドキュメント を読んで理解する必要があります。

1
Rubén Marrero