Question

尝试添加标准bootstrap＆＃34; nav-link＆＃34;类到Wordpress菜单呈现的锚点。到目前为止......

1 /我可以将变量传递给wp_nav_menu（）

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

并将一个类应用于该菜单，并删除包含div。

2 /我然后使用Wordpress外观＆gt;要应用的菜单UI＆＃34; nav-item＆＃34; class to li tags。

问。如何将课程应用于wordpress菜单锚点

Answer 1

您可以使用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将类添加到菜单列表项，您可以利用＆＃39; nav_menu_css_class＆＃39;过滤器：

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

Answer 2

wp_nav_menu()'s parameters不允许您使用默认功能向您的链接添加课程。如果您使用的话，它允许您将<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对象。不过，您需要阅读并理解this specific docs。

Answer 3

这使您可以仅添加类到特定菜单的锚点。只需将您的类添加到下面的$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 );

Answer 4

如果您的站点上有多个菜单，或者只是想保持灵活性。您可以扩展wp_nav_menu内置函数：

只需将add_a_class添加到您的wp_nav_menu函数中：

wp_nav_menu(
    array(
        'theme_location'  => 'primary',
        'depth'           => 2,
        'container'       => 'div',
        'add_a_class'     => 'class1 class2',
        'fallback_cb'     => false,
    )
);

在您的functions.php中添加以下代码：

function add_additional_class_on_a($classes, $item, $args)
{
    if (isset($args->add_a_class)) {
        $classes['class'] = $args->add_a_class;
    }
    return $classes;
}

add_filter('nav_menu_link_attributes', 'add_additional_class_on_a', 1, 3);

Answer 5

如果你想在特定菜单的锚标签中添加一个类，那么可以使用以下步骤

第一步：在functions.php中添加这个

function add_class_on_a_tag($classes, $item, $args)
{
    if (isset($args->add_a_class)) {
        $classes['class'] = $args->add_a_class;
    }
return $classes;
}

add_filter('nav_menu_link_attributes', 'add_class_on_a_tag', 1, 3);

第 2 步：- 在您的主题中像这样使用

<?php
    // Show Menu here
    wp_nav_menu(array(
        'theme_location' => 'my-menu',
        'menu_class'      => 'footer-top',
        'add_a_class'     => 'nav-link',
    ));
?>

Wordpress菜单 - 将类添加到锚点

5 个答案:

过滤菜单列表项