還在考慮 WordPress 主題中那些類、 ID 怎麼命名嗎？其實 WordPress 輸出標籤生成的代碼中默認已經自動生成了一些 class 和 id，本文就一些常見的代碼中的生成的樣式列出來：

  • wp_nav_menu() 生成的菜單 （代碼略）
  • 最外面層的 class=」menu-nav-container」
  • 無序列表 ul 樣式 id=」menu-nav」 class=」menu」 如果是二級菜單則樣式為 class=」sub-menu」
  • 內部列表項 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″其實是調用了 「menu-item」 、 「menu-item-type-taxonomy」 、 「menu-item-object-category」 、 「menu-item-7」 四個樣式，它們中間是用空格分開的。

2 、 「menu-item」 在這個所有菜單項是一樣，「menu-item-type-taxonomy menu-item-object-category」 這個在菜單裏面是不一樣的，如果是這一菜單項是類別生成的就是這段代碼，如果這一菜單項是調用的頁面則生成的這段代碼會變成 「

menu-item-type-post_type menu-item-object-page」，如果這一菜單項是自定義的則為 「menu-item-type-custom menu-item-object-custom」 。

3 、列表項中每一項 「menu-item-7」 後面的數字不一樣

4 、在主題類別頁當前類別的菜單項中還會多出一個 「current-menu-item」 。

  • 生成的類別列表 li 中帶有 class=」cat-item cat-item-4″，其中 「cat-item」 中通用的，「cat-item-4」 後面的數字對應類別名稱，文章列表頁主題中如果是當前主題，還會多出 「 current-cat」 樣式
  • 生成的類別列表 li 中帶有 class=」page_item page-item-71″，其中 「page_item」 中通用的，「page-item-71」 後面的數字對應頁面 ID

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

系統默認評論模板 wp-includescomment-template.php 也已經為我們添加好了對應的樣式。

一些插件也會生成的特有樣式代碼

breadcrumb 插件 id=」breadcrumb」

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

其實這些命名都是有規律的，例如 「menu-item」 翻譯過來就是 「菜單項」，「current-menu-item」 翻譯過來就是 「當前菜單項」，如果你的英文不錯的話就很簡單了。

在製作主題的時候我們只要給這些已經取好名字的 class 和 id 上添加上樣式屬性就行了。

例如：

在導航菜單中我們可以給訪問的當前類別添加不同的樣式以示區分，那隻需要給 「current-menu-item」 添加上不同的樣式就行了。