WordPress菜單CSS類選項設置方法

昨天遇到的一個問題,本打算將導航菜單里的重要鏈接修改一下顏色以加亮顯示。雖然知道修改應該是在鏈接更多選項里CSS類中進行,但具體設置方法還是不太清楚,嘗試求助搜索引擎也沒找什么有價值的信息。后來還是通過反復測試才設置成功的,現將具體方法介紹一下,以方便遇到同樣問題的朋友參考設置。

WordPress菜單CSS類選項設置方法:

1、點開WordPress菜單設置頁面右上角“顯示選項”,勾選里面的菜單高級屬性CSS類

2、打開編輯正在使用的主題CSS文件,這里以WordPress默認Twenty Ten主題為演示,其它主題修改類似,

找到菜單項樣式語句“#access ul li.current-menu-item > a,”

大約在CSS文件中的第436句左右。我們將其復制并稍微修改一下,

創建一條新的樣式語句供設置菜單項目調用。

如修改新建這么一句“#access ul li.current-menu-item-41 > a {color: #ffff66;}”

藍色字體為添加部分,你也可以隨意取名。

將它添加到該樣式塊段落的最后面,如果位置添加不當,可能會出現無法顯示效果或設置菜單鏈接前面的鏈接也應用這條樣式,具體添加位置如下(Twenty Ten主題示例):

#access ul li.current_page_item > a,

#access ul li.current-menu-ancestor > a,

#access ul li.current-menu-item > a,//原菜單項樣式

#access ul li.current-menu-parent > a {

color: #fff;

}

#access ul li.current-menu-item-41 > a {color: #ffff66;}//新建菜單項樣式添加位置,這條樣式設置了鏈接顏色為#ffff66,你可以隨便修改,當然也不限于顏色設置,可以是文字加粗,文字大小等其它CSS設置。

3、上面CSS修改保存后,回到WordPress菜單設置頁面,

在需要設置的菜單項目CSS類中填入上面新建的current-menu-item-41樣式名稱保存即可,如下圖:

WordPress菜單CSS類選項設置方法

這樣就完成了,WordPress菜單CSS類選項設置成功。

 
  • 本文由 米粒在線 發表于 2014年7月28日19:23:12
  • 轉載請務必保留本文鏈接:http://m.bjmhhq.com/26642.html

發表評論

匿名網友
:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:
確定

拖動滑塊以完成驗證