Adicione o botão “carregar mídia” no campo da caixa meta

14

Eu tenho uma postagem personalizada que tem uma meta tag que precisa estar usando um upload de arquivo (para arquivos de vídeo). Eu estou querendo saber, qual é a maneira correta de adicionar um botão "Upload" que aponta para o carregador de mídia do WordPress e define a URL do arquivo carregado enviado para o campo de texto que causou que associa o botão de upload.

Eu não estou procurando código para criar a opção de metatag real, mas para adicionar um botão de upload de mídia Wordpress corretamente.

    
por SpyrosP 04.10.2012 / 02:18

2 respostas

12

Veja este esqueleto do remetente de mídia . Você também pode usá-lo em sua marcação personalizada, como Meta Box.

Uma dica, verifique se você usa apenas os scripts da página, onde você ativa sua Meta Box. Caso contrário, geralmente é um problema nas páginas padrão e no aplicativo de upload.

Agora, tente limpar as partes importantes para incluir o remetente na sua parte personalizada.

Primeiro, inclua um botão na caixa meta:

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

Agora enfileire os scripts:

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');
}

A última parte é seu script personalizado para usar o thickbox e o uploader dentro dele.

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;
    });

});
    
por bueltge 04.10.2012 / 08:37
0

Solução:

1) no seu functions.php , adicione o bloco para registrar os scripts necessários:

// 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) e, em seguida, adicione o bloco 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. no caso de você precisar de vários campos, então você pode facilmente fazer assim: enlace

    
por T.Todua 01.09.2016 / 16:11