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 caption under product gallery in WooCommerce，但是添加后它不起作用

有什么想法吗？

EDIT

因此，我已将功能从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确实会出现在每个图像下方。

尽管单词test并未出现在每个缩略图下，但它出现在主图库图像下。

我在这里想念什么或做错什么了？

EDIT

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

Answer 1

在这里，“ wc_get_gallery_image_html（$ attachment_id）”（过滤器中的参数之一）是输出最终html的内容。这是“ wc-template-functions.php ”中定义的函数。因此，您无法更改此功能。您可以在以下URL上看到功能代码： 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规则以使文本正确显示。

希望这行得通。

Answer 2

由于图库缩略图是通过javascript动态生成和附加的，因此只能通过javascript进行自定义。

以下javascript自定义功能会将图库中的产品图片标题附加到图库导航中的相应缩略图。

jQuery(window).load(function(){
if( jQuery('body').hasClass('single-product') ){
var imgtitles = [];
jQuery('.woocommerce-product-gallery__wrapper').children('div').each(function(){
    var imgTitle = jQuery(this).find('a').find('img.wp-post-image').attr('title');
    console.log(imgTitle);
    imgtitles.push(imgTitle);
});
if( jQuery('ol.flex-control-nav').length && jQuery('ol.flex-control-nav').children().length>1 ){
    for(i=0; i<imgtitles.length; ++i){
        jQuery('ol.flex-control-nav li:nth-child('+(i+1)+')').append('<span class="flexthum-title">'+imgtitles[i]+'</span>');
    }
}
}});

您可以在此处看到一个有效的示例。 http://woocom.stuprohosting.in/product/vneck-tee/

如果这给您想要的结果，那么我建议您放弃在上一个答案中建议的对“ functions.php”和“ product-thumbnails.php”所做的更改。

我已经使用插件“页眉和页脚脚本”在网站页脚中添加了此自定义功能。 https://wordpress.org/plugins/header-and-footer-scripts/

Answer 3

jQuery(window).load(function(){
if( jQuery('body').hasClass('single-product') ){
var imgtitles = [];
jQuery('.woocommerce-product-gallery__wrapper').children('div').each(function(){
    var imgTitle = jQuery(this).find('a').find('img').attr('data-caption');
    console.log(imgTitle);
    imgtitles.push(imgTitle);
});
if( jQuery('ol.flex-control-nav').length && jQuery('ol.flex-control-nav').children().length>1 ){
    for(i=0; i<imgtitles.length; ++i){
        jQuery('ol.flex-control-nav li:nth-child('+(i+1)+')').append('<span class="flexthum-title">'+imgtitles[i]+'</span>');
    }
}
}});

在WooCommerce产品图片下方添加标题

3 个答案: