WordPress的body_class()函式詳解

神馬和浮雲發表於2014-04-11

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

相關文章