Wordpress 和两种样式答案

【问题标题】：Wordpress and two stylesWordpress 和两种样式
【发布时间】：2016-10-04 01:14:31
【问题描述】：

我不是 PHP 编码员，但在一些帮助（Adam Burkenpas 的教程）的帮助下，我创建了我的第一个 Wordpress 主题。这是一个静态页面（首页）和博客。博客页面有问题，有两种不同的样式，一种用于博客，一种用于首页。一些类（如body）具有相同的名称，当我通过functions.php加载博客css时，我的首页变得一团糟（错误的字体，错误的字体颜色）。我将博客 CSS 中的正文名称更改为 'blog.body' 通过“在 HTML 中添加类”，但没有帮助。如何解决？

css代码

http://jsbin.com/xaredeneru

【问题讨论】：

你是想在 2 个不同的页面（首页和首页（首页是帖子列表页面））中实现 2 种不同的样式，对吗？
是的，就这样
好吧，我想说但人们已经说过了。您可以使用body_class 并针对（首页）您可以使用body.home .myclass {} 并针对博客列表页面您可以使用body.blog .myclass{}

标签： html css wordpress

【解决方案1】：

如果你想指定不同的身体类别，你可以看看https://codex.wordpress.org/Plugin_API/Filter_Reference/body_class 基于此，您可以检查页面并为该页面添加特定的正文类。现在在 css 中，您可以只提供具有父依赖项的样式，例如：

body.myclass .mytext{color:#000;}

对于第 2 页：

body.someotherclass .mytext{color:#000;}

干杯！

【讨论】：

【解决方案2】：

您可以在 CSS 中使用组合选择器：通常，<body> 标签会自动被 Wordpress 分配一个或多个唯一类，或者像 page 或 single-post 这样的类。当您使用 bowser 的开发人员工具检查生成的页面时，您会看到这些。

例如，您可以使用body.page {...} 来定义页面正文的规则，并使用body.archive {...} 来定义存档页面中的正文。

例如，您还可以使用.page .nav {...} 仅在页面上设置.nav 类元素的样式。等等……

【讨论】：

【解决方案3】：

就像@den-pat 和@johannes 所说的......

你可以使用body_class()函数，wordpress会自动为你设置一些body类，如果你想知道类是什么，什么时候出现你可以take a look here。

但是首页的 css 类是 .home 而博客（帖子列表页面）的 css 类是 .blog

你可以替换你当前的body标签代码

<body class="blog">

与

<body body_class() >

并使用 css 选择器来分隔样式

body.home { // aim for front-page template
 background: #ccc;
}

body.blog { // aim for blog template
 background: #666;
}

如果你想动态设置你的 body 类，值得一读 body_class 过滤钩子。

【讨论】：