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

Posted 2023-03-06

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

【英文标题】：Adding custom classes to the anchor tag within the WordPress Nav

【发布时间】：2015-07-16 19:29:43

【问题描述】：

我正在尝试将自定义类添加到 <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 类”位？

谢谢

【问题讨论】：

看看以下指南：sevenspark.com/how-to/…

我已经知道该怎么做 Robin，我试图只将类添加到 Anchor 标签而不是 li

我已经更新了我的答案，现在应该可以了。

【参考方案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

【讨论】：

感谢您的回复。那真的很有帮助。我刚刚查看了您创建的上面的代码，它非常相似，因为它将类添加到锚标记。但它仍然没有从后端输出“CSS CLASSES”字段中的确切数据。我对 WP 很陌生，所以我不确定出了什么问题。您能否详细说明“class-css”，以便它可以在我的网站上使用？目前其输出如下（html）websiteco.uk/products" class="class-css">Products

我希望它输出从 wordpress 后端的自定义 CSS 字段输入的数据。所以像 Products 目前它的输出正好是产品 在每个菜单项之前（它不是动态的）

太棒了 - 非常感谢罗宾 :-)

如果这对您有用，我会很高兴将其标记为正确。谢谢