使用wordpress更改切片滑块的背景图像？

Question

我有以下前端标记，用于我的客户即将推出的网站上的垂直滑块（切片滑块）：

<!-- Slice slider -->
<div class="slice-slider" data-slice-slider="arrows; loop; simple; vertical; slice-active; autoplay; autoplaySpeed:4000; arrows; arrowsLayer:1;slideEasing:swing; touchDrag:false; draggable:false;">
<div class="section section1">
        <div class="slide_caption_holder">
            <h1>Data Management & Governance</h1>
            <h4>Data management and data governance are intertwined</h4>
            <!-- <a href="#"><span class="cta_btn">Learn More >></span></a> -->
        </div>
    </div>
    <div class="section section2">
        <div class="slide_caption_holder">
            <h1>Enterprise Data Strategy</h1>
            <h4>A competitive advantage to support enterprise goals</h4>
        </div>
    </div>
    <div class="section section3">
        <div class="slide_caption_holder">
            <h1>Regulatory Compliance</h1>
            <h4>Is often the initial reason for implementing data governance</h4>
        </div>
    </div>
    <div class="section section4">
        <div class="slide_caption_holder">
            <h1>DataOps</h1>
            <h4>Seeking to to break down silos across IT operations and software development teams and business</h4>
        </div>
    </div>
</div>
<!-- End of Slice Slider -->

还有我的 CSS：

.section {
    position:relative;
}

.section1 {
    background-image:url('../img/pexels-andrea-piacquadio-3760089.jpg');
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    height:100vh;
    width:100%;
    background-color:#8DB3CA;
}

.section1::before{
    position: absolute;
    content: "";
    top: 0;
    right: -10%;
    height: 100vh;
    width: 50%;
    background: linear-gradient(rgba(44,89,110, .35), rgba(44, 89, 110, 1));

    -webkit-transform: skew(-15deg);
  -moz-transform: skew(-15deg);
  -o-transform: skew(-15deg);
  transform: skew(-15deg);

}

.section2 {
    background-image:url('../img/pexels-bill-emrich-230794.jpg');
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    height:100vh;
    width:100%;
}

.section2::before{
    position: absolute;
    content: "";
    top: 0;
    right: -10%;
    height: 100vh;
    width: 50%;
    background: linear-gradient(rgba(44,89,110, .35), rgba(44, 89, 110, 1));

    -webkit-transform: skew(-15deg);
    -moz-transform: skew(-15deg);
    -o-transform: skew(-15deg);
    transform: skew(-15deg);

}

虽然 Slice Slider 也使用 src img，但我选择了这种使用 div 和 bg 图像的方法。

我的问题很简单，让我的 bg 图像可编辑的最简单方法是什么（即我可以从 wp 更改它们的路径）？

有没有办法把它变成一个自定义字段？或者我应该避免为我的滑块使用自定义 css 样式，而是直接将 imgs 放入标记中并以这种方式定位它？

更新：果然，问题出在名为“垂直滑块”的父字段中，这超出了要求。我刚刚创建了 group 类型的单独 slide_holder 字段，并在以下三个子字段中：

a) 幻灯片图片 (slide_image) b) 幻灯片标题 (slide_title) c) 幻灯片字幕（slide_caption）

返回图片类型设置为 URL。

它的工作完美无瑕:)

Answer 1

让他们通过这个从后端设置图像：

https://www.advancedcustomfields.com/

它可以说是最好的自定义字段系统。非常有据可查，而且很容易设置。

然后将图像打印为内联样式，而不是通过 css 提供它们：

<div class="section section2" style="background:url(/img/bg.jpg);background-size:cover;">
    <div class="slide_caption_holder">
        <h1>Enterprise Data Strategy</h1>
        <h4>A competitive advantage to support enterprise goals</h4>
    </div>
</div>