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

我想在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 );
}
}

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

我还发现了这篇文章，其中有一个类似的问题被问到，但标题，但当我添加它时，它不起作用

有什么想法吗

编辑

因此，我已将该函数从wc-template-functions.php复制到我的child-themes-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\u get\u gallery\u image\u html（$attachment\u id，$main\u image=false）{
$flexslider=（bool）应用过滤器（“woocommerce”单一产品“flexslider”已启用”，获取主题支持（“wc产品库滑块”）；
$gallery_thumbnail=wc_get_image_size（'gallery_thumbnail'）；
$thumboil\u size=应用过滤器（'woocommerce\u gallery\u thumboil\u size'，数组（$gallery\u thumboil['width']，$gallery\u thumboil['height']）；
$image_size=apply_过滤器（'woocommerce_gallery_image_size'，$flexslider | |$main_图像？'woocommerce_single'：$thumbnail_size）；
$full_size=应用过滤器（'woocommerce_gallery_full_size'，应用过滤器（'woocommerce_product_缩略图_large_size'，'full'）；
$thumbnail\u src=wp\u get\u attachment\u image\u src（$attachment\u id，$thumbnail\u size）；
$full\u src=wp\u get\u attachment\u image\u src（$attachment\u id，$full\u size）；
$image=wp\u get\u attachment\u image（$attachment\u id，$image\u size，false，数组(
'title'=>get_post_字段（'post_title'，$attachment_id），
“数据标题”=>get_post_字段（'post_摘录'，$attachment_id），
'data src'=>$full\u src[0]，
“数据大图像”=>$full\u src[0]，
“数据大图像宽度”=>$full\u src[1]，
“数据大图像高度”=>$full\u src[2]，
'class'=>$main_image？'wp post image'：''，
) );
返回“”；
}

我还将函数wc_get_gallery_image_重命名为_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不会出现在每个缩略图下，而是出现在主图库图像下

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

编辑

现在标题显示感谢Zipkundan的帮助，但它显示在主图像下，而不是每个缩略图下。如何移动它以显示在每个相关缩略图下

此处，“wc\u get\u gallery\u image\u html（$attachment\u id）”（过滤器中的参数之一）是输出最终html的内容。这是在“wc template functions.php”中定义的函数。因此，您不能更改此函数。您可以在以下URL中看到函数代码：

好吧，这里有一些提示让你按照自己的方式锻炼。 希望您使用的是儿童主题。复制子主题的“functions.php”文件中的函数代码（在过滤器中作为参数传递的函数）。将函数命名为不同的名称，例如“wc\u get\u gallery\u image\u with\u title\u 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>';

希望这有帮助

更新（编辑后）

嗨，琪琪

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

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>';
}

函数wc\u get\u gallery\u image\u带有标题\u html（$attachment\u id，$main\u image=false）{
$flexslider=（bool）应用过滤器（“woocommerce”单一产品“flexslider”已启用”，获取主题支持（“wc产品库滑块”）；
$gallery_thumbnail=wc_get_image_size（'gallery_thumbnail'）；
$thumboil\u size=应用过滤器（'woocommerce\u gallery\u thumboil\u size'，数组（$gallery\u thumboil['width']，$gallery\u thumboil['height']）；
$image_size=apply_过滤器（'woocommerce_gallery_image_size'，$flexslider | |$main_图像？'woocommerce_single'：$thumbnail_size）；
$full_size=应用过滤器（'woocommerce_gallery_full_size'，应用过滤器（'woocommerce_product_缩略图_large_size'，'full'）；
$thumbnail\u src=wp\u get\u attachment\u image\u src（$attachment\u id，$thumbnail\u size）；
$full\u src=wp\u get\u attachment\u image\u src（$attachment\u id，$full\u size）；
$image=wp\u get\u attachment\u image（$attachment\u id，$image\u size，false，数组(
'title'=>get_post_字段（'post_title'，$attachment_id），
“数据标题”=>get_post_字段（'post_摘录'，$attachment_id），
'data src'=>$full\u src[0]，
“数据大图像”=>$full\u src[0]，
“数据大图像宽度”=>$full\u src[1]，
“数据大图像高度”=>$full\u src[2]，
'class'=>$main_image？'wp post image'：''，
) );
$imageTitle=''.esc_html（获取_标题（$attachment_id））。'；
返回“”；
}

注意“return”语句前的行

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

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

希望这能奏效。

这里，“wc\u get\u gallery\u image\u html（$attachment\u id）”（过滤器中的一个参数）是输出最终html的参数。这是在“wc template functions.php”中定义的函数。因此，您不能更改此函数。您可以在以下URL中看到函数代码：

好吧，这里有一些提示让你按照自己的方式锻炼。 希望您使用的是儿童主题。复制子主题的“functions.php”文件中的函数代码（在过滤器中作为参数传递的函数）。将函数命名为diff

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>';
}

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>');
    }
}
}});