WordPress的定製單product.php：<a data-full=... changing the main image?

I'm working on a WordPress site created by another developer, and the custom theme has broken in places due to WordPress updates. I've managed to fix most issues but this one has me stumped, mostly because I'm not sure exactly how it worked in the first place! I'm fairly new to PHP and WordPress, most of my experience being in HTML/CSS... Anyways, I've already had to modify this code to fix a few issues, and it's current state on the live site是怎麼：WordPress的定製單product.php：<a data-full=... changing the main image?

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

有一個主要的產品形象和一些縮略圖，點擊縮略圖改變主產品形象。

有幾個問題。

WordPress中使用srcset的新的響應式圖像事件打破了主圖像在點擊大拇指時改變的功能，它繼續顯示主圖像。檢查結果時，我可以看到img src正在按預期更改，但srcset正在繼續顯示原始文件。它適用於禁用響應圖像的情況。
此代碼會拉出導致加載問題的最大版本的圖像。

我試圖通過將<?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版本。

編輯： 我現在在生活網站上有幾乎可以工作的代碼，禁用了響應式圖像。我想讓響應式圖像能夠正常工作，但除非有人能夠提供幫助，否則我認爲我必須承認失敗並放棄它！

來源

2016-01-20 Ego Placebo

<?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的定製單product.php：<a data-full=... changing the main image?

回答

相關問題