Question

当我打开URL mydomain.com/shop时，我可以看到活动类别的行。我想创建相同的视图，但找不到woocommerce如何构造此HTML代码：

<img 
  src="https://www.example.com/wp-content/uploads/2020/01/dog-categorry-640x640.png" 
  alt="Dog" 
  width="450" 
  height="" 
  srcset="
  https://www.example.com/wp-content/uploads/2020/01/dog-categorry-640x640.png 640w, 
  https://www.example.com/wp-content/uploads/2020/01/dog-categorry-100x100.png 100w, 
  https://www.example.com/wp-content/uploads/2020/01/dog-categorry-300x300.png 300w, 
  https://www.example.com/wp-content/uploads/2020/01/dog-categorry-150x150.png 150w,
  https://www.example.com/wp-content/uploads/2020/01/dog-categorry-768x768.png 768w, 
  https://www.example.com/wp-content/uploads/2020/01/dog-categorry.png 1000w" sizes="(max-width: 450px) 100vw, 450px">

我确实理解所有上述HTML代码都是从archive-product.php文件中开始的，但是如果我尝试在小部件上重新创建，那将是行不通的。谁能解释在哪里可以找到构造此img HTML代码的PHP代码？

或者至少如何获得srcset中提到的所有链接？

Answer 1

wp_get_attachment_image是构建这些img标签的功能，它提取资产上载到WordPress时创建的所有预定义图像。

但是，他们在WooCommerce中为类别缩略图创建了新功能。

名为woocommerce_subcategory_thumbnail的函数位于wc-template-functions.php下的./wp-content/plugins/woocommerce/includes/

您要查找的特定代码行（在archive-product内）位于名为woocommerce_subcategory_thumbnail的钩子下。

    function woocommerce_subcategory_thumbnail( $category ) {
        $small_thumbnail_size = apply_filters( 'subcategory_archive_thumbnail_size', 'woocommerce_thumbnail' );
        $dimensions           = wc_get_image_size( $small_thumbnail_size );
        $thumbnail_id         = get_term_meta( $category->term_id, 'thumbnail_id', true );

        if ( $thumbnail_id ) {
            $image        = wp_get_attachment_image_src( $thumbnail_id, $small_thumbnail_size );
            $image        = $image[0];
            $image_srcset = function_exists( 'wp_get_attachment_image_srcset' ) ? wp_get_attachment_image_srcset( $thumbnail_id, $small_thumbnail_size ) : false;
            $image_sizes  = function_exists( 'wp_get_attachment_image_sizes' ) ? wp_get_attachment_image_sizes( $thumbnail_id, $small_thumbnail_size ) : false;
        } else {
            $image        = wc_placeholder_img_src();
            $image_srcset = false;
            $image_sizes  = false;
        }

        if ( $image ) {
            // Prevent esc_url from breaking spaces in urls for image embeds.
            // Ref: https://core.trac.wordpress.org/ticket/23605.
            $image = str_replace( ' ', '%20', $image );

            // Add responsive image markup if available.
            if ( $image_srcset && $image_sizes ) {
                echo '<img src="' . esc_url( $image ) . '" alt="' . esc_attr( $category->name ) . '" width="' . esc_attr( $dimensions['width'] ) . '" height="' . esc_attr( $dimensions['height'] ) . '" srcset="' . esc_attr( $image_srcset ) . '" sizes="' . esc_attr( $image_sizes ) . '" />';
            } else {
                echo '<img src="' . esc_url( $image ) . '" alt="' . esc_attr( $category->name ) . '" width="' . esc_attr( $dimensions['width'] ) . '" height="' . esc_attr( $dimensions['height'] ) . '" />';
            }
        }
    }

Woocommerce商店类别图像构建

1 个答案: