以下是三种方法：
I-插件a-class- 前缀：
我们可以针对
<a> 标记为
a-class-... 类前缀。
因此，在您的情况下，您可以通过以下方式获得：
<li id="menu-item-290" class="blue yellow ...">
<a class="red pink" href="http://localhost/en-wptuts/">home</a>
</li>
要使用以下菜单类：
blue yellow a-class-red a-class-pink
我们通过以下插件支持这一点：
<?php
/**
* Plugin Name: Menu Link Classes (I)
* Description: Target menu link classes with the "a-class-" class prefix.
* Author: Birgir Erlendsson (birgire)
* Plugin URI: http://wordpress.stackexchange.com/a/190844/26350
* Version: 0.0.1
*/
/**
* Remove menu classes with the "a-class-" prefix
*/
add_filter( \'nav_menu_css_class\', function( $classes )
{
return array_filter(
$classes,
function( $val )
{
return \'a-class-\' !== substr( $val, 0, strlen( \'a-class-\' ) );
}
);
} );
/**
* Add only "a-class-" prefixed classes to the menu link attribute
*/
add_filter( \'nav_menu_link_attributes\', function( $atts, $item )
{
if( isset( $item->classes ) )
{
$atts[\'class\'] = str_replace(
\'a-class-\',
\'\',
join(
\' \',
array_filter(
$item->classes,
function( $val )
{
return \'a-class-\' === substr( $val, 0, strlen( \'a-class-\' ) );
}
)
)
);
}
return $atts;
}, 10, 2 );
II-插件
li-class- 前缀：我们还可以使用
li-class-... 目标的类前缀
<li> 改为标记。
因此，在您的情况下，您可以通过以下方式获得：
<li id="menu-item-290" class="blue yellow">
<a class="red pink" href="http://localhost/en-wptuts/">home</a>
</li>
要使用以下菜单类：
li-class-blue li-class-yellow red pink
请注意，这将移动
<li> 类别至
<a> 没有此前缀的。
以下是支持此功能的插件：
<?php
/**
* Plugin Name: Menu Link Classes (II)
* Description: Add classes prefixed with "li-class-" to the li tag, else add it to the a tag.
* Author: Birgir Erlendsson (birgire)
* Plugin URI: http://wordpress.stackexchange.com/a/190844/26350
* Version: 0.0.1
*/
/**
* Only allow li classess that are prefixed with "li-class-"
*/
add_filter( \'nav_menu_css_class\', function( $classes )
{
$newclasses = [];
foreach( (array) $classes as $class )
{
if( \'li-class-\' === substr( $class, 0, strlen( \'li-class-\' ) ) )
$newclasses[] = str_replace( \'li-class-\', \'\', $class );
}
return $newclasses;
} );
/**
* Add all classess that aren\'t prefixed with "a-class-" to the <a> tag
*/
add_filter( \'nav_menu_link_attributes\', function( $atts, $item )
{
if( isset( $item->classes ) )
{
$atts[\'class\'] = join(
\' \',
array_filter(
$item->classes,
function( $val )
{
return \'li-class-\' !== substr( $val, 0, strlen( \'li-class-\' ) );
}
)
);
}
return $atts;
}, 10, 2 );
将所有可选类移动到
<a> 标记：如果我们使用以下可选CSS类：
blue yellow red pink
然后所有内容都将移动到
<a> 标签：
<li id="menu-item-290" class="...">
<a class="blue yellow red pink" href="http://localhost/en-wptuts/">home</a>
</li>
请注意，中的非可选类
<li> 未移动到
<a>, 这就是为什么我们保留
... 上述HTML示例中的符号。
以下插件支持：
<?php
/**
* Plugin Name: Menu Link Classes (III)
* Description: Move all optional classes from the li tag to the a tag.
* Author: Birgir Erlendsson (birgire)
* Plugin URI: http://wordpress.stackexchange.com/a/190844/26350
* Version: 0.0.1
*/
/**
* Only allow li classess that are prefixed with "li-class-"
*/
add_filter( \'nav_menu_css_class\', function( $classes, $item )
{
return array_filter( $classes, function( $val ) use ( $item )
{
return ! in_array( $val, (array) $item->wpse_classes ) ;
} );
}, 10, 2 );
add_filter( \'wp_get_nav_menu_items\', function( $items, $menu, $args )
{
foreach( $items as $item )
$item->wpse_classes = $item->classes;
return $items;
}, 10, 3 );
/**
* Add all classess that aren\'t prefixed with "a-class-" to the <a> tag
*/
add_filter( \'nav_menu_link_attributes\', function( $atts, $item )
{
if( isset( $item->wpse_classes ) )
{
$atts[\'class\'] = join(
\' \',
array_filter(
$item->wpse_classes,
function( $val )
{
return \'li-class-\' !== substr( $val, 0, strlen( \'li-class-\' ) );
}
)
);
}
return $atts;
}, 10, 2 );
