在元框字段中添加“上传媒体”按钮

时间：2012-10-04 作者：SpyrosP

我有一个自定义帖子，其中有一个元标记，需要使用文件上传（视频文件）。我想知道，添加“上传”按钮的正确方法是什么，该按钮指向WordPress媒体上传程序，并将所选上传文件的url设置为导致上传按钮关联的文本字段。

我不是在寻找创建实际元标记选项的代码，而是寻找一种方法来正确地添加Wordpress媒体上传按钮。

2 个回复

最合适的回答,由SO网友:bueltge 整理而成

看到这个了吗media uploader skeleton. 您还可以在自定义标记中使用它，如元框。

提示，检查，您只使用页面上的脚本，在那里您激活了元框。否则，在默认页面和上载程序上通常会出现问题。

现在，尝试清除重要部分以将上载程序包括到自定义部分。

首先在元框中包含一个按钮：

<input id="upload_image" type="text" size="36" name="upload_image" value="" />
<input id="upload_image_button" type="button" value="Upload Image" />

现在将脚本排队：

function my_admin_scripts() {    
    wp_enqueue_script(\'media-upload\');
    wp_enqueue_script(\'thickbox\');
    wp_register_script(\'my-upload\', WP_PLUGIN_URL.\'/my-script.js\', array(\'jquery\',\'media-upload\',\'thickbox\'));
    wp_enqueue_script(\'my-upload\');
}

function my_admin_styles() {

    wp_enqueue_style(\'thickbox\');
}

// better use get_current_screen(); or the global $current_screen
if (isset($_GET[\'page\']) && $_GET[\'page\'] == \'my_plugin_page\') {

    add_action(\'admin_print_scripts\', \'my_admin_scripts\');
    add_action(\'admin_print_styles\', \'my_admin_styles\');
}

最后一部分是使用thickbox和上载程序的自定义脚本。

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

    $(\'#upload_image_button\').click(function() {

        formfield = $(\'#upload_image\').attr(\'name\');
        tb_show( \'\', \'media-upload.php?type=image&amp;TB_iframe=true\' );
        window.send_to_editor = function(html) {
           imgurl = $(html).attr(\'src\');
           $(\'#upload_image\').val(imgurl);
           tb_remove();
        }

        return false;
    });

});

SO网友:T.Todua

解决方案：

1）在functions.php, 添加用于注册必要脚本的块：

// add necessary scripts
add_action(\'plugins_loaded\', function(){
  if($GLOBALS[\'pagenow\']==\'post.php\'){
    add_action(\'admin_print_scripts\', \'my_admin_scripts\');
    add_action(\'admin_print_styles\',  \'my_admin_styles\');
  }
});

function my_admin_scripts(){
  wp_enqueue_script(\'jquery\');
  wp_enqueue_script(\'media-upload\');
  wp_enqueue_script(\'thickbox\');
}

// Proper way to enqueue
// wp_register_script(
//   \'my-upload\',
//   WP_PLUGIN_URL.\'/my-script.js\',
//   array(\'jquery\',\'media-upload\',\'thickbox\') /* dependencies */
// );
//
// wp_enqueue_script(\'my-upload\');

function my_admin_styles(){
  wp_enqueue_style(\'thickbox\');
}

2）然后添加metabox块：

add_action(
  \'add_meta_boxes\',
  function(){
    add_meta_box(
      \'my-metaboxx1\', // ID
      \'my-metaboxx1-title\', // Title
      \'func99999\', // Callback (Construct function)
      get_post_types(), //screen (This adds metabox to all post types)
      \'normal\' // Context
    );
 },
 9
);
function func99999($post){
  $url = get_post_meta($post->ID, \'my-image-for-post\', true); ?>
  <input id="my_image_URL" name="my_image_URL" type="text"
         value="<?php echo $url;?>" style="width:400px;" />
  <input id="my_upl_button" type="button" value="Upload Image" /><br/>
  <img src="<?php echo $url;?>" style="width:200px;" id="picsrc" />
  <script>
  jQuery(document).ready( function($) {
    jQuery(\'#my_upl_button\').click(function() {
      window.send_to_editor = function(html) {
        imgurl = jQuery(html).attr(\'src\')
        jQuery(\'#my_image_URL\').val(imgurl);
        jQuery(\'#picsrc\').attr("src", imgurl);
        tb_remove();
      }

      formfield = jQuery(\'#my_image_URL\').attr(\'name\');
      tb_show(\'\', \'media-upload.php?type=image&amp;TB_iframe=true\' );
      return false;
    }); // End on click
  });
  </script>
<?php
}

add_action(\'save_post\', function ($post_id) {
  if (isset($_POST[\'my_image_URL\'])){
    update_post_meta($post_id, \'my-image-for-post\', $_POST[\'my_image_URL\']);
  }
});

p.s.如果您需要多个字段，那么您可以轻松地执行以下操作：http://pastebin.com/raw/xpU1ch2W

结束

小码农CODE

在元框字段中添加“上传媒体”按钮

解决方案：

相关推荐

重写了URL的MEDIA_SIDELOAD_IMAGE？