Wordpress 自定义博客页面

Question

我想像照片中那样自定义 WordPress 博客页面。 我尝试根据文章的年龄使文章具有不同的布局，即最后一篇文章具有最大的缩略图，接下来的 2 篇文章具有第二大缩略图，而 rest 具有最小的缩略图。 这是启发我的网站。

您知道是否有办法实现这一目标？

我正在为 rest 网站使用 elementor pro 和 crockblock。 主题：你好

Answer 1

纯 CSS 溶液。

 .grid { width: 100%; display: grid; grid-auto-flow: row; grid-auto-rows: 1fr; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 32px; justify-items: stretch; }.item { /* All items */ background-color: gray; width: 100%; height: 100%; grid-column: span 2; }.item:nth-child(1) { /* First item */ background-color: red; }.item:nth-child(2), .item:nth-child(3) { /* second and third */ background-color: blue; grid-column: span 1; }.item:nth-child(n+4) { /* Every item after the 3rd */ background-color: green; }

 <div class="grid"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> <div class="item">10</div> </div>

只要您不需要中间的其他随机内容，这就是最优雅、最直接的解决方案。 我保证这一点的主要原因是现有主题代码没有复杂性。 并且基本上可以添加到 Wordpress 中的 CSS 定制器。