WordPress custom single-product.php: как & lt; data-full = … меняет основное изображение?

Я работаю над сайтом 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 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=… делает ?? Редактировать: Думаю, я понял, что данные полностью меняются, главное изображение с классом ‘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.

Редактировать:
Теперь у меня есть почти рабочий код на живом сайте с отключенными адаптивными изображениями. Мне бы хотелось, чтобы работали адаптивные изображения, но если никто не сможет помочь, я думаю, что мне придется признать поражение и оставить все как есть!

3

Решение

Я не уверен, есть ли в 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: главное, что контролирует работу адаптивного адаптера — это атрибут «размеры», который указывает, что отображать при какой ширине. Более подробную информацию можно найти здесь этот урок

1

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]