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 数组，该数组将转换为字符串为“数组”，因此在您的 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'); ?>');">