內容簡介
啟用此外掛後,body_class 樣板標籤會輸出五個額外的類別。
單一文章 (is_single) :
postname-[永久連結別名]
single-[分類別名]
parent-[上層分類別名] (包含所有上層及祖先分類別名,任何深度的階層)
頁面 (is_page) :
pagename-[永久連結別名]
分類別名 (is_archive and is_category) :
parent-category-[上層分類別名] (包含所有上層及祖先分類別名,任何深度的階層)
自訂分類法
從版本1.3開始,該外掛現在支援自訂階層式分類法。新的 body 類別遵循以下形式:
單一文章 (is_single) :
single-[taxonomy]-[分類名稱別名]
parent-[taxonomy]-[上層分類名稱別名] (包含所有上層及祖先分類別名,任何深度的階層)
分類法檔案 (is_archive and is_tax) :
parent-term-[上層分類名稱別名] (包含所有上層及祖先分類別名,任何深度的階層)
對單獨的文章,類別名稱包含在類別名中,因為我覺得在一個文章被分配到超過一個自定分類法的情況下,以及相同分類器可能出現在兩個或多個分類法中時,區分類別法非常重要。例如,假設您有一個房地產網站,其中紐約市的物業列表有兩個自訂分類法:市區和州。然後類別會像這樣:
single-city-new-york single-state-new-york
多站點支援
從版本1.3開始,該外掛現在支援多站點安裝。如果偵測到多站點安裝,該外掛會在網站每個頁面上輸出以下額外的 body 類別:
site-[站點ID]
範例
如果您有一篇稱為“前10個裝飾點子”、在“聖誕節”類別中且它的上層類別是“假期”且上上層類別為“日曆”的文章,那麼額外的 body 類別如下:
postname-top-10-decorating-ideas single-christmas parent-holidays parent-calendar
為什麼這很有用?因為它使您能夠僅使用 CSS 样式表,而無需編輯模板檔案或創建新樣板,即可對單個文章或頁面以及整個文章分類進行樣式設定。
繼續上面的例子,如果我想要給聖誕節類別中的所有文章添加一個綠色標題(為其增添節日氣氛),我可以使用以下 CSS 選擇器:
body.single-christmas h1 {
color: green;
}
進一步地,假設我想要將一個聖誕樹背景圖像僅附加到“前10個裝飾點子”文章中:
body.postname-top-10-decorating-ideas div.post {
background: url('images/xmas_tree.gif') no-repeat left top;
}
如果我想讓所有分類為假期(聖誕節、感恩節、復活節等)的文章都有帶有金邊的側邊欄,該怎麼做?
body.parent-holidays div#sidebar, /* all posts assigned to a subcategory of Holidays */
body.single-holidays div#sidebar { /* any posts assigned directly to the Holidays category */
border: solid 2px gold;
}
上述僅成為參考,如果您寫 CSS 選擇器有豐富的經驗,您將會發現更多使用新的 body 類別的方法。如需進一步討論,請查看此支援論壇主題:https://wordpress.org/support/topic/393942
外掛標籤
開發者團隊
原文外掛簡介
When activated, this plugin causes the body_class template tag to output five additional classes.
On single posts (is_single) :
postname-[permalink slug]
single-[category slug]
parent-[parent category slug] (all parent and grandparent categories in a hierarchy of any depth)
On pages (is_page) :
pagename-[permalink slug]
On category archives (is_archive and is_category) :
parent-category-[parent category slug] (all parent and grandparent categories in a hierarchy of any depth)
Custom Taxonomies
As of version 1.3, the plugin now supports custom hierarchical taxonomies. The new body classes take the following form:
On single posts (is_single) :
single-[taxonomy]-[term slug]
parent-[taxonomy]-[parent term slug] (all parent and grandparent terms in a hierarchy of any depth)
On taxonomy archives (is_archive and is_tax) :
parent-term-[parent term slug] (all parent and grandparent terms in a hierarchy of any depth)
For single posts, the taxonomy name is included in the class name, because I felt it was important to be able to distinguish between taxonomies in cases where a post is assigned to more than one custom taxonomy, and when the same term might appear in two or more taxonomies. For example, suppose you had a real estate site with property listings in New York City, and you had two custom taxonomies defined: City and State. Then the classes would look like this:
single-city-new-york single-state-new-york
Multisite Support
As of version 1.3, the plugin now supports multisite installations. If a multisite install is detected, the plugin will output the follow additional body class on every page of the site:
site-[site ID]
Examples
If you have a post titled “Top 10 Decorating Ideas”, in category “Christmas”, with a parent category of “Holidays” and a grandparent category of “Calendar”, the additional body classes will be as follows:
postname-top-10-decorating-ideas single-christmas parent-holidays parent-calendar
Why is this useful? Because it enables you to style individual posts and pages, as well as entire categories of posts, using only CSS, without having to edit the template files or create new templates.
Continuing the above example, if I wanted to give all of the posts in the Christmas category a green heading (to give them some extra holiday cheer), I could use a CSS selector like this:
body.single-christmas h1 {
color: green;
}
Going further, suppose I want to attach a background image of a Christmas tree ONLY to the “Top 10 Decorating Ideas” post:
body.postname-top-10-decorating-ideas div.post {
background: url('images/xmas_tree.gif') no-repeat left top;
}
What if I want all posts categorized under Holidays (Christmas, Thanksgiving, Easter, whatever) to have a sidebar with a gold border?
body.parent-holidays div#sidebar, /* all posts assigned to a subcategory of Holidays */
body.single-holidays div#sidebar { /* any posts assigned directly to the Holidays category */
border: solid 2px gold;
}
These are just a few examples. If you are experienced in writing CSS selectors, you will find many more uses for the new body classes. For further discussion, check this support forum thread: https://wordpress.org/support/topic/393942
