只需CSS”将Masonry和网格布局添加到您的WordPress网站

技术教程 2022年3月3日

1131 0 6

曾经想到你的帖子是如何在Wordpress主页和档案中显示的?

如果您可以使用砖石(Pinterest)方法或网格布局可以显示帖子，只需通过添加CSS片段?

没有插件，短路，模板更改，将页面分配为主页.只是纯css.

Masonry和网格布局都可以使用纯CSS，否标记更改

继续读取，或使用以下链接跳转:

为您的网站添加砖石和网格布局的准备
给你的帖子是pinterest砌体看起来
在网格中铺设出帖子
将自定义CSS添加到您的网站

为您的WordPress站点添加贴模和网格布局的准备工作

这些解决方案纯粹基于CSS等，毫不奇怪，他们严重依赖于您网站上的HTML标记而不进行修改.

使用的CSS已使用默认主题设计(并测试).这意味着CSS有几个期望:

类存在于描述页面类型的主体元素(例如，主页，博客，存档，搜索)
帖子列表是文章元素的集合，用载于div的标题完整，与内容的ID

如果使用默认主题，那么您将能够在没有修改的情况下使用CSS.即使你没有，你可能会发现你的主题使用类似的标记，你仍然可以使用CSS.例如，八十年代主题使用几乎与默认主题相同的标记.

如果您的主题不使用相同的标记-所谓的方法是检查CSS中引用的类和ID的页面源-那么您仍然可以使用CSS，您只需要更改匹配标记的类和IDS.

选择在哪里应用样式

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

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砌体看

推广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;
}

在默认布局中，帖子被输出为文章元素，其中包含在div中的ID内容.

CSS:

1.使用列计数属性设置#content包装器上的列数-在本例中.它还设置列-间隙.您会注意到Firefox和Safari的-MOZ - 和-webkit - .

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陈述将您的帖子列表转换为砖石墙非常令人印象深刻！

在网格中铺设帖子

网格为您的帖子列表带来订单和统一性

如果您更喜欢Masonry提供的更均匀性和订单，那么您可能有兴趣在网格中铺设出帖子.

网格非常非常易于实现，但在特色图像尺寸的尺寸相同时绝对工作最佳，否则您最终可以使用大量的空白填充较短的"单元格".

这次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％等.

添加响应- ness

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

是宽度属性，该属性确定列数，然后是在各种媒体查询中更改的属性.

@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列开始.如果您决定从更多列开始，那么您可能希望添加最大宽度的断点:1024px将宽度设置为32.5％(3列).

这将导致:

2列
2列当屏幕尺寸为768px

的最大宽度
屏幕尺寸为480px的最大宽度

1列

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

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

只需几个媒体查询确保网格响应更改屏幕尺寸

网格，比砌体更有序，但真的确实需要一致性和严谨，在特色图像尺寸以最有效的情况下.

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

将所选的自定义CSS注入WordPress站点时有许多选项.如果您的主题不包括添加自定义CSS的能力，那么您的选择是:

子主题 -创建一个子主题并将CSS添加到样式表
插件 -将所选择的样式添加到新的CSS文件，并创建一个使用WP-inqueue函数的插件，或许基于生成的页面，以便浏览新文件
编辑当前的主题的样式表 -真的，只是不要
使用自定义CSS插件 -有许多插件将允许您通过WordPress管理员接口向您的网站添加自定义CSS(Aptly命名的简单自定义CSS插件是这样一个插件)

我喜欢使用自定义CSS插件.它快速且易于设置，使得测试轻而易举，同样快速且易于从WordPress站点中删除CSS(清除编辑器或卸载插件).