Cómo usar la carga de medios en un widget personalizado en WordPress 3.5

5 may 2013, 23:11:55
Vistas: 15.6K
Votos: 4

Estoy creando un pequeño widget para WordPress 3.5 que permite subir imágenes.

El widget se carga correctamente en WordPress. Cuando añado el widget a una barra lateral, el botón de carga no funciona. Si actualizo la página manteniendo mi widget en la barra lateral, el botón funciona y puedo cargar y guardar la imagen correctamente.

Para construir el widget me inspiré en estos enlaces:

https://stackoverflow.com/questions/13863087/wordpress-custom-widget-image-upload

https://stackoverflow.com/questions/13847714/wordpress-3-5-custom-media-upload-for-your-theme-options/13901303#13901303

Mi código del widget:

<?php

add_action('widgets_init', 'ctUp_ads_widget');
function ctUp_ads_widget() {
    register_widget( 'ctUp_ads' );
}

function ctUp_wdScript(){
  wp_enqueue_media();
  wp_enqueue_script('adsScript', get_template_directory_uri() . '/js/ads.js');
}
add_action('admin_enqueue_scripts', 'ctUp_wdScript');

class ctUp_ads extends WP_Widget{

    function ctUp_ads() {
        $widget_ops = array( 'classname' => 'ctUp-ads' );
        $control_ops = array( 'width' => 250, 'height' => 350, 'id_base' => 'ctUp-ads-widget' );
        $this->WP_Widget( 'ctUp-ads-widget',THEMENAME .' - Ads', $widget_ops, $control_ops );
    }

    public function widget($args, $instance){ 
        extract( $args );   
    ?>
    <a href="#"><img src="<?php echo esc_url($instance['image_uri']); ?>" /></a>
    <?php }

    function update($new_instance, $old_instance) {
        $instance = $old_instance;
        $instance['text'] = strip_tags( $new_instance['text'] );
        $instance['image_uri'] = strip_tags( $new_instance['image_uri'] );
        return $instance;
    }

  public function form($instance){ ?>
    <p>
      <label for="<?php echo $this->get_field_id('text'); ?>"><?php _e('Texto', THEMENAME); ?></label><br />
      <input type="text" name="<?php echo $this->get_field_name('text'); ?>" id="<?php echo $this->get_field_id('text'); ?>" value="<?php echo $instance['text']; ?>" class="widefat" />
    </p>
    <p>
      <label for="<?php echo $this->get_field_id('image_uri'); ?>">Imagen</label><br />
        <img class="custom_media_image" src="<?php if(!empty($instance['image_uri'])){echo $instance['image_uri'];} ?>" style="margin:0;padding:0;max-width:100px;float:left;display:inline-block" />
        <input type="text" class="widefat custom_media_url" name="<?php echo $this->get_field_name('image_uri'); ?>" id="<?php echo $this->get_field_id('image_uri'); ?>" value="<?php echo $instance['image_uri']; ?>">
        <a href="#" class="button custom_media_upload"><?php _e('Subir', THEMENAME); ?></a>
    </p>
    <?php
  }


}

Código JavaScript:

jQuery(function($){
    $('.custom_media_upload').click(function(e) {
        e.preventDefault();
        var custom_uploader = wp.media({
            title: 'Título Personalizado',
            button: {
                text: 'Texto del Botón Personalizado',
            },
            multiple: false  // Cambiar a true para permitir selección múltiple de archivos
        })
        .on('select', function() {
            var attachment = custom_uploader.state().get('selection').first().toJSON();
            $('.custom_media_image').attr('src', attachment.url);
            $('.custom_media_url').val(attachment.url);
            $('.custom_media_id').val(attachment.id);
        })
        .open();
    });
});

¡Gracias de antemano por la ayuda!

0
Todas las respuestas a la pregunta 1
10

Comprueba si esto te funciona: Coloca este código en

jQuery(document).ready( function(){
 function media_upload( button_class) {
    var _custom_media = true,
    _orig_send_attachment = wp.media.editor.send.attachment;
    jQuery('body').on('click',button_class, function(e) {
        var button_id ='#'+jQuery(this).attr('id');
        /* console.log(button_id); */
        var self = jQuery(button_id);
        var send_attachment_bkp = wp.media.editor.send.attachment;
        var button = jQuery(button_id);
        var id = button.attr('id').replace('_button', '');
        _custom_media = true;
        wp.media.editor.send.attachment = function(props, attachment){
            if ( _custom_media  ) {
               jQuery('.custom_media_id').val(attachment.id); 
               jQuery('.custom_media_url').val(attachment.url);
               jQuery('.custom_media_image').attr('src',attachment.url).css('display','block');   
            } else {
                return _orig_send_attachment.apply( button_id, [props, attachment] );
            }
        }
        wp.media.editor.open(button);
        return false;
    });
}
media_upload( '.custom_media_upload');
});

En lugar de un enlace para subir, puedes usar un botón

  <input type="button" value="<?php _e( 'Subir Imagen', 'nombre del tema' ); ?>" class="button custom_media_upload" id="custom_image_uploader"/>

Actualización:

Solo pequeños cambios en tu js y tu problema se resolverá en lugar de

jQuery(button_class).click(function(e) {

tienes que usar

jQuery('body').on('click',button_class, function(e) {

ya que el widget se añade usando ajax. Incluso tu código anterior debería funcionar si haces cambios similares en el js.

  $('body').on('click','.custom_media_upload',function(e) {
6 may 2013 12:41:59
Comentarios

¡Gracias Dot1 por tu respuesta!

Intenté reemplazar el código del widget pero desafortunadamente aún no funciona. Esto solo funciona si se recarga la página con el widget activado.

¡No entiendo qué está mal!

Danilo Danilo
6 may 2013 18:49:22

Actualmente estoy desarrollando localmente con xampp. Si quieres puedo crear un archivo comprimido con el widget y lo cargas en dropbox

Danilo Danilo
6 may 2013 19:13:18

Sí, eso servirá, solo la parte del plugin y no todo WordPress.

Kumar Kumar
6 may 2013 19:15:40

https://dl.dropboxusercontent.com/u/5490925/wpads.zip Coloqué el widget dentro del tema llamándolo desde el archivo functions.php - ¡Gracias!

Danilo Danilo
6 may 2013 19:29:01

Intenté los cambios que me has mostrado pero desafortunadamente todavía no funciona para mí.

Si agrego el widget el botón no funciona. Si mantengo el widget activo y actualizo la página el botón funciona.

Cambié el nombre al script en custom-upload.js

Danilo Danilo
6 may 2013 22:29:21

El WP_Debug está desactivado. La ruta del archivo es correcta y se carga correctamente en el área administrativa. Subí el widget al tema predeterminado de WordPress para probarlo.

Danilo Danilo
7 may 2013 11:28:27

Hola. Disculpa si no he respondido antes, pero estaba en el trabajo. Estoy instalando una demo de WordPress en un servidor que tengo disponible. Cuando instale WordPress te envío el enlace.

Danilo Danilo
7 may 2013 20:35:02

Ok. Contraseña cambiada y correo enviado

Danilo Danilo
7 may 2013 21:18:29

¡¡¡Muchas gracias!!! ¡Ahora funciona perfectamente! ¡Realmente no sé cómo agradecerte! ¡Muchas gracias por darme tu tiempo!

Danilo Danilo
7 may 2013 22:16:58

Feliz de ayudar :)

Kumar Kumar
7 may 2013 22:18:15
Mostrar los 5 comentarios restantes