Usar carga de medios en un widget personalizado en wordpress 3.5

4

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

El widget se carga correctamente con wordpress. Cuando agrego el widget a un botón de carga de la barra lateral no funciona. Si actualizo la página de mantener 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:

enlace

enlace

Mi código de 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('Text', 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'); ?>">Image</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('Upload', THEMENAME); ?></a>
    </p>
    <?php
  }


}

Código Js:

jQuery(function($){
    $('.custom_media_upload').click(function(e) {
        e.preventDefault();
        var custom_uploader = wp.media({
            title: 'Custom Title',
            button: {
                text: 'Custom Button Text',
            },
            multiple: false  // Set this to true to allow multiple files to be selected
        })
        .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!

    
pregunta Danilo 05.05.2013 - 22:11

1 respuesta

2

Compruebe si esto funciona para usted: introduzca este código

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( 'Upload Image', 'theme name' ); ?>" class="button custom_media_upload" id="custom_image_uploader"/>

Actualizar:

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) {

a medida que el widget se agrega usando ajax. Incluso su código anterior debería funcionar si realiza cambios similares en js.

  $('body').on('click','.custom_media_upload',function(e) {
    
respondido por el sven 06.05.2013 - 11:41

Lea otras preguntas en las etiquetas