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

使用echo

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

Answer 2

看看你的代码在你的问题中的差异，你尝试设置背景图像的地方，与你在另一个答案中将其设置为图像源的评论中的代码相比。

the_field('slide_bg1') returns 一个数组，所以你试图将背景图像源设置为一个 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 }

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

wordpress advanced custom fields background image

php

css

wordpress

background-image

custom-fields