wake-up-neo.com

Verwenden Sie das Hochladen von Medien in benutzerdefinierten Widgets unter WordPress 3.5

Ich erstelle ein kleines Widget für WordPress 3.5, mit dem Sie Bilder hochladen können.

Das Widget wird von WordPress korrekt geladen. Wenn ich das Widget zu einer Seitenleiste hinzufüge, funktioniert der Upload-Button nicht. Wenn ich die Seite aktualisiere, auf der mein Widget in der Seitenleiste angezeigt wird, funktioniert die Schaltfläche und ich kann das Bild korrekt laden und speichern.

Um das Widget zu erstellen, haben mich diese Links inspiriert:

https://stackoverflow.com/questions/13863087/wordpress-custom-widget-image-upload

https://stackoverflow.com/questions/13847714/wordpress-3-5-custom-media-upload-for-your-theme-options/13901303#13901303

Mein Widget Code:

<?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
  }


}

Js code:

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

Vielen Dank im Voraus für Hilfe!

imageswidgetsuploads
4
Danilo

Überprüfen Sie, ob dies für Sie funktioniert: Geben Sie diesen Code ein

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

Anstelle eines Links zum Hochladen können Sie auch eine Schaltfläche verwenden

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

Update:

Nur geringfügige Änderungen an Ihrem js und Ihrem Problem werden stattdessen behoben

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

du musst benutzen

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

wie das Widget mit Ajax hinzugefügt wird. Sogar Ihr vorheriger Code sollte funktionieren, wenn Sie ähnliche Änderungen in js vornehmen.

  $('body').on('click','.custom_media_upload',function(e) {
2
sven