還在考慮Wordpress主題中那些類、ID怎么命名嗎？其實(shí)wordpress輸出標(biāo)簽生成的代碼中默認(rèn)已經(jīng)自動(dòng)生成了一些class和id，本文就一些常見的代碼中的生成的樣式列出來：

wp_nav_menu()生成的菜單（代碼略）

最外面層的class=”menu-nav-container”

無序列表ul樣式id=”menu-nav” class=”menu”如果是二級(jí)菜單則樣式為class=”sub-menu”

內(nèi)部列表項(xiàng)li樣式 id=”menu-item-7″ class=”menu-item menu-item-type-taxonomy menu-item-object-category menu-item-7″

說明：

1、class=”menu-item menu-item-type-taxonomy menu-item-object-category menu-item-7″其實(shí)是調(diào)用了“menu-item”、“menu-item-type-taxonomy” 、“menu-item-object-category”、“menu-item-7”四個(gè)樣式，它們中間是用空格分開的。

2、“menu-item”在這個(gè)所有菜單項(xiàng)是一樣，“menu-item-type-taxonomy menu-item-object-category” 這個(gè)在菜單里面是不一樣的，如果是這一菜單項(xiàng)是類別生成的就是這段代碼，如果這一菜單項(xiàng)是調(diào)用的頁面則生成的這段代碼會(huì)變成“

menu-item-type-post_type menu-item-object-page”，如果這一菜單項(xiàng)是自定義的則為“menu-item-type-custom menu-item-object-custom”。

3、列表項(xiàng)中每一項(xiàng)“menu-item-7”后面的數(shù)字不一樣

4、在主題類別頁當(dāng)前類別的菜單項(xiàng)中還會(huì)多出一個(gè)“current-menu-item”。

生成的類別列表li中帶有class=”cat-item cat-item-4″，其中“cat-item”中通用的，“cat-item-4”后面的數(shù)字對(duì)應(yīng)類別名稱，文章列表頁主題中如果是當(dāng)前主題，還會(huì)多出“ current-cat”樣式

生成的類別列表li中帶有class=”page_item page-item-71″，其中“page_item”中通用的，“page-item-71”后面的數(shù)字對(duì)應(yīng)頁面ID

特色圖像the_post_thumbnail() 帶有class=”Thumbnail thumbnail ”

系統(tǒng)默認(rèn)評(píng)論模板wp-includescomment-template.php也已經(jīng)為我們添加好了對(duì)應(yīng)的樣式。

一些插件也會(huì)生成的特有樣式代碼

breadcrumb插件id=”breadcrumb”

get the image插件生成的圖片中class=”attachment-100×100 wp-post-image”

其實(shí)這些命名都是有規(guī)律的，例如“menu-item”翻譯過來就是“菜單項(xiàng)”，“current-menu-item”翻譯過來就是“當(dāng)前菜單項(xiàng)”，如果你的英文不錯(cuò)的話就很簡(jiǎn)單了。

在制作主題的時(shí)候我們只要給這些已經(jīng)取好名字的class和id上添加上樣式屬性就行了。

例如：

在導(dǎo)航菜單中我們可以給訪問的當(dāng)前類別添加不同的樣式以示區(qū)分，那只需要給“current-menu-item”添加上不同的樣式就行了。

更多信息請(qǐng)查看IT技術(shù)專欄