在 WooCommerce 产品库图片下方添加标题 [英] Add title underneath WooCommerce product gallery images
问题描述
我想让每张图片的标题"显示在 Woocommerce 产品库中每张图片的下方.不是主图片，而是较小的可点击缩略图.
我的所有图片目前都设置了标题.
我查看了 product-thumbnails.php 并找到了以下代码:
if ( $attachment_ids && has_post_thumbnail() ) {foreach ( $attachment_ids 作为 $attachment_id ) {echo apply_filters('woocommerce_single_product_image_thumbnail_html', wc_get_gallery_image_html( $attachment_id ), $attachment_id );}}我相信这是我需要编辑的内容，但我不确定要添加什么.
我还发现了这篇文章，其中有人问过类似的问题，但需要字幕
这里，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 '<div data-thumb="' .esc_url( $thumbnail_src[0] ) .'" class="woocommerce-product-gallery__image"><a href="' .esc_url($full_src[0] ) . '">'.$图像.$图像标题.'</a></div>';其中，$imageTitle 将是包含在一些 html 标签(如span"或p")中的图像标题.
然后将文件product-thumbnails.php"复制到您的子主题中，并用您创建的新函数替换原始函数参数.于是代码变成这样:
if ( $attachment_ids && has_post_thumbnail() ) {foreach ( $attachment_ids 作为 $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('标题' =>get_post_field( 'post_title', $attachment_id ),'数据标题' =>get_post_field( 'post_excerpt', $attachment_id ),'数据源' =>$full_src[0],'data-large_image' =>$full_src[0],'data-large_image_width' =>$full_src[1],'data-large_image_height' =>$full_src[2],'类' =>$main_image ?'wp-post-image' : '',) );$imageTitle = ''.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] ).'">'.$图像.$图像标题.'</a></div>';}注意'return'语句前的一行.
尝试使用上述函数，不要忘记更改product-thumbnails.php"中的参数函数.
此外，一旦显示图像标题文本，您可能需要添加一些 css 规则以使文本正确显示.
希望这有效.
I want to get the 'title' of each image to display underneath each image in the Woocommerce product gallery. Not the main image, but the smaller clickable thumbnails.
All of my images currently have titles set.
I have looked in product-thumbnails.php and have found this code:
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 );
}
}
I believe this is what I need to edit but I am not sure what to add.
I also found this post where a similar thing has been asked but for captions Show caption under product gallery in WooCommerce, however it doesn't work when I add it
Any ideas?
EDIT
So I have copied the function from wc-template-functions.php into my child themes functions.php file:
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>';
}
I also renamed the function wc_get_gallery_image_with_title_html as well as changing the return line to this:
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>';
It doesn't seem to work. However, if i add in the word TEST in place of $imageTitle in the return line above to see if anything will appear, the word TEST does appear below every image.
The word test doesnt appear under each thumbnail though, it appears under the main gallery image.
What am I missing or doing wrong here?
EDIT
Now the title shows thanks to Zipkundan's help, but it shows under the main image and not under each thumbnail. How can I move it to show under each relevant thumbnail?
Here, "wc_get_gallery_image_html( $attachment_id )" (one of the argument in the filter) is what outputs the final html. This is a function defined in "wc-template-functions.php". Thus you can not alter this function. You can see the function code at following URL: http://woocommerce.wp-a2z.org/oik_api/wc_get_gallery_image_html/
Well, here's some hint for you to workout your way. Hope you are using child theme. Copy the function code (the function which is passed as argument in filter) in your child theme's "functions.php" file. Name the function something different, say "wc_get_gallery_image_with_title_html". Alter that code to append the image title in the 'return' statement. Something like:
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>';
Where, $imageTitle will be the title of the image wrapped into some html tag like 'span' or 'p'.
Then copy the file "product-thumbnails.php" into you child theme and replace the original function argument with the new function you have created. So the code becomes like this:
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 );
}}
Hope this helps.
Update (after your Edit)
Hi Kiki,
You were missing output of the image title in the function. Following is the updated function.
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>';
}
Note the line before 'return' statement.
Try using the above function and don't forget to change the argument function in "product-thumbnails.php".
Also, once you get the image title text displayed, you might need to add some css rules for the text to display properly.
Hope this works.
这篇关于在 WooCommerce 产品库图片下方添加标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
