Agregue el botón "cargar medios" en el campo de cuadro de meta


17

Tengo una publicación personalizada que tiene una metaetiqueta que necesita usar una carga de archivos (para archivos de video). Me pregunto cuál es la forma correcta de agregar un botón "Cargar" que apunta al cargador de medios de WordPress y establece la URL del archivo cargado seleccionado en el campo de texto que causó que asocie el botón de carga.

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


Consulte el tutorial y el complemento simple que puede probar aquí . Me ayudó.
Fanky

Respuestas:


13

Vea este esqueleto de cargador de medios . También puede usarlo en su marcado personalizado, como Meta Box.

Una pista, compruebe, que solo usa 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 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 guiones:

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 el cuadro grueso 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;
    });

});

2
Solo un pequeño recordatorio a través de la página del Codex admin_print_scriptsdice que admin_print_scriptsse usa principalmente para hacer eco de JavaScript en línea. admin_print_scriptsno debe usarse para poner en cola estilos o scripts en las páginas de administración. Usar en su admin_enqueue_scriptslugar.
Zulian

Probé este método y el cuadro de entrada de texto #upload_imagenunca se rellena
Mr Pablo

1
Esta respuesta no funciona. ver otras respuestas
T.Todua

0

Solución:

1) en your 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']);
  }
});





ps en caso de que necesite múltiples campos, entonces puede hacer fácilmente esto: http://pastebin.com/raw/xpU1ch2W


Funciona como un encanto, pero solo con imágenes. ¿Cómo puedo hacer lo mismo con los archivos de video?
Alex
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.