Use o upload de mídia no widget personalizado no wordpress 3.5

4

Estou criando um pequeno widget para o wordpress 3.5 que permite fazer upload de imagens.

O widget é carregado corretamente pelo wordpress. Quando eu adiciono o widget a um botão de upload da barra lateral não funciona. Se eu atualizar a página de manter meu widget na barra lateral, o botão funcionará e eu posso carregar e salvar a imagem corretamente.

Para criar o widget, fui inspirado por esses links:

enlace

enlace

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

Agradecemos antecipadamente pela ajuda!

    
por Danilo 05.05.2013 / 22:11

1 resposta

2

Verifique se isso funciona para você: coloque este código em

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

Em vez de link para enviar, você pode usar um botão

  <input type="button" value="<?php _e( 'Upload Image', 'theme name' ); ?>" class="button custom_media_upload" id="custom_image_uploader"/>

Atualização:

Apenas pequenas alterações no seu js e no seu problema serão resolvidas em vez de

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

você tem que usar

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

como o widget é adicionado usando ajax. Mesmo o seu código anterior deve funcionar se você fizer as alterações semelhantes em js.

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