Question

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

基本上，我想根据父页面的内容更改标题文本背景。例如：

... / news及其所有子页面（...新闻/时事通讯 - 注册，新闻/提交等）将为蓝色
... / community及其所有子页面（...社区/资源/超市，...社区/操作方法/付费实用程序等）将是紫色的。
... / events，其所有子页面都是橙色。

TIA！

Answer 1

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

<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>

Answer 2

header.php文件中的

将此<body>更改为<body <?php body_class(); ?>>

如何使用body_class根据页面层次结构更改css

2 个答案: