WordPress自定义single-product.php：如何

Question

我正在另一个开发者创建的WordPress网站上工作，由于WordPress的更新，自定义主题在某些地方被破坏了。我已经设法解决了大多数问题，但这一个让我感到困惑，主要是因为我不确定它最初是如何工作的！我对PHP和WordPress相当陌生，我的大部分经验都是在HTML/CSS中。。。无论如何，我已经修改了这段代码来解决一些问题，并且它在live站点上的当前状态是：

<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继续显示原始结果。如果禁用响应图像，则该功能将正常工作。

我试图通过更改

因此，在我试图找到解决方案的本地机器上，它现在看起来是这样的：

<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>

问题是，我不确定最初的代码是如何导致主图像发生变化的，所以我不确定如何修复它。例如，什么是

有人能给我解释一下当点击缩略图时原始代码是如何改变主图像的，如果可能的话，还有关于如何修复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做了一些奇特的事情来让它工作，但这里有一个代码片段，可以帮助您了解如何使用WP 4.4中的响应图像，这些图像取自make.wordpress.org

<?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">

注意：您可以将“中”更改为其他wordpress默认大小，如“小”、“中”、“大”、“满”或在functions.php中自行设置自定义大小

注2：控制响应如何工作的主要因素是“大小”属性，该属性指定以何种宽度显示什么。更多信息可以在本教程中找到