WordPress高级自定义字段背景图片

Question

我正在尝试设置通过自定义字段插件上传的图片，并将其显示为div的背景（在滑块中使用）。

但是图像没有显示...我在自定义字段中有文本，并且显示没问题，所以我认为这与我用来提取图像的代码行有关。

我正在尝试为图像设置.slide1的背景。

自定义字段名称是slide1_background。

HTML：

<div class="slide1" style="background-image:url('<?php the_field('slide_bg1'); ?>');">
<div class="slide1-cont"><p class="slide-text">
<h1><?php the_field('slide_title1'); ?></h1>
<img src="<?php bloginfo('template_directory')?>/images/line.png" /></p>
<p><?php the_field('slide_content1'); ?></p></div>
</div>

CSS：

.slide1{
background-repeat:no-repeat;
background-size:cover;
background-position:center;
height: 800px;
}

Answer 1

与您将其设置为图像源的另一个答案中的注释中的代码相比，请看问题中您尝试设置背景图像的代码中的区别。

the_field('slide_bg1')返回一个数组，因此您尝试将背景图像源设置为PHP数组，该数组将转换为字符串作为“ Array”，因此在HTML中看起来像： background-image:url('Array')

您需要先获取该字段，然后回显返回数组的url元素作为背景图像的源：

$image = get_field( 'slide_bg1' );
if ( !empty( $image ) ) { ?>
    <div class="slide1" style="background-image:url('<?php echo $image['url']; ?>');">
<?php }

Answer 2

使用echo

<div class="slide1" style="background-image:url('<?php echo the_field('slide_bg1'); ?>');">