Woocommerce 店铺品类形象建设

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的函数，位于./wp-content/plugins/woocommerce/includes/下的wc-template-functions.php

您要查找的特定代码行（在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'] ) . '" />';
            }
        }
    }