Wordpress 自定义 single-product.php：<a data-full=... 如何更改主图像？

Question

我正在开发由另一位开发人员创建的 WordPress 网站，但由于 WordPress 更新，自定义主题在某些地方已损坏。我已经设法解决了大多数问题，但这个问题让我很困惑，主要是因为我不确定它最初是如何工作的！我对 PHP 和 WordPress 还很陌生，我的大部分经验都是 HTML/CSS ...... 无论如何，我已经不得不修改这段代码来修复一些问题，它的当前状态 on the live site 是：

<div class="full rounded-corners" >
    <!-- first image is viewable to start -->
    <?php echo the_post_thumbnail(); ?> 
</div>
<div class="previews">
<?php
global $wpdb;
$attachment_ids = $product->get_gallery_attachment_ids();

foreach ($attachment_ids as $attachment_id) {
    $sql = "SELECT guid FROM wp_1posts WHERE ID = " . $attachment_id;
    $row = $wpdb->get_row($sql);
    ?>
    <a data-full="<?php echo $row->guid; ?>"><img src="<?php echo $row->guid; ?>" width="56" height="58" /></a>

<?php } ?>
        

有一个主产品图片和一些缩略图，点击缩略图会更改主产品图片。

有几个问题。

1. WordPress 中使用 srcset 的新响应式图像破坏了单击拇指时主图像更改的功能，它继续显示主图像。 检查结果时，我可以看到 img src 正在按预期更改，但 srcset 继续显示原始内容。 如果禁用响应式图像，它会起作用。
2. 此代码提取最大版本的图像，这会导致加载问题。

我试图通过将<?php echo $row->guid;?> 更改为<?php echo wp_get_attachment_image($attachment_id, 'thumbnail');?> 来解决第二个问题。 这会按预期加载拇指，所以我认为这是一个可行的解决方案，但这给我留下了主图像没有改变的问题（除非响应图像被禁用）。

所以在我试图寻找解决方案的本地机器上，它现在看起来像这样：

<div class="full rounded-corners" >
    <!-- first image is viewable to start -->
    <?php echo the_post_thumbnail(); ?> 
</div>
<div class="previews">
    <?php
    global $product;
    $attachment_ids = $product->get_gallery_attachment_ids();
    foreach( $attachment_ids as $attachment_id ) {
   ?>
       <a data-full="<?php echo wp_get_attachment_url( $attachment_id ); ?>"> <img src="<?php echo wp_get_attachment_url( $attachment_id ); ?>" style="height:60px; width:auto;"></a>
   <?php }
   ?>
</div>
</div>

问题是，我不确定如何原始代码首先导致主图像发生变化，所以我不知道如何修复它。例如<a data-full=... 在做什么？？ 编辑： 认为我发现 data-full 用“full”类更改了主图片，对吗？

有人可以向我解释一下当点击缩略图时原始代码是如何改变主图像的，如果可能的话，有任何关于如何解决 srcset 问题的提示吗？

单击拇指后检查主图像时：

<img style="display: inline;" src="http://localhost/MooreRiverWP/wordpress/wp-content/uploads/2015/07/View-to-Ocean.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="8 Harris Street" srcset="http://localhost/MooreRiverWP/wordpress/wp-content/uploads/2015/07/8-Harris-Street-200x133.jpeg 200w, http://localhost/MooreRiverWP/wordpress/wp-content/uploads/2015/07/8-Harris-Street.jpeg 314w" sizes="(max-width: 314px) 100vw, 314px" height="209" width="314">

src正确，srcset不正确，图片显示srcset版本。

编辑： 我现在在实时站点上有几乎可以工作的代码，但禁用了响应式图像。我想让响应式图像正常工作，但除非有人能提供帮助，否则我想我将不得不认输并就此罢手！

Answer 1

我不确定是否有 javascript 做了一些花哨的事情来使其工作，但这里有一个代码 sn-p 可以帮助您了解如何使用来自 make.wordpress.org 的 WP 4.4 中的响应式图像

<?php
$img_src = wp_get_attachment_image_url( $attachment_id, 'medium' );
$img_srcset = wp_get_attachment_image_srcset( $attachment_id, 'medium' );
?>
<img src="<?php echo esc_url( $img_src ); ?>"
     srcset="<?php echo esc_attr( $img_srcset ); ?>"
     sizes="(max-width: 50em) 87vw, 680px" alt="A rad wolf">

注意：您可以在functions.php中将“medium”更改为其他wordpress默认尺寸，例如“small”、“medium”、“large”、“full”或自定义尺寸设置

注意 2：控制响应式工作方式的主要因素是 'sizes' 属性，它指定以什么宽度显示的内容。更多信息可以在这里找到this tutorial