如果您经常使用WordPress主题,那么最好熟悉这些默认的WordPress生成的CSS备忘单。最近,在处理自定义主题项目时,我们发现需要根据不同的页面自定义某些项目。 WordPress有这些称为body类的东西,它输出类页面,page-template- {filename}和page-id– {number}。我们无法使用page-id– {number},因为页面ID从开发变为部署。我们也不想创建具有重复代码的自定义页面模板。我们知道我们可以在所有这些页面slug上保持一样的东西,所以我们决定在body类中添加页面slug,这允许我们做所有我们想要的自定义而没有任何复杂性。在本文中,我们将向您展示如何在WordPress主题body类中添加页面slug

因为这是一个特定于主题的代码,我们建议您将它放在主题中的functions.php文件。Wénjiàn.

//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" );

现在你将开始看到一个像这样输出的新体类:page- {slug}。使用该类覆盖默认样式并自定义特定页面的元素。

例如,如果您尝试使用窗口小部件类修改div。你可以像这样拥有你的CSS:

#sidebar .widgets{background: #fff; color: #000;}
.page-education #sidebar .widgets{background: #000; color: #fff;}