在WordPress 3.5上使用自定义小工具中的媒体上载

我正在为wordpress 3.5创建一个小部件，允许您上传图像。

wordpress已正确加载小部件。当我将小部件添加到侧栏上载按钮时，该按钮不起作用。如果我更新了将我的小部件保留在侧栏中的页面，按钮就会起作用，我可以正确加载和保存图像。

为了构建这个小部件，我受到了以下链接的启发：

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

我的小部件代码：

<?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代码：

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

提前感谢您的帮助！

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

小码农CODE

相关推荐

Hover images and Videos