如何从 WP 中的 ACF Image 字段的数组中获取信息？答案

【问题标题】：How can I get information from an array from an ACF Image field in WP?如何从 WP 中的 ACF Image 字段的数组中获取信息？
【发布时间】：2020-07-06 03:44:20
【问题描述】：

我对 WP 很陌生，所以这似乎是一个非常简单的问题。我正在尝试通过 css 类和高级自定义字段提供背景图片 url。我想这样做，这样我就可以保持课堂清洁干燥。该图像作为自定义字段图像存储在 WP admin 中。这是我的英雄模板代码：

<?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 循环就可以获得数据。任何帮助将非常感激！！谢谢。

【问题讨论】：

标签： php wordpress background-image advanced-custom-fields

【解决方案1】：

选项 1 - 使用数组键

假设您使用的是 ACF 并且该字段设置为返回“图像数组”，您可以使用数组键 url 获取图像 url，即：

$hero_img_url = $hero_img['url'];

选项 2 - 仅从 ACF 返回 URL

如果您只想获取图像的 URL，您可以在字段的 ACF 设置中将返回格式更改为“图像 URL”。然后get_field 只返回url，你可以像现在一样获取它，例如：

$hero_img_url = get_field('hero_image');

附加说明

当您使用关联数组（即带有键的数组）时，位置无关紧要，因此您不要尝试获取第 5 个元素。您只需使用键直接获取值。
如果您不确定数组中的内容或键是什么，可以使用var_dump($hero_img); 将其具有的键和值准确地输出到屏幕。

【讨论】：

这太棒了！谢谢！