Блог

я хочу создать виджет, используемый для загрузки изображения или выбора изображения из мультимедиа, чтобы пользователь мог выбрать изображение или выбрать его, я попробовал это

Страница виджета

 class wd_aboutus extends WP_Widget
{
    /**
     * Constructor
     **/
    public function __construct()
    {
        $widget_ops = array(
            'classname' => 'wd_aboutus',
            'description' => 'Display About us data with image'
        );

        parent::__construct( 'wd_aboutus', 'WD - About Us', $widget_ops );

        add_action('admin_enqueue_scripts', array($this, 'upload_scripts'));
        add_action('admin_enqueue_styles', array($this, 'upload_styles'));
    }

    /**
     * Upload the Javascripts for the media uploader
     */
    public function upload_scripts()
    {
        wp_enqueue_script('media-upload');
        wp_enqueue_script('thickbox');
        wp_enqueue_script('upload_media_widget', get_template_directory_uri() . '/js/upload-media.js');
    }

    /**
     * Add the styles for the upload media box
     */
    public function upload_styles()
    {
        wp_enqueue_style('thickbox');
    }

    /**
     * Outputs the HTML for this widget.
     *
     * @param array  An array of standard parameters for widgets in this theme
     * @param array  An array of settings for this widget instance
     * @return void Echoes it's output
     **/
    public function widget( $args, $instance )
    {
        // Add any html to output the image in the $instance array
    }

    /**
     * Deals with the settings when they are saved by the admin. Here is
     * where any validation should be dealt with.
     *
     * @param array  An array of new settings as submitted by the admin
     * @param array  An array of the previous settings
     * @return array The validated and (if necessary) amended settings
     **/
    public function update( $new_instance, $old_instance ) 
    {

    }

    /**
     * Displays the form for this widget on the Widgets page of the WP Admin area.
     *
     * @param array  An array of the current settings for this widget
     * @return void
     **/
    public function form( $instance )
    {
        $title = __('Widget Image');
        if(isset($instance['title']))
        {
            $title = $instance['title'];
        }

        $image = '';
        if(isset($instance['image']))
        {
            $image = $instance['image'];
        }
    ?>
        <p>
            <label for="<?php echo $this->get_field_name( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
            <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
        </p>

        <p>
            <label for="<?php echo $this->get_field_name( 'image' ); ?>"><?php _e( 'Image:' ); ?></label>
            <input name="<?php echo $this->get_field_name( 'image' ); ?>" id="<?php echo $this->get_field_id( 'image' ); ?>" class="widefat" type="text" size="36"  value="<?php echo esc_url( $image ); ?>" />
            <input class="upload_image_button button button-primary" type="button" value="Upload Image" />
        </p>
    <?php
    }
}
  

это страница виджета, которую я создал, и я создаю файл js, например

загрузка-медиа

 jQuery(document).ready(function($) {
    var image_field;
    jQuery(function($){
      $(document).on('click', 'input.upload_image_button', function(evt){
        image_field = $(this).siblings('.img');
        tb_show('', 'media-upload.php?type=imageamp;amp;TB_iframe=1');
        return false;
      });
      window.send_to_editor = function(html) {
        imgurl = $('img', html).attr('src');
        image_field.val(imgurl);
        tb_remove();
      }
    });
});
  

он работает нормально, он показывал окно для загрузки или выбора изображения, которое использовалось в WordPress, но оно отображается в кнопке страницы, и оно отображается некорректно и не может быть использовано

я не знаю, что случилось, так что кто-нибудь может помочь?

Кстати, если эта информация важна, это моя созданная тема, а не тема WordPress

Ответ Ок, я исправил, изменив свой 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( '.upload_image_button');
});
  

Но я все еще хочу получить выбранное имя изображения и указать его в моем текстовом поле 🙂

Итак, мне нужна ваша помощь

             <input name="<?php echo $this->get_field_name( 'image' ); ?>" id="<?php echo $this->get_field_id( 'image' ); ?>" class="widefat img" type="text" size="36"  value="<?php echo esc_url( $image ); ?>" />
  

Пожалуйста, добавьте «img» в класс ввода…

 image_field = $(this).siblings('.img');
  

https://api.jquery.com/siblings/