显示带有分类图像的顶级Woocommerce产品标签

时间:2019-03-01 20:43:27

标签: php wordpress woocommerce

希望显示添加到product_tag分类法中的图像(缩略图)

通过更改以下内容以使用标记,我能够成功将图片上传字段添加到后端的product_tag分类中:

https://pluginrepublic.com/adding-an-image-upload-field-to-categories/

<?php

/**
 * ADD THUMNAIL IMAGE TO PRODUCT TAGS
 **/


/**
 * Plugin class
 **/
if ( ! class_exists( 'CT_TAX_META' ) ) {

class CT_TAX_META {

  public function __construct() {
    //
  }
 
 /*
  * Initialize the class and start calling our hooks and filters
  * @since 1.0.0
 */
 public function init() {
   add_action( 'product_tag_add_form_fields', array ( $this, 'add_product_tag_image' ), 10, 2 );
   add_action( 'created_product_tag', array ( $this, 'save_product_tag_image' ), 10, 2 );
   add_action( 'product_tag_edit_form_fields', array ( $this, 'update_product_tag_image' ), 10, 2 );
   add_action( 'edited_product_tag', array ( $this, 'updated_product_tag_image' ), 10, 2 );
   add_action( 'admin_enqueue_scripts', array( $this, 'load_media' ) );
   add_action( 'admin_footer', array ( $this, 'add_script' ) );
 }

public function load_media() {
 wp_enqueue_media();
}
 
 /*
  * Add a form field in the new product_tag page
  * @since 1.0.0
 */
 public function add_product_tag_image ( $taxonomy ) { ?>
   <div class="form-field term-group">
     <label for="product_tag-image-id"><?php _e('Image', 'hero-theme'); ?></label>
     <input type="hidden" id="product_tag-image-id" name="product_tag-image-id" class="custom_media_url" value="">
     <div id="product_tag-image-wrapper"></div>
     <p>
       <input type="button" class="button button-secondary ct_tax_media_button" id="ct_tax_media_button" name="ct_tax_media_button" value="<?php _e( 'Add Image', 'hero-theme' ); ?>" />
       <input type="button" class="button button-secondary ct_tax_media_remove" id="ct_tax_media_remove" name="ct_tax_media_remove" value="<?php _e( 'Remove Image', 'hero-theme' ); ?>" />
    </p>
   </div>
 <?php
 }
 
 /*
  * Save the form field
  * @since 1.0.0
 */
 public function save_product_tag_image ( $term_id, $tt_id ) {
   if( isset( $_POST['product_tag-image-id'] ) && '' !== $_POST['product_tag-image-id'] ){
     $image = $_POST['product_tag-image-id'];
     add_term_meta( $term_id, 'product_tag-image-id', $image, true );
   }
 }
 
 /*
  * Edit the form field
  * @since 1.0.0
 */
 public function update_product_tag_image ( $term, $taxonomy ) { ?>
   <tr class="form-field term-group-wrap">
     <th scope="row">
       <label for="product_tag-image-id"><?php _e( 'Image', 'hero-theme' ); ?></label>
     </th>
     <td>
       <?php $image_id = get_term_meta ( $term -> term_id, 'product_tag-image-id', true ); ?>
       <input type="hidden" id="product_tag-image-id" name="product_tag-image-id" value="<?php echo $image_id; ?>">
       <div id="product_tag-image-wrapper">
         <?php if ( $image_id ) { ?>
           <?php echo wp_get_attachment_image ( $image_id, 'thumbnail' ); ?>
         <?php } ?>
       </div>
       <p>
         <input type="button" class="button button-secondary ct_tax_media_button" id="ct_tax_media_button" name="ct_tax_media_button" value="<?php _e( 'Add Image', 'hero-theme' ); ?>" />
         <input type="button" class="button button-secondary ct_tax_media_remove" id="ct_tax_media_remove" name="ct_tax_media_remove" value="<?php _e( 'Remove Image', 'hero-theme' ); ?>" />
       </p>
     </td>
   </tr>
 <?php
 }

/*
 * Update the form field value
 * @since 1.0.0
 */
 public function updated_product_tag_image ( $term_id, $tt_id ) {
   if( isset( $_POST['product_tag-image-id'] ) && '' !== $_POST['product_tag-image-id'] ){
     $image = $_POST['product_tag-image-id'];
     update_term_meta ( $term_id, 'product_tag-image-id', $image );
   } else {
     update_term_meta ( $term_id, 'product_tag-image-id', '' );
   }
 }

/*
 * Add script
 * @since 1.0.0
 */
 public function add_script() { ?>
   <script>
     jQuery(document).ready( function($) {
       function ct_media_upload(button_class) {
         var _custom_media = true,
         _orig_send_attachment = wp.media.editor.send.attachment;
         $('body').on('click', button_class, function(e) {
           var button_id = '#'+$(this).attr('id');
           var send_attachment_bkp = wp.media.editor.send.attachment;
           var button = $(button_id);
           _custom_media = true;
           wp.media.editor.send.attachment = function(props, attachment){
             if ( _custom_media ) {
               $('#product_tag-image-id').val(attachment.id);
               $('#product_tag-image-wrapper').html('<img class="custom_media_image" src="" style="margin:0;padding:0;max-height:100px;float:none;" />');
               $('#product_tag-image-wrapper .custom_media_image').attr('src',attachment.url).css('display','block');
             } else {
               return _orig_send_attachment.apply( button_id, [props, attachment] );
             }
            }
         wp.media.editor.open(button);
         return false;
       });
     }
     ct_media_upload('.ct_tax_media_button.button'); 
     $('body').on('click','.ct_tax_media_remove',function(){
       $('#product_tag-image-id').val('');
       $('#product_tag-image-wrapper').html('<img class="custom_media_image" src="" style="margin:0;padding:0;max-height:100px;float:none;" />');
     });
     // Thanks: http://stackoverflow.com/questions/15281995/wordpress-create-product_tag-ajax-response
     $(document).ajaxComplete(function(event, xhr, settings) {
       var queryStringArr = settings.data.split('&');
       if( $.inArray('action=add-tag', queryStringArr) !== -1 ){
         var xml = xhr.responseXML;
         $response = $(xml).find('term_id').text();
         if($response!=""){
           // Clear the thumb image
           $('#product_tag-image-wrapper').html('');
         }
       }
     });
   });
 </script>
 <?php }

  }
 
$CT_TAX_META = new CT_TAX_META();
$CT_TAX_META -> init();
 
}
 

 

我的产品标签已经过修改,可以支持层次结构,并且我还只能显示Woocommerce顶级product_tag,其中包含以下内容(有效但没有缩略图)

$taxonomy = 'product_tag'; //Choose the taxonomy
$terms = get_terms( $taxonomy ); //Get all the terms

foreach ($terms as $term) { //Cycle through terms, one at a time

// Check and see if the term is a top-level parent. If so, display it.
$parent = $term->parent;
if ( $parent=='0' ) {

$term_id = $term->term_id; //Define the term ID
$term_link = get_term_link( $term, $taxonomy ); //Get the link to the archive page for that term
$term_name = $term->name;
 $slug = $term->slug;
 $factwpslug = "/shop/?fwp_category=";
 $distance = "&fwp_sort=distance";


echo '<li><a class="'. $slug . ' top-level-cat-nav" href="' . $factwpslug . $slug . $distance . '"><span class="label">' . $term_name . '</span></a></li>';

} }

现在,我正在尝试在前端显示已上传到ID为product_tag的每个product_tag-image-id的缩略图,如摘要所示。任何见识将不胜感激。

   // Get the current category ID, e.g. if we're on a category archive page
$category = get_category( get_query_var( 'cat' ) );
$cat_id = $category->cat_ID; 
   // Get the image ID for the category
$image_id = get_term_meta ( $cat_id, 'category-image-id', true );
   // Echo the image
echo wp_get_attachment_image ( $image_id, 'large' );

1 个答案:

答案 0 :(得分:1)

您快到了。您只需要做两件事:

  1. 获取图像ID
  2. 输出图像。

这是您的循环的更新版本,可完成这两件事。您可以更改wp_get_attachment_image()的第二个参数来更改图像大小。

$taxonomy = 'product_tag'; //Choose the taxonomy
$terms = get_terms( $taxonomy ); //Get all the terms

foreach ($terms as $term) { //Cycle through terms, one at a time

// Check and see if the term is a top-level parent. If so, display it.
$parent = $term->parent;
if ( $parent=='0' ) {

$term_id = $term->term_id; //Define the term ID
$term_link = get_term_link( $term, $taxonomy ); //Get the link to the archive page for that term
$term_name = $term->name;
$slug = $term->slug;
$factwpslug = "/shop/?fwp_category=";
$distance = "&fwp_sort=distance";

// Get the image ID here using the $term_id from above and the meta key you used to save the ID
$image_id = get_term_meta ( $term_id, 'product_tag-image-id', true );


// Use wp_get_attachment_image() to get the image HTML
echo '<li><a class="'. $slug . ' top-level-cat-nav" href="' . $factwpslug . $slug . $distance . '"><span class="label">' . $term_name . '</span>' . wp_get_attachment_image ( $image_id, 'large' ) . '</a></li>';

}
}
相关问题