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

【问题标题】：Selected Menu Link In Wordpress Custom Theme Does Not WorkWordPress 自定义主题中的选定菜单链接不起作用
【发布时间】：2016-07-18 17:03:51
【问题描述】：

我正在开发一个自定义 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 类添加到当前菜单页面，例如，如果用户单击 blog 页面，blog 项将更改为所选项的样式在菜单中...

【问题讨论】：

标签： php html css wordpress

【解决方案1】：

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

【讨论】：

【解决方案2】：

在 wordpress 中，当您选择菜单时，您将拥有 current_page_item 类。你可以在这里设置<a>的颜色

.current_page_item a{color: #xxxxxx;}

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

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

【讨论】：