還在考慮 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」 新增上不同的樣式就行了。