Wordpress 菜单 - 向锚点添加类

Posted 2023-03-06

【中文标题】Wordpress 菜单 - 向锚点添加类

【英文标题】：Wordpress Menu - Add class to anchors

【发布时间】：2017-08-17 01:50:03

【问题描述】：

尝试将标准引导程序“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 Appearances > Menu UI 将“nav-item”类应用于 li 标签。

问。如何将类应用于 wordpress 菜单锚的

【问题讨论】：

为避免在菜单 UI 中添加类，您可以使用“nav_menu_css_class”。我会把这个添加到我的答案中......

【参考方案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 向菜单列表项添加类，您可以利用“nav_menu_css_class”过滤器：

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

【讨论】：

这些过滤器没有出现在 wordpress 的过滤器挂钩参考中：codex.wordpress.org/Plugin_API/Filter_Reference。确定它们存在吗？

nav_menu_link_attributes 有效，我还没试过 nav_menu_css_class

@127.0.0.1 是的，它们存在！查看wp-includes/class-walker-nav-menu.php 第 136 和 179 行

很高兴@TimothyAURA，请考虑将答案标记为正确。

好的，谢谢，我会照顾好工作的。如果他们确实计入我的赞成票。很高兴有这样的东西，虽然它们并不总是被记录在案:(--编辑：好的，我会接受 TimothyAURA 的话。

【参考方案2】：

如果您的网站上有多个菜单，或者只是想灵活一些。您可以扩展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);

【参考方案3】：

这允许您将类ONLY添加到SPECIFIC MENU的锚点。只需将您的类添加到下面的 $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 );

【参考方案4】：

wp_nav_menu()'s parameters 不允许您使用默认功能向链接添加类。如果您使用，它将允许您将 <a href="#"></a> 包含在任何 html 中，例如 <span class="wrapped-anchor"><a href="#"></a></span>：

<?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 的相关内容。

【讨论】：

不是一个好的解决方案。我在这里有一个更好的解决方案。 ***.com/a/67859550/9207553

【参考方案5】：

如果您想在特定菜单的锚标记中添加一个类，则可以使用以下步骤

Step-1：在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',
    ));
?>