主題設計師的提示和技巧


通過使用WordPress的經驗,我們發現主題設計人員經常會過分考慮某些功能。 他們正在尋找瘋狂的WordPress過濾器和掛鉤來完成一項任務,而所需的只是一些簡單的CSS。 WordPress默認情況下會生成許多CSS類。 (WordPress CSS備忘單)。 這些CSS類之一是body類的樣式。 在本文中,我們將解釋WordPress主體類101,並為初學者主題設計師分享一些有用的提示和技巧。

什麼是WordPress身體課程?

Body Class(body_class)是WordPress函數,為body元素提供了不同的類,因此主題作者可以使用CSS有效地設置其網站樣式。 HTML正文標記主要存在於您的header.php文件中,該文件加載在每個頁面上。 編碼主題時,可以將body_class函數附加到body元素上,如下所示:

>

通過添加此小元素,您將獲得使用CSS輕鬆修改每個頁面外觀的靈活性。 根據加載頁面的類型,WordPress自動添加適當的類。 例如,如果您在存檔頁面上,如果您選擇使用WordPress,WordPress將自動將存檔類添加到body元素。 它幾乎針對每個頁面都執行此操作。 以下是WordPress可能添加的一些常見類的示例:

.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-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) {}

如您所見,通過擁有如此強大的資源,您可以僅使用CSS來完全自定義WordPress頁面。 您可以自定義特定的作者個人資料頁面,基於日期的存檔等。那麼您將如何以及何時使用它?

如何使用WordPress Body Class

在大多數情況下,WordPress主體類是主題設計人員經常忽略的簡單解決方案。 是的,這也包括我們在內。 大約一年前,我們需要設置僅在特定頁面上的WordPress菜單項的樣式。 我們決定深入研究以找到一個過濾器,以向菜單項添加特殊的導航類,該類將使用條件語句添加。 例如,如果它是單個頁面,則將“博客”類添加到菜單項。 在花了所有時間弄清楚所有問題並寫了一篇文章之後,我們的一位用戶指出,我們可以很容易地使用現有的body類來做到這一點,例如:

.single #navigation .leftmenublog div{display: inline-block !important;}

注意:它如何使用在所有單個帖子頁面中添加的.single主體類。

男孩之後,我們沒有感到愚蠢。 從那時起,我們就開始做筆記,以了解在深入研究之前是否可以首先使用Body類進行操作。

再舉一個例子。 用戶接觸我們後,便要求根據類別頁面更改其網站上徽標圖像的方法。 包括他在內的大多數主題設計都是使用CSS(#header .logo)加載徽標。 我們建議如何使用.category-slug body類來更改其徽標,如下所示:

.category-advice #header .logo{background: url(images/logo-advice.png) no-repeat !important;}
.category-health #header .logo{background: url(images/logo-health.png) no-repeat !important;}

這個新的主題設計師擁有與我們同樣的時刻。 希望現在您掌握瞭如何在主題設計中利用健身課的竅門。 但是,等等,它變得更加強大,因為您可以使用過濾器添加自定義主體類。 讓我們看看如何做到這一點。

如何添加自定義正文類

WordPress有一個過濾器,您可以在需要時使用它來添加自定義主體類。 在向您展示特定用例場景之前,我們將向您展示如何使用過濾器添加主體類,以便每個人都可以在同一頁面上。

因為主體類是特定於主題的,所以您需要在functions.php文件中編寫一個自定義函數,如下所示:

function my_class_names($classes) {
	// add 'class-name' to the $classes array
	$classes[] = 'test-class-name';
	// return the $classes array
	return $classes;
}

//Now add test class to the filter
add_filter('body_class','my_class_names');

上面的代碼會將“ test-class-name”類添加到網站每個頁面上的body標記中。 還不錯吧? 該功能的真正功能在條件標籤中。 您可以說僅在單個頁面等上添加XYZ類。讓我們以這個示例為例,並將其應用於實際用例場景。

將類別類別添加到單個帖子頁面

假設您要自定義每個類別的單個帖子頁面。 根據定制的類型,您可以為其使用主體類。 為了簡單起見,假設您要根據單個帖子的類別更改頁面的背景顏色。 您可以通過將類別類添加到單個帖子頁面視圖中來實現。 將以下函數粘貼到主題的functions.php文件中:

// add category nicenames in body class
function category_id_class($classes) {
	global $post;
	foreach((get_the_category($post->ID)) as $category)
		$classes[] = $category->category_nicename;
	return $classes;
}

add_filter('body_class', 'category_id_class');

上面的代碼將在您的正文類中為單個帖子頁面添加類別類。 然後,您可以使用css類根據需要設置樣式。

在WordPress主題的主體類中添加頁面標籤

將以下代碼粘貼到主題的functions.php文件中:

//Page Slug Body Class
function add_slug_body_class( $classes ) {
global $post;
if ( isset( $post ) ) {
$classes[] = $post->post_type . '-' . $post->post_name;
}
return $classes;
}
add_filter( 'body_class', 'add_slug_body_class' );

請閱讀我們在body類上的slug頁上的文章,其中將解釋為什麼我們需要這樣做。

瀏覽器檢測和特定於瀏覽器的身體類別

有時您可能需要特殊的CSS樣式才能使所有功能在某些瀏覽器中正常工作(提示:Internet Explorer)。 內森·賴斯(Nathan Rice)提出了一個非常酷的解決方案,該解決方案根據用戶從其訪問站點的瀏覽器,將特定於瀏覽器的類添加到主體類中。

您所要做的就是將以下代碼粘貼到functions.php文件中:


然後,您可以使用類似的類:

.ie .navigation {some item goes here}

如果是小的填充或邊距問題,這是修復它的相當快的方法。

更多用例:

我們可能會列出更多的用例,但否則我們將不會失去控制。 這樣做的全部目的是幫助新主題開發人員了解WordPress主體類的基礎及其優點。 用例僅限於您的想像力。 我們已經看到商業主題開發人員(Genesis)使用主體類來提供各種佈局選項。 例如,Full Page Layout,Sidebar Content,Content Sidebar等。這樣做,用戶可以輕鬆切換頁面佈局,而不必擔心外觀問題,因為CSS.0已經對其進行了處理。

我們已經看到一些開發人員添加HTTP請求以加載他們提供的各種配色方案的CSS文件。 在很多情況下,更改也很小。 當一個人可以完成工作時,加載3個樣式表是沒有意義的。 只需使用身體類。

希望您發現本文很有用。 我們很高興聽到您對Body Class的想法,以及您過去如何使用或計劃將來使用它。