时间戳

首页 > 解决方案 > 在 Wordpress 中使用 CSS 网格

php - 在 Wordpress 中使用 CSS 网格

问题描述

所以，我建立了一个网站，现在我把它变成了一个可定制的 wordpress 主题。问题是：我使用 CSS 网格构建了一个画廊，我想让它动态化。我需要在 wordpress 中上传照片（有时是视频或 gif），并让它们适合网格。

这是我的代码：

**HTML**
 <div class="gallery">
        <figure class="figure1">
            <img src="img/r1.jpg" class="figure-img">
        </figure>

        <figure class="figure2">
            <img src="img/r2.jpg" class="figure-img">
        </figure>

        <figure class="figure3">
            <img src="img/r3.jpg" class="figure-img">
        </figure>

        <figure class="figure4">
            <img src="img/r4.jpg" class="figure-img">
        </figure>

        <!-- more figures -->
</div>


 **CSS**
 .gallery {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr;
 }

 .figure-img {
     display: block;
     width: 100%;
     height: auto;
     object-fit: cover;
     margin-bottom: 0
 }

 .figure1 {
     grid-column: span 1;
 }

 .figure2 {
     grid-column: span 3;
 }

 .figure3 {
    grid-column: span 4;
 }

 .figure4 {
     grid-column: span 4;
 }

 /* more figures */

由于某些图像不应该占据整行而其他图像（有点随机），我不能只使用常规的画廊插件。

我必须补充一点，我是 php 的初学者……有什么想法吗？

谢谢！

标签： phpwordpresscsscss-grid

解决方案

您是否考虑过使用 Advanced Custom Fields Pro？您可以使用中继器字段并创建图库并创建自定义类来切换每个图像的网格大小。

推荐阅读