WordPress的自定義小部件圖片上傳

Question

我忙於構建我自己的WordPress的小部件。一切工作正常，除了WordPress的媒體上裝載機。 我已經創建了八個按鈕和八個輸入文本字段，其中應包含已上傳圖片的網址。

click事件沒有被解僱，可能是因爲WordPress的兩倍輸出HTML（一旦可用的小部件的酒吧，一次在酒吧當前活動窗口小部件）。

有誰看到我在做什麼錯？

下面你找到我的代碼。

在此先感謝您的幫助！

<?php 
/* 
Plugin Name: Home_Rollover_Widget 
Plugin URI: 
Description: Home Rollover Widget 
Version: 1.0 
Author: 
Author URI: 
*/ 

// Initialize widget 
add_action('widgets_init', array('Home_Rollover_Widget', 'register')); 

/** 
* Home_Rollover_Widget 
* 
* @package 
* @author 
* @copyright 2012 
* @version $Id$ 
* @access public 
*/ 
class Home_Rollover_Widget extends WP_Widget 
{ 
    /** 
    * __construct() 
    * 
    * @return void 
    */ 
    public function __construct() 
    { 
     parent::__construct('home-rollover-widget'); 
    } 
    /** 
    * control() 
    * 
    * @return void 
    */ 
    public function control() 
    {  
     // Load upload an thickbox script 
     wp_enqueue_script('media-upload'); 
     wp_enqueue_script('thickbox'); 

     // Load thickbox CSS 
     wp_enqueue_style('thickbox'); 

     // Load all widget options 
     $data = get_option('Home_Rollover_Widget'); 
     ?> 

     <!-- Widget title --> 
     <p><label>Titel<input name="home_rollover_widget_title" type="text" value="<?php echo $data['home_rollover_widget_title']; ?>" /></label></p> 

     <?php 
     // If there's a title provided, update it. 
     if (isset($_POST['home_rollover_widget_title'])){ 
      $data['home_rollover_widget_title'] = attribute_escape($_POST['home_rollover_widget_title']); 
     } 

     // Show 8 input groups for image URL and text 
     for ($i = 1; $i <= 8; ++$i) 
     { 
      ?> 

      <p><a href="#" id="upload-button-<?php echo $i; ?>">UPLOAD IMAGE</a></p> 
      <p><label>IMAGE <?php echo $i; ?><input id="home_rollover_widget_image_url_<?php echo $i; ?>" name="home_rollover_widget_image_url_<?php echo $i; ?>" type="text" value="<?php echo $data['home_rollover_widget_image_url_'.$i]; ?>" /></label></p> 
      <p><label>TEXT <?php echo $i; ?><input name="home_rollover_widget_text_<?php echo $i; ?>" type="text" value="<?php echo $data['home_rollover_widget_text_'.$i]; ?>" /></label></p> 
      <?php 
      // If there's an URL provided, update it. 
      if (isset($_POST['home_rollover_widget_image_url_'.$i])){ 
       $data['home_rollover_widget_image_url_1'] = attribute_escape($_POST['home_rollover_widget_image_url_'.$i]); 
      } 

      // if there's a text provided, update it. 
      if (isset($_POST['home_rollover_widget_text_'.$i])) { 
       $data['home_rollover_widget_text_1'] = attribute_escape($_POST['home_rollover_widget_text_'.$i]); 
      } 

      ?> 

      <script type="text/javascript">    
       var formField = ''; 
       var imgUrl =''; 

       jQuery(document).ready(function() { 
        jQuery('#upload-button-<?php echo $i; ?>').click(function() { 
         alert('Clicked on upload button'); 
         formField = jQuery('#upload-button-<?php echo $i; ?>').attr('name'); 
         tb_show('', 'media-upload.php?type=image&amp&TB_iframe=1'); 
         return false; 
        }); 

        // send url back to plugin editor 
        window.send_to_editor = function(html) { 
         imgUrl = jQuery('img',html).attr('src'); 
         alert('Sending image url'+imgUrl+' to text field'); 
         jQuery('#home_rollover_widget_image_url_<?php echo $i; ?>').val(imgUrl); 
         tb_remove(); 
        }    
       }); 
      </script> 

      <hr /> 

      <?php  
     } 

     // Update widget data 
     update_option('Home_Rollover_Widget', $data); 
    } 

    /** 
    * widget() 
    * 
    * @param mixed $args 
    * @return void 
    */ 
    function widget($args) 
    {   
     // Load all widget options 
     $data = get_option('Home_Rollover_Widget');   
     ?> 

     <h4><?php echo $data['home_rollover_widget_title']; ?></h4> 

     <div id="all"> 
      <?php 
      // Loop though the widget elements 
      for ($i = 1; $i <= 8; ++$i) 
      { 
       // Find image URL 
       $imageUrl = $data['home_rollover_widget_image_url_'.$i]; 

       // Check for first slash, if not present, add it. 
       if (substr($imageUrl, 0, 1) != '/') { 
        $imageUrl = '/'.$imageUrl; 
       } 
       ?> 
       <ul> 
        <li><a href="#"><img src="<?php echo get_template_directory_uri(); ?><?php echo $imageUrl; ?>" /><h4><?php echo $data['home_rollover_widget_text_'.$i]; ?></h4></a></li>  
       </ul> 
       <?php 
      } 
      ?> 
     </div> 
     <?php 
    } 

    /** 
    * register() 
    * 
    * @return void 
    */ 
    function register() 
    { 
     // Register for sidebar 
     register_sidebar_widget('Home Rollover Widget', array('Home_Rollover_Widget', 'widget')); 

     // Register for control panel 
     register_widget_control('Home Rollover Widget', array('Home_Rollover_Widget', 'control')); 
    } 
} 

Answer 1

我已經簡化了這個小例子，刪除for循環，因爲我認爲你可以創建widget的新實例。這也允許對物品進行分類的附加好處。我將js移至另一個文件，因爲不需要重複代碼。

Widget類

class Home_Rollover_Widget extends WP_Widget 
{ 

    public function __construct() 
    { 
    parent::__construct(
     'home-rollover-widget', 
     'Home Rollover Widget', 
     array(
     'description' => 'Home rollover widget' 
    ) 
    ); 
    } 

    public function widget($args, $instance) 
    { 
    // basic output just for this example 
    echo '<a href="#"> 
     <img src="'.esc_url($instance['image_uri']).'" /> 
     <h4>'.esc_html($instance['image_uri']).'</h4> 
    </a>'; 
    } 

    public function form($instance) 
    { 
    // removed the for loop, you can create new instances of the widget instead 
    ?> 
    <p> 
     <label for="<?php echo $this->get_field_id('text'); ?>">Text</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 /> 
     <input type="text" class="img" name="<?php echo $this->get_field_name('image_uri'); ?>" id="<?php echo $this->get_field_id('image_uri'); ?>" value="<?php echo $instance['image_uri']; ?>" /> 
     <input type="button" class="select-img" value="Select Image" /> 
    </p> 
    <?php 
    } 


} 
// end class 

// init the widget 
add_action('widgets_init', create_function('', 'return register_widget("Home_Rollover_Widget");')); 

// queue up the necessary js 
function hrw_enqueue() 
{ 
    wp_enqueue_style('thickbox'); 
    wp_enqueue_script('media-upload'); 
    wp_enqueue_script('thickbox'); 
    // moved the js to an external file, you may want to change the path 
    wp_enqueue_script('hrw', '/wp-content/plugins/home-rollover-widget/script.js', null, null, true); 
} 
add_action('admin_enqueue_scripts', 'hrw_enqueue'); 

新的js文件：使用.on()方法，而不是.click()附加的事件處理程序。

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

Answer 2

這個腳本幫了我很多。但後來，我發現它與我的帖子中的媒體上傳混淆，可能是因爲它曾經兩次調用媒體上傳器腳本。我解決它通過添加

​​

像這樣：

// queue up the necessary js 
function hrw_enqueue($hook) { 

if($hook != 'widgets.php') 
    return; 

    wp_enqueue_style('thickbox'); 
    wp_enqueue_script('media-upload'); 
    wp_enqueue_script('thickbox'); 
    // I also changed the path, since I was using it directly from my theme and not as a plugin 
    wp_enqueue_script('hrw', get_template_directory_uri() . '/js/script.js', null, null, true); 
} 
add_action('admin_enqueue_scripts', 'hrw_enqueue'); 

這種方式，窗口小部件調用只在小部件頁面，而不是在整個管理上載腳本。