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在wc-template-functions.php下面./wp-content/plugins/woocommerce/includes/您正在查找的特定代码行（在 内部archive-product）位于名为woocommerce_subcategory_thumbnail.&nbsp; &nbsp; function woocommerce_subcategory_thumbnail( $category ) {&nbsp; &nbsp; &nbsp; &nbsp; $small_thumbnail_size = apply_filters( 'subcategory_archive_thumbnail_size', 'woocommerce_thumbnail' );&nbsp; &nbsp; &nbsp; &nbsp; $dimensions&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;= wc_get_image_size( $small_thumbnail_size );&nbsp; &nbsp; &nbsp; &nbsp; $thumbnail_id&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;= get_term_meta( $category->term_id, 'thumbnail_id', true );&nbsp; &nbsp; &nbsp; &nbsp; if ( $thumbnail_id ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $image&nbsp; &nbsp; &nbsp; &nbsp; = wp_get_attachment_image_src( $thumbnail_id, $small_thumbnail_size );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $image&nbsp; &nbsp; &nbsp; &nbsp; = $image[0];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $image_srcset = function_exists( 'wp_get_attachment_image_srcset' ) ? wp_get_attachment_image_srcset( $thumbnail_id, $small_thumbnail_size ) : false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $image_sizes&nbsp; = function_exists( 'wp_get_attachment_image_sizes' ) ? wp_get_attachment_image_sizes( $thumbnail_id, $small_thumbnail_size ) : false;&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $image&nbsp; &nbsp; &nbsp; &nbsp; = wc_placeholder_img_src();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $image_srcset = false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $image_sizes&nbsp; = false;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; if ( $image ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Prevent esc_url from breaking spaces in urls for image embeds.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Ref: https://core.trac.wordpress.org/ticket/23605.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $image = str_replace( ' ', '%20', $image );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Add responsive image markup if available.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ( $image_srcset && $image_sizes ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 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 ) . '" />';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; echo '<img src="' . esc_url( $image ) . '" alt="' . esc_attr( $category->name ) . '" width="' . esc_attr( $dimensions['width'] ) . '" height="' . esc_attr( $dimensions['height'] ) . '" />';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }