在Wordpress自定義主題中選定的菜單鏈接不起作用

Question

我正在開發自定義的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添加到當前菜單頁，因此如果用戶點擊博客頁面例如，博客項目更改爲菜單中所選項目的樣式...

Answer 1

您可以使用current-menu-item，因爲TI將被添加到頁面/職位/類別你正在查看。不建議使用current_page_item，因爲只有當菜單項是頁面時纔會添加它。

Answer 2

在wordpress中，當您選擇菜單時，您將有current_page_item類。您可以在這裏

.current_page_item a{color: #xxxxxx;} 

設置的<a>顏色，如果你想設置的顏色時，懸停

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