如何在导航菜单的工具提示中添加一个css类?

时间:2013-07-11 作者:annabwashere

我正在寻找一种方法,将CSS类添加到菜单项上工具提示的锚定标记中。目前,我看到您可以轻松地将CSS类添加到菜单的li中,但我正在尝试设置工具提示本身的样式,而不是菜单项。

查看Codex for wp_nav_menu, 我没有看到可用于处理将类添加到工具提示锚定的参数。

有我可以使用的过滤器吗?怎样

仅供参考,我正在使用一个名为Simple Tooltips 要创建工具提示,只需向要添加工具提示的HTML元素添加一个类。

2 个回复
最合适的回答,由SO网友:Shahinul Islam 整理而成

将此代码添加到函数中。php



class Tooltips_Walker extends Walker_Nav_Menu
{

    function start_el(&$output, $item, $depth, $args)
    {
        $classes     = empty ( $item->classes ) ? array () : (array) $item->classes;

        $class_names = join(
            \' \'
        ,   apply_filters(
                \'nav_menu_css_class\'
            ,   array_filter( $classes ), $item
            )
        );

        ! empty ( $class_names )
            and $class_names = \' class="\'. esc_attr( $class_names ) . \'"\';

        $attributes  = \'\';

        if(strstr($class_names, \'tooltips\')) {
            $attributes  = \' class="tooltips"\';
        }
        $class_names  = str_replace(\'tooltips\', \'\', $class_names);

        $output .= "<li id=\'menu-item-$item->ID\' $class_names>";



        ! empty( $item->attr_title )
            and $attributes .= \' title="\'  . esc_attr( $item->attr_title ) .\'"\';
        ! empty( $item->target )
            and $attributes .= \' target="\' . esc_attr( $item->target     ) .\'"\';
        ! empty( $item->xfn )
            and $attributes .= \' rel="\'    . esc_attr( $item->xfn        ) .\'"\';
        ! empty( $item->url )
            and $attributes .= \' href="\'   . esc_attr( $item->url        ) .\'"\';

        // insert description for top level elements only
        // you may change this
        $description = ( ! empty ( $item->description ) and 0 == $depth )
            ?    esc_attr( $item->description )   : \'\';

        $title = apply_filters( \'the_title\', $item->title, $item->ID );

        $item_output = $args->before
            . "<a $attributes title=\'".$description."\'>"
            . $args->link_before
            . $title
            . \'</a> \'
            . $args->link_after 
            . $args->after;

        // Since $output is called by reference we don\'t need to return anything.
        $output .= apply_filters(
            \'walker_nav_menu_start_el\'
        ,   $item_output
        ,   $item
        ,   $depth
        ,   $args
        );
    }
}


并更新此wp\\u nav\\u菜单代码,其中从主题[header.php]调用菜单


    wp_nav_menu(
                    array (
                        \'menu\'            => \'main-menu\',
                        \'container\'       => FALSE,
                        \'container_id\'    => FALSE,
                        \'menu_class\'      => \'\',
                        \'menu_id\'         => FALSE, 
                        \'walker\'          => new Tooltips_Walker
                    )
                );
并将“tooltips”(工具提示)用作菜单项类,并将描述显示为提示标题。

并确保“Zebra\\u Tooltip”Css类z索引大于所有元素的z索引:或者以样式添加此Css代码。css

.Zebra_Tooltip{ z-index: 100000 !important;}  

SO网友:Matt

有一个很好的教程here!

结束

相关推荐

Search Post Title Only

我正在使用标准WordPress搜索表单搜索自定义帖子类型。这是我的代码:<form role=\"search\" method=\"get\" id=\"searchform\" action=\"<?php echo home_url( \'/\' ); ?>\"> <input type=\"hidden\" name=\"post_type\" value=\"attorney\" /> <input type=\"text\" valu