創建圖片上傳部件

我正在嘗試創建一個只能幫助用戶上傳圖片的簡單小部件。

在我的代碼下面，當我選擇一個圖像時，它給了我選擇插入到後期，但我希望它不會被關聯到任何帖子，只需要它的url和id，以便我可以使用它來顯示。

我試圖按照use media upload in custom widget和create image uploader widget和但無法解決它。

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

來源

2017-02-22 Prafulla Kumar Sahu

這個問題是 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 
}

來源

2017-02-22 14:28:48

我相信，taht「插入後」只是默認的文本，而且它並沒有真正有什麼關係後 - 文件在媒體庫中，並在上傳文件夾結束無論如何 -

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

這是我的一箇舊項目，我創建了一個媒體上傳插件。可能不適合你的問題，但它也許可以讓你在正確的道路上

來源

2017-02-22 13:00:00 Stender

我認爲它作爲一個正常的提交按鈕，但它重定向我到含有POST_ID = 0，這是空白的URL。 –

創建圖片上傳部件

回答

相關問題