WordPress 自定义博客页面

Question

我想要自定义 WordPress 博客页面，就像照片中的页面一样。我尝试根据文章的年龄将文章放置为不同的布局，即最后一篇文章具有最大的缩略图，接下来的两篇文章具有第二大的缩略图，其余的文章具有最小的缩略图。 这是启发我的网站。

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

其余网站使用 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 定制器中。