Javascript Wordpress 自定义小部件图片上传

Wordpress custom widget image upload

提问by Ivo van Beek

I'm busy with building my own Wordpress Widget. Everything works fine except for the Wordpress media up loader. I have created eight buttons and eight input text fields which should contain the url of the image that has been uploaded.

我正忙于构建自己的 Wordpress 小部件。除了 Wordpress 媒体上传器外，一切正常。我创建了八个按钮和八个输入文本字段，其中应包含已上传图像的 url。

The click event is not being fired, probably because Wordpress outputs the HTML twice(Once in the bar of the available widgets and once in the bar currently active widgets).

click 事件没有被触发，可能是因为 Wordpress 输出 HTML 两次（一次在可用小部件的栏中，一次在当前活动小部件的栏中）。

Does anybody sees what I'm doing wrong?

有没有人看到我做错了什么？

Below you find my code.

你可以在下面找到我的代码。

Thanks in advance for the help!

在此先感谢您的帮助！

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

回答by Tom

I have simplified the widget a little for this example, removing the for loop as I think you could just create new instances of the widget. This also allows the added benefit of sorting the items. I moved the js to another file as there's no need to repeat the code.

对于这个例子，我稍微简化了小部件，删除了 for 循环，因为我认为你可以创建小部件的新实例。这也允许对项目进行排序的额外好处。我将 js 移动到另一个文件，因为不需要重复代码。

The widget class

小部件类

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

New js file: use the .on()method instead of .click()to attach the event handler.

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

回答by giorgos

This script helped me alot. Later on, though, I found out that it messed with the media upload in my posts perhaps because it was calling the media uploader scripts twice. I solved it by adding

这个脚本对我帮助很大。但是，后来我发现它与我帖子中的媒体上传混淆了，这可能是因为它两次调用了媒体上传脚本。我通过添加解决了它

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

Like this:

像这样：

// 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');

That way the widget calls the uploader script only in the widgets' page and not in the entire admin.

这样，小部件仅在小部件的页面中而不是在整个管理员中调用上传器脚本。