如何从 WP 中的 ACF 图像字段的数组中获取信息?
How can I get information from an array from an ACF Image field in WP?
我是 WP 的新手,所以这看起来是一个非常简单的问题。我正在尝试通过 css class 和高级自定义字段提供背景图片 url。我想这样做,这样我就可以保持我的 class 干净干燥。该图像作为自定义字段图像存储在 WP 管理中。这是我的英雄模板代码:
<?php
if (have_posts()) : while (have_posts()) : the_post();
?>
<?php
$hero_img = get_field('hero_image');
?>
<h3>ACF Field Data: <?php the_field('hero_image');?></h3> // just to see what it is
<section class="panel--hero panel--bg-image" <?php $hero_img ? print 'style="--background-image: url("hero_img[5]");"' : ''; ?>>
<div class="panel__content">
<div class="container container__grid page-heading">
<div class="container__col">
<h2 class="page-title center--flex text-white"><?php the_title() ?></h2>
</div>
</div>
<div>
</section>
<?php
endwhile;
endif;
?>
和 scss:
&--bg-image {
position: relative;
height: 50vh;
&::after {
background-image: var(--background-image);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
bottom: 0;
content: '';
display: block;
opacity: var(--opacity);
left: 0;
right: 0;
position: absolute;
top: 0;
z-index: -1;
}
}
没有图像显示。绝对路径是该数组中的第五项,它没有通过。在 JS 中,我通常会循环遍历它,但我认为我已经使用变量声明上方的 'if/while' 循环来做到这一点。我现在也需要循环 $hero_img 变量吗?如果是这样,那是 WP/PHP 中最常规的方法吗? forEach 是一个选项吗?也许我不清楚数据是否仅通过 运行 和 if/while 循环可用。任何帮助将非常感激!!谢谢
选项 1 - 使用数组键
假设您正在使用 ACF 并且字段设置为 return“图像数组”,您可以使用数组键 url
获取图像 url,即:
$hero_img_url = $hero_img['url'];
选项 2 - 只有 return 来自 ACF
的 URL
如果您只想获取图像的 URL,可以将 return 格式更改为“图像 URL”在字段的 ACF 设置中。然后 get_field
return 只有 url 你可以像现在一样得到它,例如:
$hero_img_url = get_field('hero_image');
补充说明
- 当您使用关联数组(即带键的数组)时,位置无关紧要,因此您不要尝试获取第 5 个元素,例如。您只需使用键直接获取值即可。
- 如果您不确定数组中的内容或键是什么,您可以使用
var_dump($hero_img);
在屏幕上准确输出数组中的键和值。
我是 WP 的新手,所以这看起来是一个非常简单的问题。我正在尝试通过 css class 和高级自定义字段提供背景图片 url。我想这样做,这样我就可以保持我的 class 干净干燥。该图像作为自定义字段图像存储在 WP 管理中。这是我的英雄模板代码:
<?php
if (have_posts()) : while (have_posts()) : the_post();
?>
<?php
$hero_img = get_field('hero_image');
?>
<h3>ACF Field Data: <?php the_field('hero_image');?></h3> // just to see what it is
<section class="panel--hero panel--bg-image" <?php $hero_img ? print 'style="--background-image: url("hero_img[5]");"' : ''; ?>>
<div class="panel__content">
<div class="container container__grid page-heading">
<div class="container__col">
<h2 class="page-title center--flex text-white"><?php the_title() ?></h2>
</div>
</div>
<div>
</section>
<?php
endwhile;
endif;
?>
和 scss:
&--bg-image {
position: relative;
height: 50vh;
&::after {
background-image: var(--background-image);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
bottom: 0;
content: '';
display: block;
opacity: var(--opacity);
left: 0;
right: 0;
position: absolute;
top: 0;
z-index: -1;
}
}
没有图像显示。绝对路径是该数组中的第五项,它没有通过。在 JS 中,我通常会循环遍历它,但我认为我已经使用变量声明上方的 'if/while' 循环来做到这一点。我现在也需要循环 $hero_img 变量吗?如果是这样,那是 WP/PHP 中最常规的方法吗? forEach 是一个选项吗?也许我不清楚数据是否仅通过 运行 和 if/while 循环可用。任何帮助将非常感激!!谢谢
选项 1 - 使用数组键
假设您正在使用 ACF 并且字段设置为 return“图像数组”,您可以使用数组键 url
获取图像 url,即:
$hero_img_url = $hero_img['url'];
选项 2 - 只有 return 来自 ACF
的 URL如果您只想获取图像的 URL,可以将 return 格式更改为“图像 URL”在字段的 ACF 设置中。然后 get_field
return 只有 url 你可以像现在一样得到它,例如:
$hero_img_url = get_field('hero_image');
补充说明
- 当您使用关联数组(即带键的数组)时,位置无关紧要,因此您不要尝试获取第 5 个元素,例如。您只需使用键直接获取值即可。
- 如果您不确定数组中的内容或键是什么,您可以使用
var_dump($hero_img);
在屏幕上准确输出数组中的键和值。