Wordpress自定义单产品. how：<a data-full=.改变主要形象？

Question

我正在开发一个由另一个开发人员创建的WordPress站点，由于WordPress的更新，定制的主题在不同的地方出现了问题。我已经解决了大部分的问题，但这个问题让我很困惑，主要是因为我不确定它最初是如何工作的！我对PHP和WordPress相当陌生，我大部分的经验都是在HTML/CSS中.无论如何，我已经修改了这段代码来解决一些问题，并且它的当前状态现场直播是：

<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正在按预期进行更改，但是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=是什么？做？？编辑：认为我搞清楚了数据-完全改变了主图片与‘满’类，对吗？

请有人向我解释一下，当点击缩略图时，原始代码是如何改变主图像的，如果可能的话，还有关于如何修复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在做一些花哨的事情来让它工作，但是这里有一个代码片段，它将帮助您理解如何使用WP4.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">

注意:您可以将“媒体”更改为其他默认大小，如“小”、“中”、“大”、“满”或在functions.php中自己设置的自定义大小。

注2:控制响应工作方式的主要内容是“size”属性，它指定在什么宽度处显示什么。更多信息可以在本教程中找到