WordPress的單頁，類別和檔案菜單當前項目

我想知道是否有人可以幫助我以下，因爲我不能讓我的頭周圍如何做到這一點！WordPress的單頁，類別和檔案菜單當前項目

在我的網站我有一個菜單：

首頁|關於|技能|投資組合|聯繫

要調用上面的菜單在我的header.php文件我有以下幾點：

<nav> 
      <?php wp_nav_menu($args); ?> 

     </nav>

目前，當頁面激活鏈接的背景顏色的變化，這裏是產生的CSS和HTML ：

header ul li a 
     { 
border-radius: 4px; 
    background-color: transparent; 
    border: 1px solid transparent; 
    color: #939393; 
    margin: 0px; 
    border-image: initial; 
    padding-left: 5px; 
    padding-right: 5px; 
    padding-top: 3px; 
    padding-bottom: 3px; 
    font-size: 18px; 
    text-decoration: none; 
     } 

    header ul li.current-menu-item a, 
    header ul li a:hover 
     { 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    -o-border-radius: 4px; 
    -ms-border-radius: 4px; 
    -khtml-border-radius: 4px; 
    border-radius: 4px; 
    background-color: rgba(0, 0, 0, 0.042); 
    border: 1px solid rgba(0, 0, 0, 0.15); 
    margin: 0; 
    border-image: initial; 
    padding-left: 5px; 
    padding-right: 5px; 
    padding-top: 3px; 
    padding-bottom: 3px; 
    color: #939393; 
     } 

    header ul li.selected { 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    -o-border-radius: 4px; 
    -ms-border-radius: 4px; 
    -khtml-border-radius: 4px; 
    border-radius: 4px; 
    background-color: rgba(0, 0, 0, 0.042); 
    border: 1px solid rgba(0, 0, 0, 0.15); 
    margin-top: -3px; 
    border-image: initial; 
    padding-left: 0px; 
    padding-right: 0px; 
    padding-top: 3px; 
    padding-bottom: 3px; 
    color: #939393; 
    }

繼承人的HTML產生的：

<nav> 
    <div class="menu-main-navigation-container"><ul id="menu-main-navigation" class="menu"><li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42"><a href="http://localhost:8888/paulkenyon/home/">Home</a></li> 
    <li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41"><a href="http://localhost:8888/paulkenyon/about/">About</a></li> 
    <li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45"><a href="http://localhost:8888/paulkenyon/skills/">Skills</a></li> 
    <li id="menu-item-56" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-56"><a href="http://localhost:8888/paulkenyon/portfolio/">Portfolio</a></li> 
    <li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-49"><a href="http://localhost:8888/paulkenyon/contact/">Contact</a></li> 
    <li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-50 current_page_item menu-item-52"><a href="http://localhost:8888/paulkenyon/blog/">Blog</a></li> 
    </ul></div> 

     </nav>

上述工作正常，但我試圖實現的是當用戶點擊博客文章或存檔或選擇一個類別我想'博客'鏈接保持高亮與不同的彩色背景圖像。

目前沒有任何顯示。

是否有一個我可以使用的函數來說明所有單個和存檔頁面以突出'博客'錨點？

我希望以上是有道理的。

如果有人能幫助它將不勝感激！ :-)

在此先感謝保羅

來源

2012-09-30 PK333

不知道，如果這個職位仍是初步認識，但我今天解決了類似的問題，在一個相當動態的方式，而不使用JavaScript來針對特定的ID。

在你的身體的HTML標記，可以確保您使用body_class功能，像這樣：

<body <?php body_class(); ?>>

這告訴WordPress的提供一些有益的CSS類，反映你當前在哪個頁面。例如，如果您當前處於存檔頁面，則正文標記現在將具有archive CSS類。如果您位於類別頁面上，則正文標籤將具有category類，如果您位於單個帖子頁面上，則正文標籤將具有single-post類等等（檢查該元素以查看WordPress提供了哪些其他類）。

接下來，您希望在WordPress管理界面的「菜單」頁面上爲您的目標菜單項提供一個CSS類（確保在「屏幕選項」窗格中勾選了「CSS類」選項）。如果您的博客菜單項目，你可以給它像menu-item-blog。

現在你可以特異性地與CSS針對你的「博客」菜單項時你是單身後的網頁上像這樣：

body.single-post .menu-item-blog { 
    /* Your highlight style goes here */ 
}

現在，我知道這是不是一個完美的解決方案，你仍然有在單個菜單項上設置自定義的CSS類，但我喜歡可以通過管理界面而不是代碼實現。

我希望這有助於！

來源

2013-03-10 01:49:37

這裏是小PHP - jQuery的組合腳本。

PHP功能的wordpress檢查頁面是一個檔案，類別或單個帖子頁面。

然後使用jQuery的幫助下，我們添加類「當前菜單項」與ID「菜單項目-52」這是「博客」李麗。

請在wordpress博客的標題中添加以下腳本。

<?php 

if(is_archive() || is_category() || is_single()) 
{ 
    ?> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 

     $("li#menu-item-52").addClass("current-menu-item"); 

    }); 
    </script> 
    <? 

} 


?>

來源

2012-10-03 11:46:17 Aratidgr8

-1

添加這個CSS作爲活動的菜單風格

.current_page_parent a{ 
}

來源

2015-02-11 17:39:57 user3237234

WordPress的單頁，類別和檔案菜單當前項目

回答

相關問題