2016-11-11 49 views
0

我正在使用自定义主题并希望在woocommerce管理部分中添加自定义上传字段。特别是类别部分。我想添加另一个字段,就像存储信息的缩略图上传一样。 Image of illustrates what i want to achieve将woocommerce中的自定义管理图片上传元框添加到产品类别

raunak-guptaAdding custom field to product category in WooCommerce共享一个前进方向,我承担并产生了这个。帮帮我???

新增uploader.js

jQuery(document).ready(function($){ 

    var mediaUploader_woo; 

    $('#upload-button-woo').on('click',function(e) { 
     e.preventDefault(); 
     if(mediaUploader_woo){ 
      mediaUploader_woo.open(); 
      return; 
     } 

     mediaUploader_woo = wp.media.frames.file_frame = wp.media({ 
      title: 'Choose an Image', 
      button: { text: 'Choose Image'}, 
      multiple: false 
     }); 

     mediaUploader_woo.on('select', function(){ 
      attachment = mediaUploader_woo.state().get('selection').first().toJSON(); 
      $('#meta-woo').val(attachment.url); 
     }); 

     mediaUploader_woo.open(); 
    });  

}); 

我叫functions.php的媒体上传

function my_admin_scripts() { 
    wp_enqueue_media(); 

    wp_register_script('wina_classic-uadmin-js', get_template_directory_uri() . '/js/uploader.js', array('jquery','media-upload','thickbox'), '20130115', true); 
    wp_enqueue_script('wina_classic-uadmin-js'); 
} 

add_action('admin_print_scripts', 'my_admin_scripts'); 

然后瞧..

/*------------------------------------------------------------------- 
    Add Custom metabox for woocommerce Category page 
---------------------------------------------------------------------*/ 

function product_cat_add_video_field_rj() { 

    ?> 
    <div class="form-field"> 
     <label for="term_meta[video_link]"><?php _e('Video Link', 'flatsome'); ?></label> 
     <input type="text" name="term_meta[video_link]" id="term_meta[video_link]" value=""> 
     <p class="description"><?php _e('Enter a Video Link','flatsome'); ?></p> 
    </div> 
<?php 
} 
function product_cat_edit_video_field_rj($term) { 


    $t_id = $term->term_id; 

    $term_meta = get_option("taxonomy_$t_id"); ?> 
    <tr class="form-field"> 
    <th scope="row" valign="top"><label for="term_meta[video_link]"><?php _e('Video Link', 'flatsome'); ?></label></th> 
     <td>    
      <input type="text" name="term_meta[video_link]" id="meta-woo" value="<?php echo esc_attr($term_meta['video_link']) ? esc_attr($term_meta['video_link']) : ''; ?>" style="margin-left: 0px; margin-right: 0px; width: 50%;" /> 
      <input type="button" class="button button-secondary" value="Upload Image" id="upload-button-woo" /> 
      <p class="description"><?php _e('Enter a Video Link','flatsome'); ?></p> 
     </td> 
    </tr> 
<?php 
} 

// this action use for add field in add form of taxonomy 
add_action('product_cat_add_form_fields', 'product_cat_add_video_field_rj', 10, 2); 
// this action use for add field in edit form of taxonomy 
add_action('product_cat_edit_form_fields', 'product_cat_edit_video_field_rj', 10, 2); 

function product_cat_video_link_save($term_id) { 
    if (isset($_POST['term_meta'])) { 
     $t_id = $term_id; 
     $term_meta = get_option("taxonomy_$t_id"); 
     $cat_keys = array_keys($_POST['term_meta']); 
     foreach ($cat_keys as $key) { 
      if (isset ($_POST['term_meta'][$key])) { 
       $term_meta[$key] = $_POST['term_meta'][$key]; 
      } 
     } 
     update_option("taxonomy_$t_id", $term_meta); 
    } 
} 


// this action use for save field value of edit form of taxonomy 
add_action('edited_product_cat', 'product_cat_video_link_save', 10, 2); 
// this action use for save field value of add form of taxonomy 
add_action('create_product_cat', 'product_cat_video_link_save', 10, 2); 

PS:此代码不存储或在文本字段中再现保存的数据。

+0

或者您也可以使用高级自定义字段.... – Aibrean

+0

我想WooCommerce默认有类缩略图?无论如何,'product_cat_add_video_field_rj()'具有'id =“term_meta [video_link]”'作为文本输入。 JS以'#meta-woo' id为目标。另外,在你的JS脚本中使用'console.log(attachment)'来验证你是否得到了正确的值。 – helgatheviking

+0

你是对的woocommerce带有默认图像。我只需要另一张自定义存档模板标题图片的图片。 – omukiguy

回答

0

几个小时后,我想出了下面

添加功能这段代码添加到functions.php

//call for woocommerce custom admin image code  
require get_template_directory() . '/inc/woo-meta-category.php'; 

/*-------------------------------------------------------------------------------------- 
    Uploader JS 
----------------------------------------------------------------------------------------*/ 
function my_admin_scripts() { 
    wp_enqueue_media(); 

    wp_register_script('wina_classic-uadmin-js', get_template_directory_uri() . '/js/uploader.js', 
             array('jquery','media-upload','thickbox'), '20130115', true); 
    wp_enqueue_script('wina_classic-uadmin-js'); 
} 

add_action('admin_print_scripts', 'my_admin_scripts'); 

添加媒体上传的Javascript语言,JS/uploader.js

jQuery(document).ready(function($){ 

    var mediaUploader_woo; 

    $('#upload-button-woo').on('click',function(e) { 
     e.preventDefault(); 
     if(mediaUploader_woo){ 
      mediaUploader_woo.open(); 
      return; 
     } 

     mediaUploader_woo = wp.media.frames.file_frame = wp.media({ 
      title: 'Choose an Image', 
      button: { text: 'Choose Image'}, 
      multiple: false 
     }); 

     mediaUploader_woo.on('select', function(){ 
      attachment = mediaUploader_woo.state().get('selection').first().toJSON(); 
      $('#category-meta-woo').val(attachment.url); 
      $('#category-header-preview').attr('src', ''+ attachment.url + ''); 
     }); 

     mediaUploader_woo.open(); 
    });  

}); 

最后添加代码如下的/inc/woo-meta-category.php文件:

<?php 

/*------------------------------------------------------------------- 
    Add Custom metabox for woocommerce Category page 
---------------------------------------------------------------------*/ 

function product_cat_add_cat_head_field_rj() { ?> 
    <div class="form-field"> 
     <label for="term_meta[cat_head_link]"><?php _e('Category Page Image', 'wina-classic'); ?></label> 
     <input type="text" name="term_meta[cat_head_link]" id="term_meta[cat_head_link]" value=""> 
     <p class="description"><?php _e('Upload Category Page Image','wina-classic'); ?></p> 
    </div> 
<?php } 

function product_cat_edit_cat_head_field_rj($term) { 
    $t_id = $term->term_id; $term_meta = get_option("taxonomy_$t_id"); ?> 

    <tr class="form-field"> 
    <th scope="row" valign="top"><label for="term_meta[cat_head_link]"><?php _e('Category Page Image', 'wina-classic'); ?></label></th> 
     <td> 
      <img src="<?php echo esc_attr($term_meta['cat_head_link']) ? esc_attr($term_meta['cat_head_link']) : ''; ?>" height="60" width="120" id="category-header-preview" /> 
      <input type="hidden" name="term_meta[cat_head_link]" id="category-meta-woo" value="<?php echo esc_attr($term_meta['cat_head_link']) ? esc_attr($term_meta['cat_head_link']) : ''; ?>" style="margin-left: 0px; margin-right: 0px; width: 50%;" /> 
      <input type="button" class="button button-secondary" value="Upload Image" id="upload-button-woo" /> 
      <p class="description"><?php _e('Upload Category Page Image','wina-classic'); ?></p> 
     </td> 
    </tr> 
<?php 
} 

// this action use for add field in add form of taxonomy 
add_action('product_cat_add_form_fields', 'product_cat_add_cat_head_field_rj', 10, 2); 
// this action use for add field in edit form of taxonomy 
add_action('product_cat_edit_form_fields', 'product_cat_edit_cat_head_field_rj', 10, 2); 

function product_cat_cat_head_link_save($term_id) { 
    if (isset($_POST['term_meta'])) { 
     $t_id = $term_id; 
     $term_meta = get_option("taxonomy_$t_id"); 
     $cat_keys = array_keys($_POST['term_meta']); 
     foreach ($cat_keys as $key) { 
      if (isset ($_POST['term_meta'][$key])) { 
       $term_meta[$key] = $_POST['term_meta'][$key]; 
      } 
     } 
     update_option("taxonomy_$t_id", $term_meta); 
    } 
} 

// this action use for save field value of edit form of taxonomy 
add_action('edited_product_cat', 'product_cat_cat_head_link_save', 10, 2); 
// this action use for save field value of add form of taxonomy 
add_action('create_product_cat', 'product_cat_cat_head_link_save', 10, 2); 

在前端

global $post; 

//for product cat archive page only 
$term = get_queried_object(); 
$cutomPageImageOption = get_option('taxonomy_' . $term->term_id); 
$cutomPageImage = $cutomPageImageOption['cat_head_link']; 

if ($cutomPageImage > 1) { echo "Please add a category head image in the admin panel"; } 
?> 

<section id="page-header" class="page-header" style="background-image: url('<?php echo $cutomPageImage; ?>"> 
    <div class="container"> 
     <div class="row"> 
      <?php if (apply_filters('woocommerce_show_page_title', true)) : ?> 
       <h1><?php woocommerce_page_title(); ?></h1> 
      <?php endif; ?> 

     </div> 
    </div> 
</section> 
相关问题