分类法中的自定义元字段媒体加载按钮没有工作

时间:2016-03-17 05:14:30

标签: php wordpress custom-taxonomy

我添加了一个元字段来上传自定义分类中的图像。它存在图像无法上传的问题。

    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('&nbsp;'); ?></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);

1 个答案:

答案 0 :(得分:0)

创建一个将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文件。

现在你只需将此函数挂钩到admin_enqueue_scripts hook

add_action( 'admin_enqueue_scripts', 'enqueue_scripts' );

这应该是它。如果您在页面上检查加载的脚本,admin.js应该是其中之一,以及媒体上传脚本。