我正在寻找编辑WooCommerce产品图片和缩略图。

我的目标是向<a> 标签我想添加：data-lightbox="Gallery", 但我看不出我该怎么做。模板文件似乎是显而易见的地方，但代码没有我所希望的锚代码结构：

woocommerce\\single-product\\product-image.php

defined( \'ABSPATH\' ) || exit;

// Note: `wc_get_gallery_image_html` was added in WC 3.3.2 and did not exist prior. This check protects against theme overrides being used on older versions of WC.
if ( ! function_exists( \'wc_get_gallery_image_html\' ) ) {
    return;
}

global $product;

$columns           = apply_filters( \'woocommerce_product_thumbnails_columns\', 4 );
$post_thumbnail_id = $product->get_image_id();
$wrapper_classes   = apply_filters(
    \'woocommerce_single_product_image_gallery_classes\',
    array(
        \'woocommerce-product-gallery\',
        \'woocommerce-product-gallery--\' . ( $product->get_image_id() ? \'with-images\' : \'without-images\' ),
        \'woocommerce-product-gallery--columns-\' . absint( $columns ),
        \'images\',
    )
);
?>
<div class="<?php echo esc_attr( implode( \' \', array_map( \'sanitize_html_class\', $wrapper_classes ) ) ); ?>" data-columns="<?php echo esc_attr( $columns ); ?>" style="opacity: 0; transition: opacity .25s ease-in-out;">
    <figure class="woocommerce-product-gallery__wrapper">
        <?php
        if ( $product->get_image_id() ) {
            $html = wc_get_gallery_image_html( $post_thumbnail_id, true );
        } else {
            $html  = \'<div class="woocommerce-product-gallery__image--placeholder">\';
            $html .= sprintf( \'<img src="%s" alt="%s" class="wp-post-image" />\', esc_url( wc_placeholder_img_src( \'woocommerce_single\' ) ), esc_html__( \'Awaiting product image\', \'woocommerce\' ) );
            $html .= \'</div>\';
        }

        echo apply_filters( \'woocommerce_single_product_image_thumbnail_html\', $html, $post_thumbnail_id ); // phpcs:disable WordPress.XSS.EscapeOutput.OutputNotEscaped

        do_action( \'woocommerce_product_thumbnails\' );
        ?>
    </figure>
</div> 

缩略图是一样的。

woocommerce\\single-product\\product-thumbnails.php

defined( \'ABSPATH\' ) || exit;

// Note: `wc_get_gallery_image_html` was added in WC 3.3.2 and did not exist prior. This check protects against theme overrides being used on older versions of WC.
if ( ! function_exists( \'wc_get_gallery_image_html\' ) ) {
    return;
}

global $product;

$attachment_ids = $product->get_gallery_image_ids();

if ( $attachment_ids && $product->get_image_id() ) {
    foreach ( $attachment_ids as $attachment_id ) {
        echo apply_filters( \'woocommerce_single_product_image_thumbnail_html\', wc_get_gallery_image_html( $attachment_id ), $attachment_id ); // phpcs:disable WordPress.XSS.EscapeOutput.OutputNotEscaped
    }
}

我想我需要使用过滤器，但我以前从未使用过。还是删除图像和缩略图的操作并添加自己的功能？

remove_action( \'woocommerce_product_thumbnails\', \'woocommerce_show_product_thumbnails\', 20 );
remove_action( \'woocommerce_before_single_product_summary\', \'woocommerce_show_product_images\', 20 );

function my_plugin_show_product_image() {
// my custom image code where i can use my own attributes, div structure etc
// i have no idea what php is required to show the images
}

add_action( \'woocommerce_product_thumbnails\', \'my_plugin_show_product_image\', 20 );

function my_plugin_show_product_image() {
// my custom image code where i can use my own attributes, div structure etc
// i have no idea what php is required to show the images
}

add_action( \'woocommerce_before_single_product_summary\', \'my_plugin_show_product_image\', 10 );

有什么想法吗？

/**
 * overwritten from https://woocommerce.wp-a2z.org/oik_api/wc_get_gallery_image_html/
 */
function my_custom_img_function($attachment_id, $main_image = false)
{
    $flexslider        = (bool) apply_filters(\'woocommerce_single_product_flexslider_enabled\', get_theme_support(\'wc-product-gallery-slider\'));
    $gallery_thumbnail = wc_get_image_size(\'gallery_thumbnail\');
    $thumbnail_size    = apply_filters(\'woocommerce_gallery_thumbnail_size\', array($gallery_thumbnail[\'width\'], $gallery_thumbnail[\'height\']));
    $image_size        = apply_filters(\'woocommerce_gallery_image_size\', $flexslider || $main_image ? \'woocommerce_single\' : $thumbnail_size);
    $full_size         = apply_filters(\'woocommerce_gallery_full_size\', apply_filters(\'woocommerce_product_thumbnails_large_size\', \'full\'));
    $thumbnail_src     = wp_get_attachment_image_src($attachment_id, $thumbnail_size);
    $full_src          = wp_get_attachment_image_src($attachment_id, $full_size);
    $alt_text          = trim(wp_strip_all_tags(get_post_meta($attachment_id, \'_wp_attachment_image_alt\', true)));
    $image             = wp_get_attachment_image(
        $attachment_id,
        $image_size,
        false,
        apply_filters(
            \'woocommerce_gallery_image_html_attachment_image_params\',
            array(
                \'title\'                   => _wp_specialchars(get_post_field(\'post_title\', $attachment_id), ENT_QUOTES, \'UTF-8\', true),
                \'data-caption\'            => _wp_specialchars(get_post_field(\'post_excerpt\', $attachment_id), ENT_QUOTES, \'UTF-8\', true),
                \'data-src\'                => esc_url($full_src[0]),
                \'data-large_image\'        => esc_url($full_src[0]),
                \'data-large_image_width\'  => esc_attr($full_src[1]),
                \'data-large_image_height\' => esc_attr($full_src[2]),
                \'class\'                   => esc_attr($main_image ? \'wp-post-image\' : \'\'),
            ),
            $attachment_id,
            $image_size,
            $main_image
        )
    );

    return \'<div data-thumb="\' . esc_url( $thumbnail_src[0] ) . \'" data-thumb-alt="\' . esc_attr( $alt_text ) . \'" class="woocommerce-product-gallery__image"><a data-lightbox="Gallery" href="\' . esc_url($full_src[0]) . \'">\' . $image . \'</a></div>\';
}