如何設置WordPress導航菜單的樣式（更新）


您是否要設置WordPress導航菜單的樣式以更改其顏色或外觀？ 當WordPress主題處理導航菜單的外觀時，您可以輕鬆地使用CSS對其進行自定義以滿足您的要求。 在本文中，我們將向您展示如何在您的站點上設置WordPress導航菜單的樣式。

在WordPress中樣式化導航菜單

我們將展示兩種不同的方法。 第一種方法是針對初學者的，因為它使用插件並且不需要任何代碼知識。 第二種方法適用於喜歡使用CSS代碼而不是插件的中級DIY用戶。

方法1：使用插件設置WordPress導航菜單的樣式

您的WordPress主題使用CSS設置導航菜單的樣式。 許多初學者不滿意自己編輯主題文件或編寫CSS代碼。

那時WordPress樣式插件就派上用場了。 它使您免於編輯主題文件或編寫任何代碼的麻煩。

首先，您需要安裝並激活CSS Hero插件。 有關更多詳細信息，請參閱有關如何安裝WordPress插件的分步指南。

CSS Hero是一個高級WordPress插件，可讓您無需編寫任何代碼即可設計自己的WordPress主題（無需HTML或CSS）。 請參閱我們的CSS Hero評論以了解更多信息。

WPBeginner用戶可以使用此CSS Hero優惠券在購買時獲得34％的折扣。

激活後，您將被重定向以獲取CSS Hero License密鑰。 只需按照屏幕上的說明進行操作，然後單擊幾下即可將您重定向到您的站點。

接下來，您需要在WordPress管理工具欄中單擊CSS Hero按鈕。

啟動CSS Hero

CSS Hero提供了所見即所得（所見即所得）編輯器。 單擊該按鈕將帶您到您的網站，並在屏幕上顯示一個浮動的CSS Hero工具欄。

CSS Hero工具欄

您需要單擊頂部的藍色圖標以開始編輯。

單擊藍色圖標後，將鼠標移至導航菜單，CSS Hero將通過顯示其周圍的邊框來突出顯示它。 當您單擊突出顯示的導航菜單時，它將顯示您可以編輯的項目。

指向並單擊以自定義菜單

在上面的屏幕截圖中，它向我們展示了頂部導航菜單容器。 假設我們要更改導航菜單的背景顏色。 在這種情況下，我們將選擇影響整個菜單的頂部導航。

CSS Hero現在將向您顯示可以編輯的不同屬性，例如文本，背景，邊框，邊距，填充等。

CSS屬性

您可以單擊要更改的任何屬性。 CSS Hero將為您顯示一個簡單的界面，您可以在其中進行更改。

更改元素的外觀

在上面的屏幕截圖中，我們選擇了背景，它向我們展示了一個不錯的界面，可以選擇背景顏色，漸變，圖像等。

進行更改時，您將能夠在主題預覽中實時看到它們。

實時預覽CSS更改

對更改滿意後，單擊CSS Hero工具欄中的保存按鈕以保存更改。

使用此方法的最好之處在於，您可以輕鬆撤消所做的任何更改。 CSS Hero保留了所有更改的完整歷史記錄，您可以在這些更改之間來回切換。

方法2：手動設置WordPress導航菜單樣式

此方法需要您手動添加自定義CSS，並且適用於中級用戶。

WordPress導航菜單顯示在無序列表（項目列表）中。

通常，如果您使用默認的WordPress菜單標籤，則它將顯示一個列表，其中沒有與之關聯的CSS類。 



您的無序列表將具有類名“菜單”，並且每個列表項都有其自己的CSS類。 


如果您只有一個菜單位置，這可能會起作用。 但是，大多數主題在多個位置可以顯示導航菜單。


僅使用默認CSS類可能會導致與其他位置的菜單發生衝突。


這就是為什麼您還需要定義CSS類和菜單位置的原因。 很有可能您的WordPress主題已經通過使用如下代碼添加導航菜單來做到這一點： 


 'primary',
        'menu_class'     => 'primary-menu',
         ) );
?>



此代碼告訴WordPress，這是主題顯示主菜單的地方。 還將CSS類主菜單添加到導航菜單。


現在，您可以使用此CSS結構來設置導航菜單的樣式。 


// container class
#header .primary-menu{} 

// container class first unordered list
#header .primary-menu ul {} 

//unordered list within an unordered list
#header .primary-menu ul ul {} 

 // each navigation item
#header .primary-menu li {}

// each navigation item anchor
#header .primary-menu li a {} 

// unordered list if there is drop down items
#header .primary-menu li ul {} 

// each drop down navigation item
#header .primary-menu li li {} 

// each drap down navigation item anchor
#header .primary-menu li li a {} 



您將需要用導航菜單使用的容器CSS類替換#header。 


這種結構將幫助您完全更改導航菜單的外觀。


但是，還有其他WordPress生成的CSS類自動添加到每個菜單和菜單項。 這些類使您可以進一步自定義導航菜單。 


// Class for Current Page
.current_page_item{} 

// Class for Current Category
.current-cat{} 

// Class for any other current Menu Item
.current-menu-item{} 

// Class for a Category
.menu-item-type-taxonomy{}
 
// Class for Post types
.menu-item-type-post_type{} 

// Class for any custom links
.menu-item-type-custom{} 

// Class for the home Link
.menu-item-home{} 



WordPress還允許您將自己的自定義CSS類添加到各個菜單項。 


您可以使用此功能為菜單項設置樣式，例如在菜單中添加圖像圖標，或者僅更改顏色以突出顯示菜單項。 


前往 外觀»菜單 WordPress管理員中的頁面，然後單擊“屏幕選項”按鈕。 


為單個菜單項啟用CSS類選項


選中該框後，您將看到在編輯每個菜單項時添加的其他字段。


在WordPress的菜單項中添加自定義CSS類


現在，您可以在樣式表中使用此CSS類來添加自定義CSS。 它只會影響添加了CSS類的菜單項。 


WordPress中導航菜單樣式的示例


不同的WordPress主題可以使用不同的樣式選項，CSS類，甚至JavaScript來創建導航菜單。 這為您提供了很多選項來更改這些樣式並自定義導航菜單以滿足您自己的需求。 


在確定要更改哪些CSS類時，Web瀏覽器中的檢查工具將是您最好的朋友。 如果您以前從未使用過它，請查看我們的指南，了解如何使用檢查工具來自定義WordPress主題。 


基本上，您只需要將光標指向要修改的元素，右鍵單擊，然後從瀏覽器的菜單中選擇“檢查工具”。 


使用檢查工具查找要修改的CSS類


話雖如此，讓我們看一下WordPress中樣式化導航菜單的一些實際示例。 


1.如何在WordPress導航菜單中更改字體顏色


這是示例自定義CSS，您可以將其添加到主題中以更改導航菜單的字體顏色。 


#top-menu  li.menu-item a {
color:#ff0000;
} 



在此示例中，＃top-menu是分配給顯示我們的導航菜單的無序列表的ID。 您將需要使用檢查工具找出主題所使用的ID。 


更改WordPress導航菜單的字體顏色


2.如何更改導航菜單欄的背景顏色


首先，您需要找出主題所使用的CSS ID或類，以用於圍繞導航菜單的容器。 


查找導航菜單容器的CSS類


之後，您可以使用以下自定義CSS更改導航菜單欄的背景顏色。 


.navigation-top { 
background-color:#000; 
}



這是在我們的演示網站上的外觀。 


更改導航菜單欄的背景顏色


3.如何更改單個菜單項的背景顏色


您可能已經註意到，許多網站的導航菜單中最重要的鏈接使用不同的背景色。 該鏈接可以是登錄，註冊，聯繫或購買按鈕。 通過給它提供不同的顏色，可以使鏈接更引人注目。 


為了實現這一點，我們將自定義CSS類添加到我們希望以不同背景色突出顯示的菜單項。 


前往 外觀»菜單 並單擊屏幕右上角的“屏幕選項”按鈕。 這將彈出一個下拉菜單，您需要在其中選中“ CSS類”選項旁邊的框。 


為單個菜單項啟用CSS類選項


之後，您需要向下滾動到要修改的菜單項，然後單擊以展開它。 您會注意到一個新選項來添加自定義CSS類。 


將自定義CSS類添加到菜單項


現在，您可以使用此CSS類來為特定菜單項設置不同的樣式。 


.contact-us { 
background-color: #ff0099;
border-radius:5px;
}



這是我們測試站點上的外觀。 


更改WordPress導航菜單中單個菜單項的背景顏色


4.將懸停效果添加到WordPress導航菜單


您是否希望菜單項在鼠標懸停時更改顏色？ 這個特殊的CSS技巧使您的導航菜單看起來更具交互性。 


只需將以下自定義CSS添加到您的主題。 


#top-menu  li.menu-item a:hover {
background-color:#fff;
color:#666;
border-radius:5px;
} 



在此示例中，＃top-menu是主題用於無序導航菜單列表的CSS ID。 


這是在我們的測試站點上的外觀。 


WordPress導航菜單中的鼠標懸停效果


5.在WordPress中創建粘性浮動導航菜單


通常，導航菜單顯示在頂部，並在用戶向下滾動時消失。 用戶向下滾動時，粘性浮動導航菜單位於頂部。 


您可以將以下CSS代碼添加到主題中，以使導航菜單具有粘性。 


#top-menu {
    background:#2194af;
    height:60px;
    z-index:170;
    margin:0 auto;
    border-bottom:1px solid #dadada;
    width:100%;
    position:fixed;
    top:0;
    left:0;
    right:0;
    text-align: right;
    padding-right:30px
}



只需將＃top-menu替換為導航菜單​​的CSS ID。


這是在我們的演示中的外觀： 


粘性導航菜單


有關更多詳細說明和替代方法，請參閱我們的指南，了解如何在WordPress中創建粘性浮動導航菜單。


6.在WordPress中創建透明的導航菜單


許多網站將大型或全屏背景圖片與號召性用語配合使用。 使用透明菜單可使您的導航與圖像融合在一起。 這使用戶更有可能專注於您的號召性用語。 


只需將以下示例CSS添加到主題中，即可使導航菜單透明。 


#site-navigation { 
background-color:transparent; 
}



這就是在我們的演示站點上的外觀。 


WordPress中的透明導航菜單


根據您的主題，您可能需要調整標題圖像的位置，使其覆蓋透明菜單後面的區域。 


我們希望本文能幫助您學習如何設置WordPress導航菜單的樣式。 您可能還希望查看我們的指南，了解如何添加支持移動設備的WordPress菜單。 


如果您喜歡這篇文章，請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。