Wordpress 自定义主题中的选定菜单链接不起作用


Selected Menu Link In Wordpress Custom Theme Does Not Work

我正在开发一个自定义的 Wordpress 主题,但我的主题中的选定菜单链接有问题!

基本上,我已经在我的CSS文件中添加了一个类名,称为selected。它显示了当前页面将如何显示在顶部菜单导航中。

这是 CSS 文件:

.ddsmoothmenu{
    float: right;
    margin-top: 10px
}
.ddsmoothmenu ul{
    z-index:100;
    margin: 0;
    padding: 0;
    list-style-type: none;
}
/*Top level list items*/
.ddsmoothmenu ul li{
    position: relative;
    display: inline;
    float: left;
}
/*Top level menu link items style*/
.ddsmoothmenu ul li a{
    display: block;
    height: 26px;
    line-height: 23px;
    padding: 0 20px 5px 15px;
    margin: 0 7px 0 0;
    font-size: 14px;
    color: #333;    
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    outline: none;
    border: none;
}
* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}
.ddsmoothmenu ul li a.selected, .ddsmoothmenu ul li a:hover { /*CSS class that's dynamically added to the currently active menu items' LI A element*/
    position: relative;
    background: url(../images/templatemo_mhr.png) no-repeat top right;
}
.ddsmoothmenu ul li a.selected span, .ddsmoothmenu ul li a:hover span {
    position: absolute;
    width: 5px;
    height: 26px;
    top: 0;
    left: -5px;
    background: url(../images/templatemo_mhl.png) no-repeat;
}
/*1st sub level menu*/
.ddsmoothmenu ul li ul{
    position: absolute;
    left: 0;
    display: none; /*collapse all sub menus to begin with*/
    visibility: hidden;
    background: #bad8f7;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}
/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
    font-weight: 500;
    width: 120px; /*width of sub menus*/
    padding: 2px 10px;
    margin: 0;
    font-size: 12px;
    border-top-width: 0;
    text-align: left;
}

.ddsmoothmenu ul li ul li a.selected, .ddsmoothmenu ul li ul li a:hover { text-decoration: underline; background: none }
/* Holly Hack for IE '*/
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/

/* ######### CSS classes applied to down and right arrow images  ######### */
.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}
.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
/* ######### CSS for shadow added to sub menus  ######### */
.ddshadow{
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: #fff;
}
.toplevelshadow{ /*shadow opacity. Doesn't work in IE*/
opacity: 0.5;
}
/* menu */

这是header.php文件中的菜单布局:

<div id="templatemo_header">
        <div id="site_title"><h1><a href="#">Violet Theme</a></h1></div>
        <div id="templatemo_menu" class="ddsmoothmenu">
            <?php 
            $args = array(
                'theme_location' => 'primary'
            );
            wp_nav_menu($args); 
            ?>
            <br style="clear: left" />
        </div> <!-- end of templatemo_menu -->
        <div class="cleaner"></div>
    </div> <!-- end of templatemo header -->

如何将类selected添加到当前菜单页面,因此,如果用户单击博客页面,例如,博客项目将更改为菜单中所选项目的样式...

您可以使用

current-menu-item,因为ti将被添加到您当前正在查看的页面/帖子/类别中。不建议使用 current_page_item,因为仅当菜单项是页面时才会添加它。

在wordpress中,当你选择菜单时,你将有类current_page_item。您可以在此处设置<a>的颜色

.current_page_item a{color: #xxxxxx;}

如果您想在悬停时设置颜色

.category a:hover{color: #xxxxxx;}