将自定义类添加到 WordPress 导航中的锚标记

Question

我正在尝试将自定义类添加到 <a> 元素，而不是导航菜单中的 <li>elements。用户可以从后端更改自定义类（使用外观 > 菜单 > css 类可选）。

我已经创建并添加了以下内容到我的functions.php 中以添加一个类......它只工作了一半。它只是不输出自定义菜单 css 类。

function add_nav_class($output) {

$class_names = wp_nav_menu(array ('menu_class'      => '',)
);

$output= preg_replace('/<a/', '<a class="'.$class_names.'"', $output, -1);
return $output;

}
add_filter('wp_nav_menu', 'add_nav_class');

如何从 WordPress 中调用“可选的 css 类”位？

谢谢

Answer 1

我找不到更简单的方法。如果您对 wordpress 比较陌生，它会变得有点复杂。

1.) 首先，您必须创建一个自定义 Walker_Nav_Menu。你可以通过扩展它来做到这一点。 编辑： 制作一个额外的 php 文件，例如my-walker-nav.php 并将其包含到您的functions.php 中，这将比functions.php 中的所有代码更干净

class My_Custom_Walker_Nav extends Walker_Nav_Menu {
    // Code
}

您现在要做的是从standard Walker_Nav_Menu 中复制基本代码（第 17 到 190 行）。

2.) 第二步是向函数start_el 添加附加代码，以使用当前菜单项的ID 来获取它的元信息以获取键_menu_item_classes。

/* Get the optional css class(es)*/
$optional_css_classes = get_post_meta( $item->ID, '_menu_item_classes', true );

3.) 接下来，我们将当前项目菜单 css 类与我们从元数据中获取的类进行比较。请参阅 PHP 数组函数 array_diff。如果两个数组包含相同的值，它将被删除。在我们的例子中，这将是可选的 css 类。

/* Remove all optional css from current li element's class*/
$item->classes = array_diff($item->classes, $optional_css_classes);

现在我们已经从 <li> 元素中删除了可选类。

4.)第四步要求我们将可选的css类添加到<a>元素。

在 nav-menu-template.php 的第 117 行附近找到以下代码：

$atts = array();
$atts['title']  = ! empty( $item->title )   ? $item->title  : '';
$atts['target'] = ! empty( $item->target )  ? $item->target : '';
$atts['rel']    = ! empty( $item->xfn )     ? $item->xfn    : '';

并在其中添加下一行代码：

$atts['class']  = ! empty( $optional_css_classes) ? implode(' ', $optional_css_classes): '';

5.)不要忘记使用您构建的My_Custom_Walker_Nav。在调用wp_nav_menu来声明导航菜单的模板部分（通常在header.php中），您应该将属性walker添加到数组中。

wp_nav_menu( array(
    'theme_location' => 'main-menu',
    /*......*/
    'walker' => new My_Custom_Walker_Nav())
);

现在你应该可以走了。

找到完整的自定义 Walker_Nav_Menu here