Crear a imagen Uploader widget

He encontrado este post / / Use Media upload in custom widget on wordpress 3.5 No tengo experiencia en nada de esto tan solo copié el código ofreció en mi propio archivo functions.php. He subido los JS y todo... Volví a colocar cierto código 'sven' Publicada en su respuesta.

El cargador funciona perfectamente pero cuando front-end para ver la imagen no aparece ni siquiera... Aquí está el código dentro de mi functions.php// (incluye las barras laterales registradas y el widget personalizado etc.)
 if (function_exists('register_sidebar')) {
 register_sidebar(array(
  'name' => 'Left Sidebar',
  'id'   => 'left-sidebar',
  'description'   => 'Widget Area',
  'before_widget' => '<div id="one" class="two"><h1>EOTW//</h1>',
  'after_widget'  => '</div>',
  'before_title'  => '<h2>',
  'after_title'   => '</h2>'
 ));
}


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','EOTW', $widget_ops, $control_ops ); } public function widget($args, $instance){ extract( $args ); ?> <a rel="nofollow" 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']; ?>"> <input type="button" value="<?php _e( 'Upload Image', 'themename' ); ?>" class="button custom_media_upload" id="custom_image_uploader"/> </p> <?php } } ?>
Aquí está los JS / /
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');
});
Ahora mi pregunta es, ¿exactamente qué tengo que arreglar en orden para este uploader imagen trabajar? Pensé que ayudarían a las actualizaciones 'sven' proporcionado pero claramente me falta algo. Por favor ayuda..



Solución

Bien, me re había comprobado el código y todo está bien! (Lo siento por mi comentario engañosa!) Durante la prueba me torcí el código un poco, pero usted puede también seguir usando su versión. Pero seamos sinceros en detalle: la barra lateral registrada (con el ID
left-sidebar
) tiene dos argumentos para envolver el widget de todo (
before_widget
y
after_widget
) que puede generar, vía
echo $before_widget
y
echo $after_widget
en el widget (ver mi versión más abajo). Los dos siguientes argumentos (
before_title
y
after_title
) No se definen en el widget, pero he añadido el filtro al campo de texto que puede obtener la idea:
<?php
// register sidebar
if (function_exists('register_sidebar')) {
    register_sidebar(
        array(
        'name' => 'Left Sidebar',
        'id' => 'left-sidebar',
        'description' => 'Widget Area',
        'before_widget' => '<div id="one" class="two">',
        'after_widget' => '</div>',
        )
    );
}

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

// add admin scripts
add_action('admin_enqueue_scripts', 'ctup_wdscript');
function ctup_wdscript() {
    wp_enqueue_media();
    wp_enqueue_script('ads_script', get_template_directory_uri() . 

'/js/widget.js', false, '1.0', true); } // widget class class ctUp_ads extends WP_Widget { function ctUp_ads() { $widget_ops = array('classname' => 'ctUp-ads'); $this->WP_Widget('ctUp-ads-widget', 'EOTW', $widget_ops); } function widget($args, $instance) { extract($args); // widget content echo $before_widget; ?> <h1><?php echo apply_filters('widget_title', $instance['text'] ); ?></h1> <a rel="nofollow" href="#"> <img src="<?php echo esc_url($instance['image_uri']); ?>" /> </a> <?php echo $after_widget; } 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; } function form($instance) { ?> <p> <label for="<?php echo $this->get_field_id('text'); ?>">Text</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 /> <?php if ( $instance['image_uri'] != '' ) : echo '<img class="custom_media_image" src="' . $instance['image_uri'] .

'" style="margin:0;padding:0;max-width:100px;float:left;display:inline-block" /><br />'; endif; ?> <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']; ?>" style="margin-top:5px;"> <input type="button" class="button button-primary custom_media_button" id="custom_media_button" name="<?php echo $this->get_field_name('image_uri'); ?>" value="Upload Image" style="margin-top:5px;" /> </p> <?php } } ?>
Y la secuencia de comandos:
jQuery(document).ready( function($) {
    function media_upload(button_class) {
        var _custom_media = true,
        _orig_send_attachment = wp.media.editor.send.attachment;

        $('body').on('click', button_class, function(e) {
            var button_id ='#'+$(this).attr('id');
            var self = $(button_id);
            var send_attachment_bkp = wp.media.editor.send.attachment;
            var button = $(button_id);
            var id = button.attr('id').replace('_button', '');
            _custom_media = true;
            wp.media.editor.send.attachment = function(props, attachment){
                if ( _custom_media  ) {
                    $('.custom_media_id').val(attachment.id);
                    $('.custom_media_url').val(attachment.url);
                    $('.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_button.button');
});
El widget ahora puede ser parte de cada barra lateral (también conocido como área de widget). A la salida una barra lateral puede utilizar la función dynamic_sidebar() que trabajará por todos lados en su plantilla:
dynamic_sidebar()
Nota: Podría haber un problema si usas este widget en más de una barra lateral! (..

.porque cada widget tendrá el mismo ID que hará que la secuencia de comandos actualizar cada imagen.) Afortunadamente esto no es tan malo como suena porque si presiona el botón seguro sólo el actual será safed a la base de datos :).




Problemas relacionados

Añadir a nuevo uploader de los medios de comunicación en el frontend para wp 3.5 +

Image Uploader API

incluyendo activos de imágenes en widget

Uploader de los medios de comunicación no funciona correctamente

Crear un widget simple

Los medios de comunicación Uploader en ruta personalizada

¿Cómo cambiar el tamaño de la imagen en nuevos medios Uploader (es decir uso medio vs miniatura)

Banner editable de backend

Sube el uploader de los medios de comunicación en haga clic en

Crear una instancia de add_image_size

Tamaño de imagen personalizada no se puede seleccionar en uploader

Anuncios de enlace con imagen

Source: Stack Exchange Inc; License: cc by-sa 3.0 Contacto / Contact