创建图像上传小部件

Question

我正在使用wordpress 4.7.2

我正在尝试创建一个只会帮助用户上传图片的简单小部件。

在我的代码下面，当我选择一个图像时，它为我提供了插入帖子的选项，但我希望它不与任何帖子相关联，只是想要它的url和id以便我可以用它来显示。 / p>

我尝试关注use media upload in custom widget和create image uploader widget以及wordpress custom widget image uplaaod，但无法解决问题。

<?php
namespace MyTheme\Widgets;

use \MyTheme\Widgets as Widgets;

class Image extends \WP_Widget {

    public function __construct( $id_base = false, $name = false, $widget_options = array(), $control_options = array() ) {

        $id_base = ( $id_base ) ? $id_base : 'mytheme-widget-image';
        $name = ( $name ) ? $name : __( 'Image', 'mytheme-widget-image-i18n' );

        $widget_options = wp_parse_args( $widget_options, array(
            'classname'   => 'widget_image',
            'description' => __( 'An image from the media library', 'mytheme-widget-image-i18n' )
        ) );

        $control_options = wp_parse_args( $control_options, array( 'width' => 300 ) );

        parent::__construct( $id_base, $name, $widget_options, $control_options );

        add_action('image_widget_print_footer_scripts', array(__CLASS__, 'print_footer_js') );

    }

    public function widget( $args, $instance ) {

        $content = $this->render( $args, $wp_widget );
    }

    public function render( $args, $instance ){
        //generate content
        return $content;
    }

    public function form($instance){

        $widget_img_id = isset($instance['widget_img_id']) ? $instance['widget_img_id'] : '';

        $image_src = isset($instance['widget-img-id']) ? $instance['widget-img-id'] : '';

        $upload_link = esc_url( get_upload_iframe_src( 'image', $widget_img_id ) );

        $is_image = ! empty($image_src);

        ?>
        <div class="widget-img-wrapper">
            <div class="widget-img-container">
                <?php if ( $is_image  ): ?>
                    <img src="<?php echo $image_src; ?>" alt="" style="max-width:100%" />
                <?php endif; ?>
                <p class="hide-if-no-js">
                    <a name="upload_img_src" href="<?php echo $upload_link; ?>" class="upload-widget-img <?php if ( $is_image ){ echo 'hidden'; } ?>">
                         <?php _e('Set custom image') ?>
                    </a>
                    <a class="delete-widget-img <?php if ( ! $is_image  ) { echo 'hidden'; } ?>" 
          href="#">
                        <?php _e('Remove this image') ?>
                    </a>

                    <input class="widget-img-id" name="widget_img_id" type="hidden" value="<?php echo esc_attr( $image_id ); ?>" />
                </p>
            </div>
        </div>
        <?php
    }

    public function update( $new_instance, $old_instance ){

        $instance = array();
        $instance['widget_img_id'] = ( ! empty( $new_instance['widget_img_id'] ) ) ? strip_tags( $new_instance['widget_img_id'] ) : '';

        $instance['upload_img_src'] = ( ! empty( $new_instance['upload_img_src'] ) ) ? strip_tags( $new_instance['upload_img_src'] ) : '';

        return $instance;
    }

    public static function print_footer_js()
    {
        wp_enqueue_media();
        ?>
        <script>
        jQuery(function($){

            // Set all variables to be used in scope
            var frame,
                imageContainer = $('.widget-img-wrapper'), // Your meta box id here
                addImgLink = imageContainer.find('.upload-widget-img'),
                delImgLink = imageContainer.find( '.delete-widget-img'),
                imgContainer = imageContainer.find( '.widget-img-container'),
                imgIdInput = imageContainer.find( '.widget-img-id' );

                // ADD IMAGE LINK
                addImgLink.on( 'click', function( event ){

                    event.preventDefault();

                    // If the media frame already exists, reopen it.
                    if ( frame ) {
                        frame.open();
                        return;
                    }

                    // Create a new media frame
                    frame = wp.media({
                        title: 'Select or Upload Media Of Your Chosen Persuasion',
                        button: {
                            text: 'Use this media'
                        },
                        library: {
                            type: 'image'
                        }
                        multiple: false  // Set to true to allow multiple files to be selected
                    });


                    // When an image is selected in the media frame...
                    frame.on( 'select', function() {

                        // Get media attachment details from the frame state
                        var attachment = frame.state().get('selection').first().toJSON();

                        // Send the attachment URL to our custom image input field.
                        imgContainer.append( '<img src="'+attachment.url+'" alt="" style="max-width:100%;"/>' );

                        // Send the attachment id to our hidden input
                        imgIdInput.val( attachment.id );

                        // Hide the add image link
                        addImgLink.addClass( 'hidden' );

                        // Unhide the remove image link
                        delImgLink.removeClass( 'hidden' );
                    });

                    // Finally, open the modal on click
                    frame.open();
                });

                // DELETE IMAGE LINK
                delImgLink.on( 'click', function( event ){

                    event.preventDefault();

                    // Clear out the preview image
                    imgContainer.html( '' );

                    // Un-hide the add image link
                    addImgLink.removeClass( 'hidden' );

                    // Hide the delete image link
                    delImgLink.addClass( 'hidden' );

                    // Delete the image id from the hidden input
                    imgIdInput.val( '' );

                });

            });
        </script>
        <?php
    }
}

Answer 1

我相信，taht＆＃34;插入帖子＆＃34;只是默认文本，并且它与帖子没有任何关系 - 文件无论如何都会在媒体库和上传文件夹中结束 -

function replace_window_text($translated_text, $text) {
    if ('Insert into Post' == $text) {
        $referer = strpos(wp_get_referer(), 'media_page');
        if ($referer != '') {
            return __('Upload Billede', 'ink');
        }
    }
return $translated_text;
}

这来自我的一个旧项目，我在其中创建了一个用于媒体上传的插件。可能不适合你的问题，但它可能会让你走上正确的道路

Answer 2

这个问题是  add_action('image_widget_print_footer_scripts', array(__CLASS__, 'print_footer_js') );无法将脚本排入队列，wp_footer，admin_footer或admin_enqueue_scripts都无法呈现脚本，需要在课堂外排队。这解决了我的问题。 请勿使用此javascript，因为js中使用的实例存在问题。

<?php
namespace MyTheme\Widgets;

use \MyTheme\Widgets as Widgets;

class Image extends \WP_Widget {

    public function __construct( $id_base = false, $name = false, $widget_options = array(), $control_options = array() ) {

        $id_base = ( $id_base ) ? $id_base : 'mytheme-widget-image';
        $name = ( $name ) ? $name : __( 'Image', 'mytheme-widget-image-i18n' );

        $widget_options = wp_parse_args( $widget_options, array(
            'classname'   => 'widget_image',
            'description' => __( 'An image from the media library', 'mytheme-widget-image-i18n' )
        ) );

        $control_options = wp_parse_args( $control_options, array( 'width' => 300 ) );

        parent::__construct( $id_base, $name, $widget_options, $control_options );

        add_action('image_widget_print_footer_scripts', array(__CLASS__, 'print_footer_js') );

    }

    public function widget( $args, $instance ) {

        $content = $this->render( $args, $wp_widget );
    }

    public function render( $args, $instance ){
        //generate content
        return $content;
    }

    public function form($instance){

        $widget_img_id = isset($instance['widget_img_id']) ? $instance['widget_img_id'] : '';

        $image_src = isset($instance['widget-img-id']) ? $instance['widget-img-id'] : '';

        $upload_link = esc_url( get_upload_iframe_src( 'image', $widget_img_id ) );

        $is_image = ! empty($image_src);

        ?>
        <div class="widget-img-wrapper">
            <div class="widget-img-container">
                <?php if ( $is_image  ): ?>
                    <img src="<?php echo $image_src; ?>" alt="" style="max-width:100%" />
                <?php endif; ?>
                <p class="hide-if-no-js">
                    <a name="upload_img_src" href="<?php echo $upload_link; ?>" class="upload-widget-img <?php if ( $is_image ){ echo 'hidden'; } ?>">
                         <?php _e('Set custom image') ?>
                    </a>
                    <a class="delete-widget-img <?php if ( ! $is_image  ) { echo 'hidden'; } ?>" 
          href="#">
                        <?php _e('Remove this image') ?>
                    </a>

                    <input class="widget-img-id" name="widget_img_id" type="hidden" value="<?php echo esc_attr( $image_id ); ?>" />
                </p>
            </div>
        </div>
        <?php
    }

    public function update( $new_instance, $old_instance ){

        $instance = array();
        $instance['widget_img_id'] = ( ! empty( $new_instance['widget_img_id'] ) ) ? strip_tags( $new_instance['widget_img_id'] ) : '';

        $instance['upload_img_src'] = ( ! empty( $new_instance['upload_img_src'] ) ) ? strip_tags( $new_instance['upload_img_src'] ) : '';

        return $instance;
    }
}

和JS

add_action( 'admin_enqueue_scripts', function(){
   wp_enqueue_media('jquery');
} );

add_action('admin_footer', function(){

   ?>
   <script>
   jQuery(function($){

      // Set all variables to be used in scope
      var frame,
      imageContainer = $('.widget-img-wrapper'), // Your meta box id here
      addImgLink = imageContainer.find('.upload-widget-img'),
      delImgLink = imageContainer.find( '.delete-widget-img'),
      imgContainer = imageContainer.find( '.widget-img-container'),
      imgIdInput = imageContainer.find( '.widget-img-id' );

      // ADD IMAGE LINK
      addImgLink.on( 'click', function( event ){

      event.preventDefault();

      // If the media frame already exists, reopen it.
      if ( frame ) {
          frame.open();
          return;
       }

       // Create a new media frame
       frame = wp.media({
           title: 'Select or Upload Media Of Your Chosen Persuasion',
           button: {
                  text: 'Use this media'
           },
           multiple: false  // Set to true to allow multiple files to be selected
        });


        // When an image is selected in the media frame...
        frame.on( 'select', function() {

            // Get media attachment details from the frame state
            var attachment = frame.state().get('selection').first().toJSON();

           // Send the attachment URL to our custom image input field.
           imgContainer.append( '<img src="'+attachment.url+'" alt="" style="max-width:100%;"/>' );

           // Send the attachment id to our hidden input
           imgIdInput.val( attachment.id );

           // Hide the add image link
           addImgLink.addClass( 'hidden' );

           // Unhide the remove image link
           delImgLink.removeClass( 'hidden' );
        });

        // Finally, open the modal on click
        frame.open();
     });

    // DELETE IMAGE LINK
    delImgLink.on( 'click', function( event ){

    event.preventDefault();

    // Clear out the preview image
    imgContainer.html( '' );

    // Un-hide the add image link
    addImgLink.removeClass( 'hidden' );

    // Hide the delete image link
    delImgLink.addClass( 'hidden' );

    // Delete the image id from the hidden input
    imgIdInput.val( '' );

    });
});
</script>
  <?php
}