Products
GG网络技术分享 2025-03-18 16:13 0
通过使用WordPress的经验，我们发现主题设计师经常过度使用某种功能。当他们需要的只是一些简单的CSS时，他们正在寻找疯狂的WordPress过滤器和钩子来完成任务。WordPress默认生成很多CSS类。（WordPress CSS备忘单）。其中一个CSS类区域是body类样式。在本文中，我们将解释WordPress体类101以及为初学主题设计者分享一些有用的提示和技巧。
什么是WordPress Body Class？
Body Class（body_class）是一个WordPress函数，它为body元素提供不同的类，因此主题作者可以使用CSS有效地设置其网站的样式。HTML body标签主要存在于header.php文件中，该文件在每个页面上加载。编码主题时，可以将body_class函数附加到body元素，如下所示：
<body <?php body_class($class); ?>>
通过添加这个小元素，您可以灵活地使用CSS轻松修改每个页面的外观。根据所加载页面的类型，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) {}
如何使用WordPress Body Class
在大多数情况下，WordPress body类是主题设计者经常忽略的简单解决方案。大约一年前，我需要设置仅在特定页面上设置WordPress菜单项的样式。我决定深入挖掘以找到一个过滤器，为菜单项添加一个特殊的导航类，这些菜单项将使用条件语句添加。例如，如果它是单个页面，则将“Blog”类添加到菜单项。我花了很多时间搞清楚所有这些并写一篇关于它的帖子，有用户指出可以很容易地用现有的体类来完成它，如下所示
.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有一个过滤器，您可以使用它在需要时添加自定义正文类。向您展示如何使用过滤器添加一个body类，然后再向您展示特定的用例场景，以便每个人都可以在同一页面上。
因为body类是特定于主题的，所以你需要在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\'
);
上面的代码将在您网站的每个页面上的body标签中添加一个“test-class-name”类。该函数的真正强大之处在于条件标记。您可以说只在单页等上添加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主题的Body Class中添加Page Slug
将以下代码粘贴到主题的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\' );
浏览器检测和浏览器特定的正文类
有时您可能需要特殊的CSS样式才能在某些浏览器中正常工作（HINT：Internet Explorer）。好吧弥敦道赖斯提出了一个非常酷的解决方案，基于用户正在访问从网站浏览器上增加了浏览器的具体类体类。
您所要做的就是将以下代码粘贴到functions.php文件中：
<?php
add_filter(\'body_class\',\'browser_body_class\');
function browser_body_class($classes) {
global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;
if($is_lynx) $classes[] = \'lynx\';
elseif($is_gecko) $classes[] = \'gecko\';
elseif($is_opera) $classes[] = \'opera\';
elseif($is_NS4) $classes[] = \'ns4\';
elseif($is_safari) $classes[] = \'safari\';
elseif($is_chrome) $classes[] = \'chrome\';
elseif($is_IE) $classes[] = \'ie\';
else $classes[] = \'unknown\';
if($is_iphone) $classes[] = \'iphone\';
return $classes;
}
?>
然后，您可以使用以下类：
.ie .navigation {some item goes here}
更多用例：
还有更多用例，这篇文章它的重点是帮助新主题开发人员理解WordPress体类的基础知识及其优点。用例仅限于您的想象力。已经看到商业主题开发人员（Genesis）使用body类来提供各种布局选项。例如，全页面布局，补充工具栏内容，内容边栏等。这样，用户可以轻松切换页面布局而不必担心外观问题，因为已经使用CSS.0进行了处理
还可以看到一些开发人员添加HTTP请求来加载他们提供的各种配色方案的CSS文件。在很多情况下，变化也很小。当一个人可以完成工作时，没有必要加载3个样式表。只需使用body类。
WordPress主题函数get_the_category_by_ID()知识点。
描述：
通过分类id获取分类所有信息
用法：
<?php get_the_category_by_ID( $cat_ID ); ?>
参数：
$cat_ID
(int) (必填) 分类ID
默认值:None
源文件：
/*** Retrieve category name based on category ID.
*
* @since 0.71
*
* @param int $cat_ID Category ID.
* @return string|WP_Error Category name on success, WP_Error on failure.
*/
function get_the_category_by_ID( $cat_ID ) {
$cat_ID = (int) $cat_ID;
$category = get_term( $cat_ID, \'category\' );
if ( is_wp_error( $category ) )
return $category;
return ( $category ) ? $category->name : \'\';
}
Demand feedback