如何使用body_class根据页面层级改变css

Question

尝试根据我的 Wordpress 页面层次结构设置各种 css 规则，发现 wordpress 可以使用 body_class 自动生成这些规则，但我完全不知道如何实现它.有人可以逐步向我解释吗？（也就是说，我需要在 functions.php 中放入什么，我需要在 css 文件中放入什么）？

基本上，我想更改页眉文本背景，这取决于父页面是什么。例如：

.../news，及其所有子页面（...news/newsletter-signup、news/submit 等）将为蓝色
.../community，及其所有子页面（...community/resources/supermarkets、...community/how-to/pay-utilities 等）将为紫色。
.../events，它的所有子页面都是橙色的。

TIA！

Answer 1

在您的 header.php 文件中将此 <body> 更改为 <body <?php body_class(); ?>>

Answer 2

例如，我们有标准页面，例如：

<html>
  <head>
    <!-- HEAD CONTENT -->
  </head>
  <body>
    <div class="container">
      <div class="post">
        <h1>Title of post</h1>
        <p>Text or another content of post</p>
      </div>
      <div class="post">
        <h1>Title of post</h1>
        <p>Text or another content of post</p>
      </div>
      <div class="post">
        <h1>Title of post</h1>
        <p>Text or another content of post</p>
      </div>
    </div>
  </body>
</html>

因此，我们可以使用 body_class() 函数来自定义不同类别类型的视图。

首先：将 body_class() 函数放入 body 标签中

<body <? body_class(); ?>>

其次：为每个类别写类

body.home .post, body.news .post, body.blog .post {
  width: 640px;
  display: block;
  clear: both;
}

body.portfolio .post, body.work .post, body.projects .post {
  width: 200px;
  display: block;
  float: left;

}

现在主页、博客和新闻类别中的所有帖子都逐行显示。

投资组合部分和类别项目中的所有出版物都显示在三列中。

主页、新闻和博客示例：

body,
html {
  width: 100%;
  background-color: #333;
}
.container {
  margin: 10px auto;
  width: 660px;
  background-color: #ccc;
}
.post {
  background-color: #fff;
  box-sizing: border-box;
  margin: 10px;
  padding: 10px;
  min-height: 240px;
  border: 1px solid #666;
}
body.home .post,
body.news .post,
body.blog .post {
  width: 640px;
  display: block;
  clear: both;
}
body.portfolio .post,
body.work .post,
body.projects .post {
  width: 200px;
  display: block;
  float: left;
}

<html>

<head>
  <!-- HEAD CONTENT -->
</head>

<body class="home">
  <div class="container">
    <div class="post">
      <h1>Title of post</h1>
      <p>Text or another content of post</p>
    </div>
    <div class="post">
      <h1>Title of post</h1>
      <p>Text or another content of post</p>
    </div>
    <div class="post">
      <h1>Title of post</h1>
      <p>Text or another content of post</p>
    </div>
    <br clear="all">
  </div>
</body>

</html>

作品、项目和作品集示例：

body,
html {
  width: 100%;
  background-color: #333;
}
.container {
  margin: 10px auto;
  width: 660px;
  background-color: #ccc;
}
.post {
  background-color: #fff;
  box-sizing: border-box;
  margin: 10px;
  padding: 10px;
  min-height: 240px;
  border: 1px solid #666;
}
body.home .post,
body.news .post,
body.blog .post {
  width: 640px;
  display: block;
  clear: both;
}
body.portfolio .post,
body.work .post,
body.projects .post {
  width: 200px;
  display: block;
  float: left;
}

<html>

<head>
  <!-- HEAD CONTENT -->
</head>

<body class="work">
  <div class="container">
    <div class="post">
      <h1>Title of post</h1>
      <p>Text or another content of post</p>
    </div>
    <div class="post">
      <h1>Title of post</h1>
      <p>Text or another content of post</p>
    </div>
    <div class="post">
      <h1>Title of post</h1>
      <p>Text or another content of post</p>
    </div>
    <br clear="all">
  </div>
</body>

</html>

如何使用body_class根据页面层级改变css

How to use body_class to change css according to page hierarchy

css

wordpress

themes