wordpress的body_class()函式,顧名思義,這個函式根據不同的頁面型別為body標籤生成class選擇器,從而讓設計人員可以各方便靈活的控制不同頁面中的各個元素。本文對這一函式進行了詳細的解析,包括該函式生成了些什麼,所包含的屬性值有哪些,以及如何使用和如何新增class選擇器等等。
1、body_class()生成什麼?
body_class()函式在Wordpress2.7幾乎和post_class()有同樣的執行方式,唯一不同的是class生成的名稱。 body_class()函式生成的class大多是根據你的訪問者在網站的位置。例如,如果訪問者在你的部落格首頁,但你沒有設定一個靜態主頁,函式和類 可能會產生如下所示:
<body class="home blog">
生成了兩個class類
如果你在某個帖子,body標籤看起來可能是這樣:
<body class="single postid-64">
如果你正在瀏覽一個頁面,body_class()會生成這樣:
<body class="page page-id-3 parent-page-id-0 page-template-default">
從本質上講,body_class()會生成基於內容的動態CSS class,以及在什麼情況下瀏覽。例如,如果你是註冊使用者,且已經登入,body_class()會在body標籤生成一個登入class。
以下為可用的body class的完整列表:
rtl home blog archive date search paged attachment error404 single postid-(id) attachmentid-(id) attachment-(mime-type) author author-(user_nicename) category category-(slug) tag tag-(slug) page page-parent page-child parent-pageid-(id) page-template page-template-(template file name) search-results search-no-results logged-in paged-(page number) single-paged-(page number) page-paged-(page number) category-paged-(page number) tag-paged-(page number) date-paged-(page number) author-paged-(page number) search-paged-(page number)
2. 如何新增body_class()
假設你正在使用Wordpress2.8以上的版本,通常body_class()放到<body>標籤裡。它通常在header.php檔案裡。
當你找到標籤的位置後,請把它更改為:
<body <?php body_class(); ?>>
3. 使用動態Body Class
現在我們有了body class,有什麼大不了呢?我將會解釋:
除了html元素外,標籤包圍著其他所有的HTML程式碼。因此,body class允許我們對網頁任何元素進行修改,具體到當前頁面。
也許通過例項更容易理解:
我們主題左邊有一個<div id=”content”>,右邊有一個<div id=”sidebar”>,他們都在一個960px寬<div id=”container”>裡。content div為600px寬,sidebar div為360px寬。但是,當瀏覽單獨的帖子頁面,我讓我的主題不顯示sidebar。現在,我們只剩下一個content div。不幸的是,container div為960px寬,而我們的content div卻只有600px寬。
我們難道用一個大空白區填充我們的工具欄?該如何解決呢?使用body class這將很簡單。我們只需要針對<div id=”content”>在帖子頁的情況進行定義。在CSS裡為:
.single #content{ width: 960px; }
通過這樣做,在帖子頁面,content div為960px寬。我們正在增加一個簡單有選擇性的CSS系統。
4. 新增body_class()的class
在某些情況下,你將要新增自己的Class到body_class()裡。如果你發現自己處在這種情況下,這些有些方法可以做到這一點。
首先,最簡單的方法是通過自定義Class函式呼叫
body_class()
<body <?php body_class('my-class'); ?>>
通過這樣做,我們現在告訴body_class()函式增加my-class的輸出。
第二,困難但更靈活的方式是,利用Wordpress的過濾器,增加新的body class。在這種情況下,我們將使用
get_body_class()
函式中的body_class過濾器。如果你不清楚過濾器如何執行,我將會在不久後寫一篇文章。在此之前,看看你是否能夠趕上來,非常容易。
這是增加使用過濾器增加class的例子:
<?php add_filter(’body_class’,'my_body_classes’); function my_body_classes($classes) { // add 'zdy_class' to the $classes array $classes[] = 'zdy_class'; // return the $classes array return $classes; } ?>
則輸出結果在body_class()的基礎上新增zdy_class