Utilizzare il caricamento media in un widget personalizzato su WordPress 3.5
Sto creando un piccolo widget per WordPress 3.5 che permette di caricare immagini.
Il widget viene caricato correttamente da WordPress. Quando aggiungo il widget a una sidebar, il pulsante di upload non funziona. Se aggiorno la pagina mantenendo il widget nella sidebar, il pulsante funziona e posso caricare e salvare l'immagine correttamente.
Per costruire il widget mi sono ispirato a questi link:
https://stackoverflow.com/questions/13863087/wordpress-custom-widget-image-upload
Il codice del mio 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('Testo', 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'); ?>">Immagine</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('Carica', THEMENAME); ?></a>
</p>
<?php
}
}
Codice JavaScript:
jQuery(function($){
$('.custom_media_upload').click(function(e) {
e.preventDefault();
var custom_uploader = wp.media({
title: 'Titolo Personalizzato',
button: {
text: 'Testo Pulsante Personalizzato',
},
multiple: false // Imposta a true per permettere la selezione di più file
})
.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();
});
});
Grazie in anticipo per l'aiuto!

Verifica se questo funziona per te: Inserisci questo codice
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');
});
Invece del link per il caricamento puoi usare un pulsante
<input type="button" value="<?php _e( 'Carica Immagine', 'nome tema' ); ?>" class="button custom_media_upload" id="custom_image_uploader"/>
Aggiornamento:
Solo piccole modifiche nel tuo js e il tuo problema verrà risolto invece di
jQuery(button_class).click(function(e) {
devi usare
jQuery('body').on('click',button_class, function(e) {
poiché il widget viene aggiunto usando ajax. Anche il tuo codice precedente dovrebbe funzionare se apporti modifiche simili nel js.
$('body').on('click','.custom_media_upload',function(e) {

Grazie Dot1 per la tua risposta!
Ho provato a sostituire il codice del widget ma purtroppo ancora non funziona. Funziona solo se ricarico la pagina con il widget attivato.
Non capisco cosa c'è che non va!

Al momento sto sviluppando localmente con xampp. Se vuoi posso creare un file zippato con il widget e tu lo carichi su dropbox

https://dl.dropboxusercontent.com/u/5490925/wpads.zip Ho inserito il widget all'interno del tema richiamandolo dal file functions.php - Grazie!

Ho provato le modifiche che mi hai mostrato ma purtroppo per me ancora non funziona.
Se aggiungo il widget il pulsante non funziona. Se tengo il widget attivo e aggiorno la pagina il pulsante funziona.
Ho cambiato il nome allo script in custom-upload.js

Il WP_Debug è disattivato. Il percorso del file è corretto e viene caricato correttamente nell'area amministrativa. Ho caricato il widget nel tema predefinito di wordpress per testarlo.

Ciao. Scusa se non ho risposto prima, ma ero al lavoro. Sto installando una demo di WordPress su un server che ho a disposizione. Quando installerò WordPress ti invierò il link.

Grazie mille!!! Ora funziona perfettamente! Non so davvero come ringraziarti! Grazie mille per avermi dedicato il tuo tempo!
