Agregue el botón "subir contenido multimedia" en el campo de meta box

14

Tengo una publicación personalizada que tiene una etiqueta meta que necesita estar usando una carga de archivo (para archivos de video). Me pregunto cuál es la forma correcta de agregar un botón "Cargar" que apunte al cargador de medios de WordPress y establezca la URL del archivo cargado seleccionado en el campo de texto que hizo que se asocie el botón de carga.

No estoy buscando un código para crear la opción de etiqueta meta real, sino una forma de agregar un botón de carga de Wordpress correctamente.

    
pregunta SpyrosP 04.10.2012 - 02:18

2 respuestas

12

Vea este esqueleto del cargador de medios . También puedes usarlo en tu marca personalizada, como Meta Box.

Una sugerencia, verifique, que solo use los scripts en la página, donde activa su Meta Box. De lo contrario, a menudo es un problema en las páginas predeterminadas y en el cargador.

Ahora, intente borrar las partes importantes para incluir el cargador en su parte personalizada.

Primero incluya un botón en el cuadro de meta:

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

Ahora ponga en cola 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');
}

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

La última parte es su secuencia de comandos personalizada para usar la Thickbox y el cargador dentro de esta.

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

});
    
respondido por el bueltge 04.10.2012 - 08:37
0

Solución:

1) en su functions.php , agregue el bloque para registrar los scripts necesarios:

// 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) y luego agregue el bloque 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. en caso de que necesite varios campos, entonces puede hacer fácilmente lo siguiente: enlace

    
respondido por el T.Todua 01.09.2016 - 16:11

Lea otras preguntas en las etiquetas