向菜单中的列表项元素添加数据属性

时间：2016-10-29 作者：neilgee

正在将数据属性添加到list item 在菜单中，我可以看到这里的一些线程可以将其添加到实际<a> 链接标记，我希望将其添加到列表项本身<li>

因此，此代码将属性添加到<a>标签

add_filter( \'nav_menu_link_attributes\', \'themeprefix_menu_attribute_add\', 10, 3 );
function themeprefix_menu_attribute_add( $atts, $item, $args ) {
  // Set the menu ID
  $menu_link1 = 20;

// Conditionally match the ID and add the attribute and value
if ($item->ID == $menu_link1) {
$atts[\'data-content\'] = \'about\';

//Return the new attribute
return $atts;
如何将属性添加到<li> 不使用jQuery。

2 个回复
SO网友:Anwer AR

在函数文件中尝试此代码。

function add_class_to_nav_items($nav_items, $args) {
  if ( $args[\'theme_location\'] == \'MY_NAV_THEME_LOCATION\' ) { // IMPORTANT: replace MY_NAV_THEME_LOCATION with the location of your menu
    foreach ($nav_items as &$nav_item) {
      $nav_item->classes[] = \'custon-class-name\';
    }
  }

  return $nav_items;

}

add_filter( \'wp_nav_menu_objects\', \'add_class_to_nav_items\', 11 );

SO网友:honk31

没有可用于将自定义属性添加到li 要素唯一可能的方法是使用定制助行器。

方法如下：（functions.php或自定义插件）

class so244415_custom_walker extends Walker_Nav_Menu {
    public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        //your code here. the line you want to edit is:
        //$output .= $indent . \'<li\' . $id . $class_names .\'>\';
    }
}
查找文件class-walker-nav-menu.php wp内部包含并复制特定功能中的所有内容start_el 并根据您的需要进行编辑。

您可以这样调用菜单：（在主题文件中，您可以在其中调用菜单）

wp_nav_menu( array(
    \'walker\' => new so244415_custom_walker( $args ), /*( $args ) is optional...*/ 
));
另一种选择是

function so244415_walker_nav_menu_start_el($item_output, $item, $depth, $args) {
    //some regex/str_replace here
    return $item_output;
}
add_filter( \'walker_nav_menu_start_el\', \'so244415_walker_nav_menu_start_el\', 10, 4);
但我并不是这个解决方案的最大粉丝，因为regex之类的东西并不是编辑html的最佳方式。

标签： menus   links   customization   小码农  

相关推荐

Disable automatic embed links

在当前的wordpress版本（5.2..）上有什么方法吗，要打开自动嵌入链接（wp embed.min.js），这会将url转换为iframe吗？我尝试过插件、代码片段和函数。php。。。很明显，对于wp的最新版本，它们都不再有效。