Cómo usar la carga de medios en un widget personalizado en WordPress 3.5
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
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!
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) {

¡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!

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

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

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

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.

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.

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