Question

我们的网站之一是使用WordPress中的“自定义字段”构建的。最近，“自定义字段”要求对数据库进行升级，并且在升级数据库之前，所有自定义字段看起来都非常混乱。升级后，一切正常，除了主页中的图库滑块： https://d3vv6lp55qjaqc.cloudfront.net/items/1C402P1V2N040K223L0b/Image%202018-09-24%20at%2011.02.47%20AM.png?X-CloudApp-Visitor-Id=2866569

查看代码，尝试从不存在的源中提取图像： https://d3vv6lp55qjaqc.cloudfront.net/items/0S1J3b3r0o3R3l1X3n0A/Image%202018-09-24%20at%2011.05.28%20AM.png?X-CloudApp-Visitor-Id=2866569

但是，自定义字段中的图像已正确添加，因此应该提取正确的源。

index.php中试图实现此目标的php代码如下：

<img class="thumbnail" src="<?php echo $thumbnail_image['url']; ?>" alt="<?php echo $thumbnail_image['alt']; ?>">

我想知道这是否仍然是自数据库升级以来我们需要使用的正确代码？

这是显示相关滑块的部分的完整代码：

<div class="gallery-wrapper"> 
  <img class="left-arrow svg" src="<?php echo get_bloginfo('template_url'); ?>/images/noun_53563_cc.svg">
  <div class="left-opacity"></div>
  <div class="center-gap"></div>
  <div class="right-opacity"></div>
  <img class="right-arrow svg" src="<?php echo get_bloginfo('template_url'); ?>/images/noun_53562_cc.svg">

  <div class="gallery">
    <?php while(have_rows("images", $about_section)): the_row(); ?>
      <?php
        $thumbnail_image = get_sub_field("thumbnail_image", $row);
        $enlarged_image = get_sub_field("enlarged_image", $row);
      ?>

      <div class="image-wrapper <?php echo $class; ?>">
        <div class="thumbnail-wrapper" data-anchor-target="#about" data-500-top-bottom="opacity: 1;" data-200-top-bottom="opacity: 0;">
          <div class="outer-border"></div>
          <div class="inner-border"></div>
         <img class="thumbnail" src="<?php echo $thumbnail_image['url']; ?> " alt="<?php echo $thumbnail_image['alt']; ?>">
        </div>

        <div class="lightbox-wrapper">
          <div class="lightbox-background"></div>

          <div class="enlarged-wrapper">
            <div class="close">Close</div>
            <img class="left-arrow svg" src="<?php echo get_bloginfo('template_url'); ?>/images/noun_53563_cc.svg">
            <img class="right-arrow svg" src="<?php echo get_bloginfo('template_url'); ?>/images/noun_53562_cc.svg">
            <img class="enlarged" src="<?php echo $thumbnail_image['url']; ?>" alt="<?php echo $enlarged_image['alt']; ?>">
          </div>
        </div>
      </div>
    <?php endwhile; ?>
  </div>
</div>

自定义字段正在使用中继器，并且正在返回图像数组的值： https://www.screencast.com/t/D1PmtVbl

感谢您的帮助。谢谢！

Answer 1

您是否正在使用ACF（高级自定义字段）？如果是这样，我也在大约10个站点中进行了升级，并且没有收到任何错误。我已经将WP和ACF都升级到了最新版本。首先，请确保您的WP也已更新。

至于代码本身，我使用<?php the_field('image'); ?>进行打印。您的语法看起来有些不同。它还取决于您将图像输出配置为的格式。共有三个选项：图像对象，图像URL或图像ID。我通常使用图像URL，有时使用图像对象。因此，您的输出还将取决于您从<?php the_field('image'); ?>或<?php get_field('image'); ?>函数获得的结果。

从您的屏幕截图中，您似乎正在获取图像ID，但是您需要图像URL。

Answer 2

请仔细检查您的ACF-JSON文件夹（路径/到/ wp-content / themes /您的主题/ acf-json），如果存在，则将其设置为可写。并验证您的字段设置是否正确

{
        "key": "field_5ba25a93c0392",
        "label": "Thumbnail Image",
        "name": "thumbnail_image",
        "type": "image",
        "instructions": "",
        "required": 0,
        "conditional_logic": 0,
        "wrapper": {
            "width": "",
            "class": "",
            "id": ""
        },
        "return_format": "url", // Ruturn format should be URL not an ID
        "preview_size": "thumbnail",
        "library": "all",
        "min_width": "",
        "min_height": "",
        "min_size": "",
        "max_width": "",
        "max_height": "",
        "max_size": "",
        "mime_types": ""
    }

或者，您也可以进行if-else检查：

<?php
function returnFormatUrl( $var )
{
    if ( wp_http_validate_url( $var ) )
        return $var;
    elseif ( is_int( $var ) )
        return wp_get_attachment_image_src( $var )[0];
    elseif ( is_array( $var ) )
        return $var['url'];
}

$thumbnail_image = returnFormatUrl( get_sub_field("thumbnail_image", $row) );
$enlarged_image = returnFormatUrl( get_sub_field("enlarged_image", $row) );

如何从源图像URL中提取WordPress缩略图

2 个答案: