我如何才能在其原始的单列中显示第一个帖子,并在两列中显示所有其他帖子?wordpress


How can I display first post in its original single column and all the other ones under in two columns? wordpress

我需要的是有点像这个家伙,但更复杂一点,我想:我怎样才能在一个列中显示第一篇文章,在两个列中显示其他文章?wordpress

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

A(较新的帖子)

B

C

D(旧职位)

等。

我希望它们是这样显示的:

B C

D E

G F

等。

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

那么在首页上有没有办法在不影响A帖和帖子页面的标题和文字内容的情况下,减少首页上B-G帖标题和摘要的字体大小?

或者,换一种方式,在不影响首页上的文章标题和摘录的情况下,自定义文章页面标题和文本内容的字体大小?

任何帮助或其他方式做非常感激!

一个纯粹的CSS解决方案是为整个帖子设置一个样式。这个样式就是2列样式。然后使用css伪选择器:first-of-type

为第一篇文章设置一个样式<<p> CSS例子/strong>
.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%的互联网用户使用。

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

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