如何在 Wordpress 中使用 wp_nav_menu() 在 <li> 中添加类？
Posted
技术标签:
【中文标题】如何在 Wordpress 中使用 wp_nav_menu() 在 <li> 中添加类？【英文标题】：How to add Class in <li> using wp_nav_menu() in Wordpress? 【发布时间】：2013-01-06 00:49:43 【问题描述】：我正在使用wp_nav_menu($args)，我想将my_own_class CSS 类名添加到<li> 元素。
我想得到以下结果：
<li class='my_own_class'><a href=''>Link</a>
怎么做？
【问题讨论】：
这个函数有很好的文档记录，但是向 ul 添加一个类或用一些东西包装链接内容并相应地更改你的 CSS 似乎要容易得多（你可以选择自定义 walker）：@987654321 @ 或者..您可以创建自己的 Menu Walker (Codex) 并在您的wp_nav_menu() 函数中使用它..
【参考方案1】：
无需创建自定义walker。只需使用附加参数并为 nav_menu_css_class 设置过滤器。
例如：
$args = array(
'container' => '',
'theme_location'=> 'your-theme-loc',
'depth' => 1,
'fallback_cb' => false,
'add_li_class' => 'your-class-name1 your-class-name-2'
);
wp_nav_menu($args);
注意新的“add_li_class”参数。
并在functions.php上设置过滤器
function add_additional_class_on_li($classes, $item, $args)
if(isset($args->add_li_class))
$classes[] = $args->add_li_class;
return $classes;
add_filter('nav_menu_css_class', 'add_additional_class_on_li', 1, 3);
【讨论】：
不错的解决方案。如果我是 OP，我会接受这个作为答案。 最佳解决方案 IMO，通用且干净 最佳解决方案，但我需要修改它以避免出现错误 "Undefined property: stdClass::$item_class" Solution: if(isset($args->item_class) ) ...等 参数1和3的作用是什么？请解释一下。 这对我不起作用。而不是isset($args->add_li_class)，我不得不添加array_key_exists('add_li_class', $args)。对于$classes[] = $args->add_li_class;，我必须添加$classes[] = $args['add_li_class'];。【参考方案2】：
您可以在您的functions.php 文件中为nav_menu_css_class 操作添加过滤器。
例子：
function atg_menu_classes($classes, $item, $args)
if($args->theme_location == 'secondary')
$classes[] = 'list-inline-item';
return $classes;
add_filter('nav_menu_css_class', 'atg_menu_classes', 1, 3);
文档：https://developer.wordpress.org/reference/hooks/nav_menu_css_class/
【讨论】：
我知道这个答案的发布时间比所选答案晚得多，但我觉得应该将其标记为正确答案，因为它完全符合问题的要求。 我无法让它工作，直接复制到我的functions.php中，它没有做任何事情。 @SpencerShattuck 您的主题中是否有“次要”菜单位置？您可能还需要类似 register_nav_menus(array( 'primary' => __( 'Primary Menu' ), 'secondary' => __( 'Secondary Menu' ) ) );
我找到了一个适合我的解决方案：github.com/wp-bootstrap/wp-bootstrap-navwalker【参考方案3】：
这里WordPress add custom class in wp_nav_menu links
或
您可以从管理面板添加课程<li class='my_own_class'><a href=''>Link</a></li>：
转到YOURSITEURL/wp-admin/nav-menus.php
打开SCREEN OPTIONS
CSS CLASSES，然后你会看到CSS Classes (optional)
每个菜单链接中的字段。
【讨论】：
这是答案 OP。 这必须由最终用户完成。不是在主题中实施的解决方案。 对于开发者来说，这是最好的和最简单的，就像他们正在开发静态主题一样。【参考方案4】：将类添加到<li> 标签而不编辑functions.php 文件：
-
转到外观 -> 菜单 -> 屏幕选项 -> CSS 类
您将在
Menu Items Window 中启用 CSS Class 选项
【讨论】：
【参考方案5】：如下图使用这个过滤器nav_menu_css_class
function add_classes_on_li($classes, $item, $args)
$classes[] = 'nav-item';
return $classes;
add_filter('nav_menu_css_class','add_classes_on_li',1,3);
更新
将此过滤器与特定菜单一起使用
if ( 'main-menu' === $args->theme_location ) //replace main-menu with your menu
$classes[] = "nav-item";
【讨论】：
但是我们如何使用这种方法来定位特定的菜单。我有一个名为 main-menu 的菜单和另一个名为 footer-menu 的菜单。 尝试用if ( 'main-menu' === $args->theme_location ) $classes[] = "nav-item"; 包裹$classes[] = "nav-item";【参考方案6】：
如果你只想“添加类”，那么只使用str_replace 函数怎么样：
<?php
echo str_replace( '<li class="', '<li class="myclass ',
wp_nav_menu(
array(
'theme_location' => 'main_menu',
'container' => false,
'items_wrap' => '<ul>%3$s</ul>',
'depth' => 1,
'echo' => false
)
)
);
?>
这对于单级菜单或要为所有 <li> 元素添加类的菜单是一种快速修复，不建议用于更复杂的菜单
【讨论】：
【参考方案7】：这些回答似乎都没有真正回答这个问题。这与我在我的网站上使用的类似，通过标题/名称定位菜单项：
function add_class_to_menu_item($sorted_menu_objects, $args)
$theme_location = 'primary_menu'; // Name, ID, or Slug of the target menu location
$target_menu_title = 'Link'; // Name/Title of the menu item you want to target
$class_to_add = 'my_own_class'; // Class you want to add
if ($args->theme_location == $theme_location)
foreach ($sorted_menu_objects as $key => $menu_object)
if ($menu_object->title == $target_menu_title)
$menu_object->classes[] = $class_to_add;
break; // Optional. Leave if you're only targeting one specific menu item
return $sorted_menu_objects;
add_filter('wp_nav_menu_objects', 'add_class_to_menu_item', 10, 2);
【讨论】：
【参考方案8】：我添加了一个类来轻松实现菜单参数。因此，您可以像这样自定义并包含在您的函数中：
include_once get_template_directory() . DIRECTORY_SEPARATOR . "your-directory" . DIRECTORY_SEPARATOR . "Menu.php";
<?php $menu = (new Menu('your-theme-location'))
->setMenuClass('your-menu')
->setMenuID('your-menu-id')
->setListClass('your-menu-class')
->setLinkClass('your-menu-link anchor') ?>
// Print your menu
<?php $menu->showMenu() ?>
<?php
class Menu
private $args = [
'theme_location' => '',
'container' => '',
'menu_id' => '',
'menu_class' => '',
'add_li_class' => '',
'link_class' => ''
];
public function __construct($themeLocation)
add_filter('nav_menu_css_class', [$this,'add_additional_class_on_li'], 1, 3);
add_filter( 'nav_menu_link_attributes', [$this,'add_menu_link_class'], 1, 3 );
$this->args['theme_location'] = $themeLocation;
public function wrapWithTag($tagName)
$this->args['container'] = $tagName;
return $this;
public function setMenuID($id)
$this->args['menu_id'] = $id;
return $this;
public function setMenuClass($class)
$this->args['menu_class'] = $class;
return $this;
public function setListClass($class)
$this->args['add_li_class'] = $class;
return $this;
public function setLinkClass($class)
$this->args['link_class'] = $class;
return $this;
public function showMenu()
return wp_nav_menu($this->args);
function add_additional_class_on_li($classes, $item, $args)
if(isset($args->add_li_class))
$classes[] = $args->add_li_class;
return $classes;
function add_menu_link_class( $atts, $item, $args )
if (property_exists($args, 'link_class'))
$atts['class'] = $args->link_class;
return $atts;
【讨论】：
【参考方案9】：<?php
echo preg_replace( '#<li[^>]+>#', '<li class="col-sm-4">',
wp_nav_menu(
array(
'menu' => $nav_menu,
'container' => false,
'container_class' => false,
'menu_class' => false,
'items_wrap' => '%3$s',
'depth' => 1,
'echo' => false
)
)
);
?>
【讨论】：
【参考方案10】：对我来说正确的是 Zuan 解决方案。请注意将 isset 添加到 $args->add_li_class ，但是如果您尚未在所有 wp_nav_menu() 函数中设置属性，则会得到 Notice: Undefined property: stdClass::$add_li_class 。
这是对我有用的功能：
function add_additional_class_on_li($classes, $item, $args)
if(isset($args->add_li_class))
$classes[] = $args->add_li_class;
return $classes;
add_filter('nav_menu_css_class', 'add_additional_class_on_li', 1, 3);
【讨论】：
【参考方案11】：// 从主菜单中删除翻译
function wpdocs_channel_nav_class($classes, $item, $args)
if ('primary' === $args->theme_location)
$classes[] = "notranslate";
return $classes;
add_filter('nav_menu_css_class', 'wpdocs_channel_nav_class', 10, 4);
这是您轻松将新类添加到菜单包装的现有类数组的方法
【讨论】：
【参考方案12】：这就是我将 WordPress 的 MainMenu 和类添加到 li 的方式。
<?php
$defaults = array( 'menu' => 'mainmenu',
'container' => false,
'fallback_cb' => 'wp_page_menu',
'items_wrap' => '<ul class="navbar-nav" id="myTab">%3$s</ul>',
'add_li_class' => 'nav-item',
'theme_location' => 'mainmenu' );
wp_nav_menu( $defaults ); ?>
在functions.php中使用这段代码
function li_new_class($classes, $item, $args)
if(isset($args->add_li_class))
$classes[] = $args->add_li_class;
return $classes;
add_filter('nav_menu_li_class', 'li_new_class', 1, 3);
【讨论】：
【参考方案13】：答案已在一年前在这里给出。 您可以按照这个答案给出很好的解释。
https://***.com/a/52688935/7162602
谢谢
【讨论】：
【参考方案14】：如果没有walker menu，则无法直接添加它。但是，您可以通过 javascript 添加它。
$('#menu > li').addClass('class_name');
【讨论】：
使用 jquery 绝对不是您应该能够在 php 中解决的问题的选择 我同意和不同意 Danny，我相信如果您对 PHP 感到满意，请继续进行所需的更改，但如果您缺乏知识并且没有能力修改现有代码（对于不管什么原因）这是一种可以接受的方法。但是，如果可能的话——修改您的 php 代码以允许更改。如果不可能，请添加您的 css hack。【参考方案15】：您不能很容易地将类直接添加到 LI，但是有什么理由不以稍微不同但同样具体的方式（通过它们的父级 ul）来定位它们？
您可以使用 menu_class 和 menu_id 参数（附加到 LI 的 UL 父级）设置菜单的类或 ID，然后通过 CSS 以这种方式定位 li，如下所示：
<?php wp_nav_menu('menu_id=mymenu'); ?>
对于 CSS：
ul#mymenu li
/* your styles here */
编辑：在 2013 年撰写本文时，这是添加它的最简单方法，但此后的更新添加了直接在管理导航编辑器中添加 CSS 类的功能。有关详细信息，请参阅更多最新答案。
【讨论】：
虽然我很欣赏提出解决方案的尝试，但这并不能回答问题。例如，在我的情况下，我需要应用 Bootstrap 4“col”类。 最简单的方法是使用 JS。否则，您需要通过 PHP 添加一个过滤器，该过滤器修改核心功能，如其他答案之一所述。 我知道这是旧的，但在我的情况下它同样没有帮助，并且没有解决最初的问题。在我的情况下，我试图在网络安装中按名称定位菜单项，其中菜单列表项 ID 因站点而异。 此答案不正确 - 请参阅其他投票的答案以了解处理此问题的替代方法。 这可能不是解决问题的最佳方法，但它是一个完全有效的答案。几乎总是有多种方法可以解决任何问题，并且每种潜在的解决方案都有利有弊。我不确定为什么这个答案会引起如此多的仇恨。以上是关于如何在 Wordpress 中使用 wp_nav_menu() 在 <li> 中添加类？的主要内容，如果未能解决你的问题，请参考以下文章
如何在Wordpress中使用帖子标题作为特色图像替代文字？