Cómo añadir un botón "Subir medios" en un campo de metabox en WordPress

Question

Cómo añadir un botón "Subir medios" en un campo de metabox en WordPress

4 oct 2012, 00:18:41

Vistas: 62.9K

Votos: 21

Tengo un post personalizado que tiene una metaetiqueta que necesita usar una subida de archivos (para archivos de video). Me pregunto, ¿cuál es la forma correcta de añadir un botón "Subir" que apunte al gestor de medios de WordPress y establezca la URL del archivo seleccionado en el campo de texto asociado al botón de subida?

No estoy buscando código para crear la opción de metaetiqueta en sí, sino una forma de añadir correctamente un botón de subida de medios de WordPress.

SpyrosP

515

metabox subidas meta del post media

Comentarios

Consulta el tutorial y el plugin sencillo creado a partir de él que puedes probar aquí. Me ayudó.

Fanky

25 oct 2019 10:07:03

Todas las respuestas a la pregunta

Comentarios

Probé este método y el cuadro de entrada de texto #upload_image nunca se llena

Mr Pablo

7 jul 2016 11:19:08

esta respuesta no funciona. ver otras respuestas.

T.Todua

1 sept 2016 14:19:15

Solo un pequeño recordatorio a través de la página del Codex para admin_print_scripts dice que admin_print_scripts se usa principalmente para mostrar javascript en línea. admin_print_scripts no debe usarse para encolar estilos o scripts en las páginas de administración. Usa admin_enqueue_scripts en su lugar.

Zulian

22 ene 2013 10:47:33

Solución:

1) En tu archivo functions.php, añade el bloque para registrar los scripts necesarios:

// añadir scripts necesarios
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');
}

// Forma correcta de encolar scripts
// wp_register_script(
//   'my-upload',
//   WP_PLUGIN_URL.'/my-script.js',
//   array('jquery','media-upload','thickbox') /* dependencias */
// );
//
// wp_enqueue_script('my-upload');

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

2) Y luego añade el bloque de metabox:

add_action(
  'add_meta_boxes',
  function(){
    add_meta_box(
      'my-metaboxx1', // ID
      'my-metaboxx1-title', // Título
      'func99999', // Callback (Función constructora)
      get_post_types(), // Pantalla (Añade metabox a todos los tipos de post)
      'normal' // Contexto
    );
 },
 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="Subir Imagen" /><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;
    }); // Fin del 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.d. en caso de que necesites múltiples campos, puedes hacerlo fácilmente así: http://pastebin.com/raw/xpU1ch2W

T.Todua

5.85K

1 sept 2016 14:11:09

Comentarios

Funciona perfectamente, pero solo con imágenes. ¿Cómo puedo hacer lo mismo con archivos de video?

Alex

18 jul 2018 14:57:11

bueltge 17.1K · Accepted Answer · 2012-10-04T06:37:33Z

Mira este esqueleto del cargador de medios. También puedes usarlo en tu marcado personalizado, como Meta Box.

Un consejo, verifica que solo uses los scripts en la página donde activas tu Meta Box. De lo contrario, suele ser un problema en las páginas predeterminadas y el cargador.

Ahora un intento de aclarar las partes importantes para incluir el cargador en tu parte personalizada.

Primero incluye un botón en el meta box:

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

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

// es mejor usar get_current_screen(); o la variable 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');
}

La última parte es tu script personalizado para usar el thickbox y el cargador dentro de este.

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

});