在 WooCommerce 产品库图像下方添加标题

Question

我想要让每个图像的“标题”显示在 Woocommerce 产品库中每个图像的下方。不是主图像，而是较小的可点击缩略图。

我的所有图像目前都已设置标题。

我查看了product-thumbnails.php并找到了以下代码：

if ( $attachment_ids && has_post_thumbnail() ) {
foreach ( $attachment_ids as $attachment_id ) {
    echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', wc_get_gallery_image_html( $attachment_id  ), $attachment_id );
}
}

我相信这是我需要编辑的内容，但我不确定要添加什么。

我还发现这篇文章提出了类似的问题，但对于标题Show title under Product gallery in WooCommerce，但是当我添加它时它不起作用

有任何想法吗？

编辑

因此，我已将 wc-template-functions.php 中的函数复制到我的子主题functions.php 文件中：

function wc_get_gallery_image_html( $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 );
$image             = wp_get_attachment_image( $attachment_id, $image_size, false, array(
    'title'                   => get_post_field( 'post_title', $attachment_id ),
    'data-caption'            => get_post_field( 'post_excerpt', $attachment_id ),
    'data-src'                => $full_src[0],
    'data-large_image'        => $full_src[0],
    'data-large_image_width'  => $full_src[1],
    'data-large_image_height' => $full_src[2],
    'class'                   => $main_image ? 'wp-post-image' : '',
) );

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

我还重命名了函数wc_get_gallery_image_with_title_html并将返回行更改为：

return '<div data-thumb="' . esc_url( $thumbnail_src[0] ) . '" class="woocommerce-product-gallery__image"><a href="' . esc_url( $full_src[0] ) . '">' . $image . $imageTitle . '</a></div>';

这似乎不起作用。但是，如果我在上面的返回行中添加单词 TEST 代替 $imageTitle 以查看是否会出现任何内容，则单词 TEST 确实会出现在每个图像下方。

不过，“测试”一词不会出现在每个缩略图下方，而是出现在主图库图像下方。

我在这里错过了什么或做错了什么？

编辑

现在，由于 Zipkundan 的帮助，标题显示出来，但它显示在主图像下方，而不是每个缩略图下方。如何将其移动到每个相关缩略图下显示？

Answer 1

这里，“ wc_get_gallery_image_html( $attachment_id ) ”（过滤器中的参数之一）是输出最终 html 的内容。这是“ wc-template-functions.php ”中定义的函数。因此您无法更改此功能。您可以在以下网址查看函数代码： http://woocommerce.wp-a2z.org/oik_api/wc_get_gallery_image_html/

好吧，这里有一些提示可以帮助您锻炼身体。希望您使用儿童主题。将函数代码（在过滤器中作为参数传递的函数）复制到子主题的“ functions.php ”文件中。将函数命名为不同的名称，例如“ wc_get_gallery_image_with_title_html ”。更改该代码以将图像标题附加到“return”语句中。就像是：

return '<div data-thumb="' . esc_url( $thumbnail_src[0] ) . '" class="woocommerce-product-gallery__image"><a href="' . esc_url( $full_src[0] ) . '">' . $image . $imageTitle . '</a></div>';

其中，$imageTitle将是包装在某些 html 标签（如“span”或“p”）中的图像标题。

然后将文件“product-thumbnails.php”复制到您的子主题中，并将原始函数参数替换为您创建的新函数。所以代码就变成了这样：

if ( $attachment_ids && has_post_thumbnail() ) {
foreach ( $attachment_ids as $attachment_id ) {
    echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', wc_get_gallery_image_with_title_html( $attachment_id  ), $attachment_id );
}}

希望这可以帮助。

更新（编辑后）

嗨，琪琪，

您缺少函数中图像标题的输出。以下是更新后的功能。

function wc_get_gallery_image_with_title_html( $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 );
$image             = wp_get_attachment_image( $attachment_id, $image_size, false, array(
    'title'                   => get_post_field( 'post_title', $attachment_id ),
    'data-caption'            => get_post_field( 'post_excerpt', $attachment_id ),
    'data-src'                => $full_src[0],
    'data-large_image'        => $full_src[0],
    'data-large_image_width'  => $full_src[1],
    'data-large_image_height' => $full_src[2],
    'class'                   => $main_image ? 'wp-post-image' : '',
) );
$imageTitle         = '<span>' . esc_html( get_the_title($attachment_id) ) . '</span>';

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

请注意“return”语句之前的行。

尝试使用上面的函数，不要忘记更改“ product-thumbnails.php ”中的参数函数。

此外，一旦显示图像标题文本，您可能需要添加一些 css 规则以使文本正确显示。

希望这有效。