将woocommerce中的自定义管理图片上传元框添加到产品类别
问题描述：
我正在使用自定义主题并希望在woocommerce管理部分中添加自定义上传字段。特别是类别部分。我想添加另一个字段，就像存储信息的缩略图上传一样。 将woocommerce中的自定义管理图片上传元框添加到产品类别
raunak-gupta在Adding 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：此代码不存储或在文本字段中再现保存的数据。
答
几个小时后，我想出了下面
添加功能这段代码添加到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>
或者您也可以使用高级自定义字段.... – Aibrean
我想WooCommerce默认有类缩略图？无论如何，'product_cat_add_video_field_rj（）'具有'id =“term_meta [video_link]”'作为文本输入。 JS以'＃meta-woo' id为目标。另外，在你的JS脚本中使用'console.log（attachment)'来验证你是否得到了正确的值。 – helgatheviking
你是对的woocommerce带有默认图像。我只需要另一张自定义存档模板标题图片的图片。 – omukiguy