曾经想要让您的帖子在 WordPress 主页和档案中的显示方式更加有趣吗？

如果您可以使用 masonry (Pinterest) 方法或网格布局来显示您的帖子，只需添加一段 CSS 代码会怎样？

没有插件、简码、模板更改、将页面分配为主页。 只是纯 CSS。

继续阅读，或使用以下链接跳转：

• 为您的站点添加砌体和网格布局的准备工作
• 为您的帖子提供 Pinterest 砌体外观
• 在网格中布置帖子
• 将自定义 CSS 添加到您的站点

为您的 WordPress 网站添加砌体和网格布局的准备工作

这些解决方案完全基于 CSS，因此毫不奇怪，它们在很大程度上依赖于您网站上的 HTML 标记，无需修改即可工作。

使用的 CSS 已使用默认主题进行设计（和测试）。 这意味着 CSS 有几个期望：

1. 描述页面类型（例如主页、博客、存档、搜索）的 body 元素上存在类
2. 帖子列表是文章元素的集合，完整的标题包含在带有内容 id 的 div 中

如果您使用默认主题，则无需修改即可使用 CSS。 即使您不这样做，您也可能会发现您的主题使用了足够相似的标记，您仍然可以按原样使用 CSS。 例如，八十年代主题使用与默认主题几乎相同的标记。

如果你的主题没有使用相同的标记——最简单的判断方法是检查页面源中 CSS 中引用的类和 id——那么你仍然可以使用 CSS，你只需要更改类和与您的标记相匹配的 ID。

选择在哪里应用样式

您可能决定只想将您选择的样式应用于某些页面。

WordPress 使这变得非常简单，因为它将特定于页面的类应用于正文元素，例如博客、主页、存档和搜索，因此您只需为每个相关类编写 CSS 代码。

例如，如果您只想将样式应用于主页，那么您的 CSS 将如下所示：

body.blog article { styles go here... }

要将样式应用于主页和存档（类别）页面：

body.blog article, body.archive article { styles go here... }

要将样式仅应用于搜索结果：

body.blog search { styles go here... }

同样，这确实取决于您遵循 WordPress 主题建议的主题。

浏览器兼容性

作为 CSS3，这些技术不会适用于所有平台和浏览器。

我已经测试并确认它们可以在最新版本的 Chrome 和 Safari（都在 OS X 上）和 iOS（5+）上运行。 各种 CSS 网站也暗示 IE10 也不会有问题。

在这些浏览器（包括 IE9）之外，您的里程会有所不同，但值得记住的是，您当前的样式是后备的，因此使用旧浏览器的访问者根本不会注意到任何差异。

如果您发现这些样式在未提及的平台（尤其是 Windows）上成功运行，请在评论中告诉我们。

足够的免责声明，然后，让我们看看如何修饰您的帖子列表。

为您的帖子提供 Pinterest 砌体外观

有很多 WordPress 主题和少数插件以 Pinterest 风格的砖石格式显示帖子。 但是使用 CSS3，您可以简单地向您的 WordPress 网站添加一些额外的样式并获得相同的效果。

这个解决方案的灵感来自 Rahul Arora 在 W3Bits 上的帖子，基于 CSS3 对 柱子 财产。 此属性将在定义的列数中拆分内容，虽然它的创建可能更多地受到报纸样式跨列流动文本的想法的启发，但它对于砖石布局同样有用。

/* Masonry Custom CSS  */
/* Masonry container */
body.blog div#content, body.archive div#content {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
}
/* Masonry bricks or child elements */
body.blog article, body.archive article {
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
padding: 1em;
width: 100%;
}
body.archive .archive-header, body.blog .paging-navigation, body.archive .paging-navigation {
background-color: #ffffff;
-webkit-column-span: all;
column-span: all;
}

在默认布局中，帖子输出为 文章 包含在内容 id 的 div 中的元素。

CSS：

1. 使用 #content 包装器设置列数 列数 属性——在本例中为 4。它还设置 柱间隙. 你会注意到使用 -moz- 和 -webkit- 适用于 Firefox 和 Safari。

2.转动 文章 将元素放入砖块中，使用 内联块 并设置一个 宽度 到 100%。

3.确保页面 标题 通过指定这些元素跨越所有列，导航位于其自己的“行”中

为了保持整洁，您还可以考虑添加以下内容：

/* Some ad hoc CSS useful for many themes */
body.archive .site-content,
body.blog .site-content {
margin: 1em;
}
h1, h2, h3, h4, h5, h6, a {
-ms-word-wrap: break-word;
word-wrap: break-word;
}

这只是在内容周围留出一个边距，并确保标题中的长词不会丢失格式（对任何主题都很有用，而不仅仅是这里）。

使其响应

列方法的一个缺点是它会随着屏幕尺寸变小而迅速退化。

我们想要做的是操纵列的数量，以便文章元素获得合理的屏幕空间，以保持砖块的完整性和视觉吸引力。 因此，让我们添加一些媒体查询来根据屏幕大小更改列数：

@media only screen and (max-width : 1024px) {
body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}
@media only screen and (max-device-width : 1024px) and (orientation : portrait) {
body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media only screen and (max-width : 768px) {
body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media only screen and (max-width : 480px) {
body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}

如您所见，我们只需要更改 列数 每个查询的属性（及其派生词）。

这 4 个断点，其中 3 个适用于所有平台（只需调整浏览器窗口的大小即可看到它们生效），1 个专门用于纵向模式的平板电脑。

这是 iPad 和 iPhone 上的砌体样式：

当然，您可以（并且应该）更进一步，为砖块添加更多样式以提高视觉吸引力，但只需 3 个 CSS 语句即可将您的帖子列表变成砖石墙，这令人印象深刻！

在网格中布置帖子

如果您喜欢比砌体提供的更多的统一性和秩序，那么您可能有兴趣在网格中布置您的帖子。

网格非常非常容易实现，但当特色图像大小相同时效果最佳，否则您可能会以大量空白填充较短的“单元格”。

这次的 CSS 更短，仅仅依靠样式 文章 要素：

/* Grid Layout Custom CSS */
body.blog article, body.archive article {
width: 32.5%;
display: inline-block;
vertical-align: top;
text-align: left;
margin-bottom: 10px;
position: relative;
}

这就是绝对必要的。 同样，我们正在利用 内联块 并确保 文章 内容（标题、特色图片、摘录）垂直对齐。

重要的属性是 宽度 因为这决定了“列”的数量。 我使用 32.5% 作为初始值（使用 33% 会导致过早换行），这将提供 3 列。 显然，如果你想要 4 列，那么你会使用 24.5%，5 列 19.5%，等等。

添加响应性

就像我们的砖石造型一样，如果要保持其有效性，网格将需要响应。

因为它是 宽度 确定列数的属性，那么这就是将在各种媒体查询中更改的属性。

@media only screen and (max-device-width : 1024px) and (orientation : portrait) {
body.blog article, body.archive article {
width: 49%;
}
}
@media only screen and (max-width : 768px) {
body.blog article, body.archive article {
width: 49%;
}
}
@media only screen and (max-width : 480px) {
body.blog article, body.archive article {
width: 100%;
}
}

这次只有 3 个查询，因为我只从 3 列开始。 如果您决定从更多列开始，那么您可能希望添加一个断点 max-width: 1024px 以将宽度设置为 32.5%（3 列）。

这将导致：

1. 平板电脑纵向模式下的 2 列
2. 屏幕尺寸最大宽度为 768px 时为 2 列
3. 屏幕尺寸最大宽度为 480px 时为 1 列

这些断点将涵盖平板电脑和智能手机以及浏览器窗口的大小调整。

这是 iPad 和 iPhone 上的网格布局：

网格比砖石更有序，但在特色图像尺寸方面确实需要一致性和严谨性才能发挥最大作用。

将自定义 CSS 添加到您的站点

将您选择的自定义 CSS 注入您的 WordPress 网站时，有多种选择。 如果您的主题不包括添加自定义 CSS 的功能，那么您的选择是：

• 儿童主题 – 创建一个子主题并将 CSS 添加到样式表
• 插入 - 将您选择的样式添加到新的 CSS 文件并创建一个插件，该插件使用 wp-enqueue-style 函数，可能有条件地基于正在生成的页面，将新文件加入队列
• 编辑当前主题的样式表 – 不要，真的，只是不要
• 使用自定义 CSS 插件 – 有许多插件允许您通过 WordPress 管理界面将自定义 CSS 添加到您的站点（恰当地命名为 Simple Custom CSS 插件就是这样一个插件）

我喜欢使用自定义 CSS 插件。 它设置起来快速简单，让测试变得轻而易举，从您的 WordPress 站点中删除 CSS 也同样快速和容易（清除编辑器或卸载插件）。

CSS，通往 WordPress Zen 的途径

精彩的 CSS Zen Garden 多年来一直在证明，网站的外观和感觉可以在不改变标记的情况下，通过改变 CSS 来大幅改变。

虽然不在同一水平上，但这两种技术证明了改变 WordPress 网站的外观和感觉也是完全可能的，无需更改模板、使用简码或开发子主题。

只是一点点CSS。

编者注： 这篇文章已经更新，以确保准确性和相关性。 [Originally Published: July 2014 / Revised: February 2022]

• CSS
• 网格