Hi–是否可以以编程方式为商店和类别页面提供不同于预定义的wooccommerce缩略图的图像？例如，显示产品细节的不同图像？在不深入研究代码的情况下，我的猜测是将另一个字段标记为产品详细信息的图像添加到产品图像中。在这个领域，我可以从媒体库中选择给定产品的详细图像。然后在functions.php中指定一个自定义大小，最后在适当的位置使用以下内容获取图像：
$product->get_image('detail_img_size');
谢谢你的提示。
可以通过以下步骤：
-
添加一个额外的图像元框，来源(为此鼓掌(：
//in functions.php or plugin add_action( 'add_meta_boxes', 'detail_image_add_metabox' ); function detail_image_add_metabox () { add_meta_box( 'listingimagediv', __( 'Detail-Bild', 'text-domain' ), 'detail_image_metabox', 'product', 'side', 'low');//post, page, product } function detail_image_metabox ( $post ) { global $content_width, $_wp_additional_image_sizes; $image_id = get_post_meta( $post->ID, '_detail_image_id', true ); $old_content_width = $content_width; $content_width = 254; if ( $image_id && get_post( $image_id ) ) { if ( ! isset( $_wp_additional_image_sizes['post-thumbnail'] ) ) { $thumbnail_html = wp_get_attachment_image( $image_id, array( $content_width, $content_width ) ); } else { $thumbnail_html = wp_get_attachment_image( $image_id, 'post-thumbnail' ); } if ( ! empty( $thumbnail_html ) ) { $content = $thumbnail_html; $content .= '<p class="hide-if-no-js"><a href="javascript:;" id="remove_listing_image_button" >' . esc_html__( 'Entferne das Detail-Bild', 'text-domain' ) . '</a></p>'; $content .= '<input type="hidden" id="upload_listing_image" name="_product_detail_image" value="' . esc_attr( $image_id ) . '" />'; } $content_width = $old_content_width; } else { $content = '<img src="" style="width:' . esc_attr( $content_width ) . 'px;height:auto;border:0;display:none;" />'; $content .= '<p class="hide-if-no-js"><a title="' . esc_attr__( 'wähle das Detail-Bild', 'text-domain' ) . '" href="javascript:;" id="upload_listing_image_button" id="set-listing-image" data-uploader_title="' . esc_attr__( 'Wähle ein Detail-Bild', 'text-domain' ) . '" data-uploader_button_text="' . esc_attr__( 'wähle das Detail-Bild', 'text-domain' ) . '">' . esc_html__( 'wähle das Detail-Bild', 'text-domain' ) . '</a></p>'; $content .= '<input type="hidden" id="upload_listing_image" name="_product_detail_image" value="" />'; } echo $content; } add_action( 'save_post_product', 'detail_image_save', 10, 1 ); function detail_image_save ( $post_id ) { //check if the image is set and not empty if( isset( $_POST['_product_detail_image'] ) && !empty($_POST['_product_detail_image']) ) { $image_id = (int) $_POST['_product_detail_image']; echo $image_id; update_post_meta( $post_id, '_detail_image_id', $image_id ); } else { //else delete the post meta delete_post_meta($post_id, '_detail_image_id'); } }
这会在产品编辑屏幕上创建一个图像元框。
-
添加一个与媒体库通信的脚本：
jQuery(document).ready(function($) { // Uploading files var file_frame; jQuery.fn.upload_listing_image = function( button ) { var button_id = button.attr('id'); var field_id = button_id.replace( '_button', '' ); // If the media frame already exists, reopen it. if ( file_frame ) { file_frame.open(); return; } // Create the media frame. file_frame = wp.media.frames.file_frame = wp.media({ title: jQuery( this ).data( 'uploader_title' ), button: { text: jQuery( this ).data( 'uploader_button_text' ), }, multiple: false }); // When an image is selected, run a callback. file_frame.on( 'select', function() { var attachment = file_frame.state().get('selection').first().toJSON(); jQuery("#"+field_id).val(attachment.id); jQuery("#listingimagediv img").attr('src',attachment.url); jQuery( '#listingimagediv img' ).show(); jQuery( '#' + button_id ).attr( 'id', 'remove_listing_image_button' ); jQuery( '#remove_listing_image_button' ).text( 'enterne das Detail-Bild' ); }); // Finally, open the modal file_frame.open(); }; jQuery('#listingimagediv').on( 'click', '#upload_listing_image_button', function( event ) { event.preventDefault(); jQuery.fn.upload_listing_image( jQuery(this) ); }); jQuery('#listingimagediv').on( 'click', '#remove_listing_image_button', function( event ) { event.preventDefault(); jQuery( '#upload_listing_image' ).val( '' ); jQuery( '#listingimagediv img' ).attr( 'src', '' ); jQuery( '#listingimagediv img' ).hide(); jQuery( this ).attr( 'id', 'upload_listing_image_button' ); jQuery( '#upload_listing_image_button' ).text( 'wähle das Detail-Bild' ); }); }); -
将脚本放入functions.php或插件中：
//load script only for product admin function load_admin_metabox_script() { $current_screen = get_current_screen(); if ( $current_screen->post_type === 'product' ) { wp_enqueue_script( 'zcustom_js', get_template_directory_uri() . '/js/image_meta_box.js', array( 'jquery' )); } } add_action( 'admin_enqueue_scripts', 'load_admin_metabox_script' ); -
为商店和类别页面运行的循环分配图像：
//in functions.php or plugin remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 ); add_action( 'woocommerce_before_shop_loop_item_title', 'custom_loop_product_detail_thumbnail', 10 ); function custom_loop_product_detail_thumbnail() { global $product; $id = $product->get_id(); $size = 'woocommerce_thumbnail'; $detail_img_id = get_post_meta( $id , '_detail_image_id', true ); //check if image id is available and not empty if (isset($detail_img_id) && !empty($detail_img_id)){ $detail_img = wp_get_attachment_image( $detail_img_id, $size ); echo $detail_img; //else fallback to the original product image } else { $image_size = apply_filters( 'single_product_archive_thumbnail_size', $size ); echo $product ? $product->get_image( $image_size ) : ''; } }
这同样适用于产品小部件。只需在您的子主题中重写模板content-widget-product.php即可。
<!-- get detail images-->
<?php $id = $product->get_id();
//i use a custom size
$size = 'my_small_size';
$detail_img_id = get_post_meta( $id , '_detail_image_id', true );
if (isset($detail_img_id) && !empty($detail_img_id)){
$detail_img = wp_get_attachment_image( $detail_img_id, $size );
echo $detail_img;
} else {
//if detail images are not available use the original product image
echo $product->get_image('my_small_size'); // PHPCS:Ignore WordPress.Security.EscapeOutput.OutputNotEscaped
}
?>
这种方法允许为商店和类别页面使用不同的产品图像集。它可以提高重要产品功能的可见性，增加视觉多样性，至少对我的项目来说是这样。