如何将类应用于菜单列表项中的第二个单词?

时间:2012-03-08 作者:Brian T

我想对菜单中的一个单词应用一个类。例如,假设我的菜单中有一个名为“我的项目”的列表项。我想对“Item”这个词应用一个类,这样我就可以根据自己的需要设置样式。

我是否需要在列表项中添加一个span,然后像这样将类添加到css中?

<div id="nav">
    <ul>
        <li><a href="/MyItem">My <span class="dark-blue">Item</span></a></li>
    </ul>
</div>

#nav ul li a.dark-blue {
    color: #00008B;
}

1 个回复
SO网友:fuxia

您可以筛选title 每个导航菜单项的。遗憾的是,过滤器名为\'the_title\' – 如果我们只是为它添加一个简单的过滤器,我们也可能捕获nav菜单之外的字符串。

因此,我们需要第二个函数来在菜单类启动时打开导航菜单标题过滤器,在其结束时关闭导航菜单标题过滤器。

让我们从第二个函数开始:

add_filter( \'wp_nav_menu_args\', \'wpse_14037_filter_switch\' );
add_filter( \'wp_nav_menu\', \'wpse_14037_filter_switch\' );

/**
 * Switches the registration of out title filter on and off.
 *
 * @param  mixed $input Array or string, we just pass it through.
 * @return mixed
 */
function wpse_14037_filter_switch( $input )
{
    $func = \'wp_nav_menu_args\' == current_filter() ? \'add_filter\' : \'remove_filter\';
    $func( \'the_title\', \'wpse_14037_filter_title\' );
    return $input;
}
\'wp_nav_menu_args\' 已调用wp_nav_menu() 非常早。什么时候wpse_14037_filter_switch() 正在此上下文中运行(current_filter) 我们打开标题过滤器on.

\'wp_nav_menu\' 在呈现所有项后调用。现在我们打开标题过滤器off.

现在我们需要wpse_14037_filter_title() 我们刚刚注册:

/**
 * Adds a <span class="partNUMBER"> to each word of a menu item title.
 *
 * @param  string $title
 * @return string
 */
function wpse_14037_filter_title( $title )
{
    $title = trim( $title );
    $parts = explode( \' \', $title );
    $out   = array ();
    $i     = 1;

    foreach ( $parts as $part )
    {
        $out[] = \'<span class="part\' . $i++ . \'">\' . $part . \'</span>\';
    }

    return join( \' \', $out );
}
我决定让函数比您想要的更通用。其他人可能会想用第三个词……或第十五个词。

要解决样式表中的第二个单词,只需使用新类:

/* Your menu may have the class \'menu\'. */
.menu .part2
{
    color: #005;
}

结束

相关推荐

WooCommerce dynamic menus

我有一个基本的WordPress网站,设置了Suffusion主题和WooCommerce插件。这在大多数情况下都很有效,但是当我让人们点击/悬停在“Shop”菜单图标上时,我希望它能够动态地下拉我定义的产品类别。我如何做到这一点?我肯定有关于这个主题的文档,但我不确定要查找什么。我主要是一名系统管理员。