分类法媒体加载器按钮中的自定义元字段不起作用
custom meta field in taxonomy media up loader button no working
我添加了一个元字段来上传自定义分类中的图像。上传图片有问题
function product_categories_custom_fields($tag)
{
// Check for existing taxonomy meta for the term you're editing
$t_id = $tag->term_id;
// Get the ID of the term you're editing
$term_meta = get_option("taxonomy_term_$t_id"); // Do the check
?>
<tr class="form-field">
<th scope="row" valign="top"><label for="cat_Image_url"><?php _e('Product Category Banner URL'); ?></label></th>
<td>
<input id="banner-url" name="term_meta[banner]" type="text" style="width: 100%;" value="<?php echo $term_meta['banner'] ? $term_meta['banner'] : ''; ?>" name="image" />
<input id="banner-button" field-id="banner-url" type="button" class="upload button" value="Upload Image" /><br />
<span class="description"><?php _e('Upload Product Banner Image (Resolution: 1920x550)'); ?></span>
</td>
</tr>
<tr class="form-field">
<th scope="row" valign="top"><label for="cat_Image_url"><?php _e('Product Category Image URL'); ?></label></th>
<td>
<input id="image-url" name="term_meta[img]" type="text" style="width: 100%;" value="<?php echo $term_meta['img'] ? $term_meta['img'] : ''; ?>" name="image" />
<input id="upload-button" field-id="image-url" type="button" class="upload button" value="Upload Image" /><br />
<span class="description"><?php _e('Upload Product Category Image (Resolution: 370x370)'); ?></span>
</td>
</tr>
<tr class="form-field">
<th scope="row" valign="top"><label for="cat_sort_order"><?php _e('Product Sort Order'); ?></label></th>
<td>
<input id="banner-url" name="term_meta[sort_order]" type="text" style="width: 100%;" value="<?php echo $term_meta['sort_order'] ? $term_meta['sort_order'] : ''; ?>" />
<span class="description"><?php _e(' '); ?></span>
</td>
</tr>
javascript 文件在同一个文件之后是
<script type="text/javascript">
jQuery(document).ready(function($){
var mediaUploader;
window.field_id = '';
$('.upload').click(function(e) {
e.preventDefault();
window.field_id = $(this).attr('field-id');
// If the uploader object has already been created, reopen the dialog
if (mediaUploader) {
mediaUploader.open();
return;
}
// Extend the wp.media object
mediaUploader = wp.media.frames.file_frame = wp.media({
title: 'Choose Image',
button: {
text: 'Choose Image'
}, multiple: false });
// When a file is selected, grab the URL and set it as the text field's value
mediaUploader.on('select', function() {
attachment = mediaUploader.state().get('selection').first().toJSON();
$('#'+window.field_id).val(attachment.url);
});
// Open the uploader dialog
mediaUploader.open();
});
});
</script>
在这个函数之后和挂钩
然后我做了一个函数来使用这个
function save_product_categories_custom_fields($term_id)
{
if (isset($_POST['term_meta'])) {
$t_id = $term_id;
$term_meta = get_option("taxonomy_term_$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];
}
}
//save the option array
update_option("taxonomy_term_$t_id", $term_meta);
}
}
add_action('product_categories_edit_form_fields', 'product_categories_custom_fields', 10, 2);
add_action('edited_product_categories', 'save_product_categories_custom_fields', 10, 2);
add_action('product_categories_add_form_fields', 'product_categories_custom_fields', 10, 2);
add_action('create_product_categories', 'save_product_categories_custom_fields', 10, 2);
创建一个函数来将您的 javascript 个文件加入队列:
function enqueue_scripts() {
wp_enqueue_media();
wp_enqueue_script('admin-script', plugin_dir_url( __FILE__ ) . 'js/admin.js', array( 'jquery' ), false);
}
现在,如果您在主题中,那么 admin.js
脚本的路径应该类似于
get_template_directory_uri() .'/js/admin.js'
第一个代码是如果您正在创建一个插件。 admin.js
文件就是上面写的 javascript 文件。
现在你只需要将这个函数hook到admin_enqueue_scripts
hook
add_action( 'admin_enqueue_scripts', 'enqueue_scripts' );
应该是这样。如果您检查,在您的页面上加载的脚本,admin.js
应该在其中,还有媒体上传脚本。
我添加了一个元字段来上传自定义分类中的图像。上传图片有问题
function product_categories_custom_fields($tag)
{
// Check for existing taxonomy meta for the term you're editing
$t_id = $tag->term_id;
// Get the ID of the term you're editing
$term_meta = get_option("taxonomy_term_$t_id"); // Do the check
?>
<tr class="form-field">
<th scope="row" valign="top"><label for="cat_Image_url"><?php _e('Product Category Banner URL'); ?></label></th>
<td>
<input id="banner-url" name="term_meta[banner]" type="text" style="width: 100%;" value="<?php echo $term_meta['banner'] ? $term_meta['banner'] : ''; ?>" name="image" />
<input id="banner-button" field-id="banner-url" type="button" class="upload button" value="Upload Image" /><br />
<span class="description"><?php _e('Upload Product Banner Image (Resolution: 1920x550)'); ?></span>
</td>
</tr>
<tr class="form-field">
<th scope="row" valign="top"><label for="cat_Image_url"><?php _e('Product Category Image URL'); ?></label></th>
<td>
<input id="image-url" name="term_meta[img]" type="text" style="width: 100%;" value="<?php echo $term_meta['img'] ? $term_meta['img'] : ''; ?>" name="image" />
<input id="upload-button" field-id="image-url" type="button" class="upload button" value="Upload Image" /><br />
<span class="description"><?php _e('Upload Product Category Image (Resolution: 370x370)'); ?></span>
</td>
</tr>
<tr class="form-field">
<th scope="row" valign="top"><label for="cat_sort_order"><?php _e('Product Sort Order'); ?></label></th>
<td>
<input id="banner-url" name="term_meta[sort_order]" type="text" style="width: 100%;" value="<?php echo $term_meta['sort_order'] ? $term_meta['sort_order'] : ''; ?>" />
<span class="description"><?php _e(' '); ?></span>
</td>
</tr>
javascript 文件在同一个文件之后是
<script type="text/javascript">
jQuery(document).ready(function($){
var mediaUploader;
window.field_id = '';
$('.upload').click(function(e) {
e.preventDefault();
window.field_id = $(this).attr('field-id');
// If the uploader object has already been created, reopen the dialog
if (mediaUploader) {
mediaUploader.open();
return;
}
// Extend the wp.media object
mediaUploader = wp.media.frames.file_frame = wp.media({
title: 'Choose Image',
button: {
text: 'Choose Image'
}, multiple: false });
// When a file is selected, grab the URL and set it as the text field's value
mediaUploader.on('select', function() {
attachment = mediaUploader.state().get('selection').first().toJSON();
$('#'+window.field_id).val(attachment.url);
});
// Open the uploader dialog
mediaUploader.open();
});
});
</script>
在这个函数之后和挂钩 然后我做了一个函数来使用这个
function save_product_categories_custom_fields($term_id)
{
if (isset($_POST['term_meta'])) {
$t_id = $term_id;
$term_meta = get_option("taxonomy_term_$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];
}
}
//save the option array
update_option("taxonomy_term_$t_id", $term_meta);
}
}
add_action('product_categories_edit_form_fields', 'product_categories_custom_fields', 10, 2);
add_action('edited_product_categories', 'save_product_categories_custom_fields', 10, 2);
add_action('product_categories_add_form_fields', 'product_categories_custom_fields', 10, 2);
add_action('create_product_categories', 'save_product_categories_custom_fields', 10, 2);
创建一个函数来将您的 javascript 个文件加入队列:
function enqueue_scripts() {
wp_enqueue_media();
wp_enqueue_script('admin-script', plugin_dir_url( __FILE__ ) . 'js/admin.js', array( 'jquery' ), false);
}
现在,如果您在主题中,那么 admin.js
脚本的路径应该类似于
get_template_directory_uri() .'/js/admin.js'
第一个代码是如果您正在创建一个插件。 admin.js
文件就是上面写的 javascript 文件。
现在你只需要将这个函数hook到admin_enqueue_scripts
hook
add_action( 'admin_enqueue_scripts', 'enqueue_scripts' );
应该是这样。如果您检查,在您的页面上加载的脚本,admin.js
应该在其中,还有媒体上传脚本。