如何在 WordPress NAV 锚标签中添加 CSS 类？

Posted 2023-03-06

【中文标题】如何在 WordPress NAV 锚标签中添加 CSS 类？

【英文标题】：How to add CSS class in WordPress NAV anchor tag?

【发布时间】：2018-05-11 12:34:31

【问题描述】：

我正在使用 Bootstrap 4，我的菜单结构如下：

<ul class="navbar-nav mx-auto justify-content-center">
    <li class="nav-item">
        <a class="nav-link" href="index.php">HOME</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="faq.php">FAQ</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="rules-and-regulations.php">RULES AND REGULATIONS</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="javascript:void(0)">REGISTRATION</a>
    </li>
</ul>

这是我的function.php 文件的代码：

function menu_classes($classes, $item, $args) 
  if($args->theme_location == 'primary') 
    $classes[] = 'nav-item';
  
  return $classes;

add_filter('nav_menu_css_class','menu_classes',1,3);

我可以轻松地将nav-item 类添加到li 标记中，但我也想将nav-link 类添加到锚标记中。

我在 header.php 文件中调用 WP Nav，如下所示：

<?php
wp_nav_menu( array(
   'theme_location' => 'primary',
   'depth' => 2,
   'container' => false,
   'menu_class' => 'navbar-nav mx-auto justify-content-center',
   'direct_parent' => true, 
   'sub_menu' => true,
   'show_parent' => true
));
?>

【问题讨论】：

您需要使用 wp_nav_walker 类来实现这一点。或者您可以使用 jQuery 来实现。

是的，我可以，但是有没有其他方法可以在不使用 jQuery / wp_nav_walker 的情况下添加类？

你试过这个答案wordpress.stackexchange.com/a/241072/103815 吗？

【参考方案1】：

在你的function.php文件中添加这个函数

function my_walker_nav_menu_start_el($item_output, $item, $depth, $args) 
//    $classes     = implode(' ', $item->classes);
    $classes     = 'my-class';
    $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);