如何在其原始单列中显示第一篇文章，而在两列中显示所有其他文章？ WordPress

Question

我需要的是有点像这个家伙，但我猜有点复杂： how can I display the first post in a single column and others in 2 columns? wordpress

所以目前我的帖子是这样显示的：

一个（较新的帖子）

B

C

D（旧帖）

等等

我希望他们像这样出现：

一个

B C

DE

FG

等等

问题是，从帖子 B 开始，标题和摘录将保持与帖子 A 相同的字体大小 - 在两列部分中看起来很棒的两个大。我可以通过减小字体大小来纠正这个问题，但这也会减小 A 帖子标题和摘录的字体大小，以及帖子页面中的标题和文本内容。

那么在首页有没有什么办法可以在不影响首页的B-G帖子标题和摘录的字体大小的情况下，不影响A帖子和帖子页面的标题和文本内容？

或者，做不同的事情，自定义帖子页面中标题和文本内容的字体大小而不影响主页上的帖子标题和摘录？

非常感谢任何帮助或其他方式！

Answer 1

纯 CSS 解决方案是为整个帖子设置样式。该样式将是 2 列样式。然后使用 css 伪选择器为第一篇文章设置样式：first-of-type

CSS 示例

.post {
    display: block;
    width: 50%;
}
.post p {
    //style your heart out
}
.post:first-of-type {
    width: 100%;
}
.post:first-of-type p {
    //larger font style
}

'first of type' 选择器不会引入任何额外的类来维护或额外的 PHP 代码。 97% of internet users 目前也可以使用它。

另一种选择是引入一个额外的 css 类，例如 first-post 具有自己的风格。然后，在显示帖子的循环中，您可以添加一个计数器，当该计数器为 1 时，执行一种样式，否则执行 2 列样式。

PHP 示例伪代码

for ($i = 0; $i<count($posts); $i++) {
    if ($i == 0) {
        // do single column
    } else {
        // do double column
    }
}