web-dev-qa-db-ja.com

Wordpressカスタムウィジェット画像のアップロード

自分でWordpressウィジェットを作成するのに忙しい。Wordpressメディアアップローダーを除いて、すべて正常に動作する。8つのボタンと8つの入力テキストフィールドを作成した。アップロードされた画像のURLが含まれている必要があります。

クリックイベントは発生していません。おそらくWordpressはHTMLを2回出力します（使用可能なウィジェットのバーに1回、現在アクティブなウィジェットのバーに1回）。

誰かが私が間違っていることを見ていますか？

以下に私のコードがあります。

助けてくれてありがとう！

<?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'));
    }
}
javascripthtmlwordpress-pluginwordpress
13
Ivo van Beek

この例では、ウィジェットを少し簡略化して、ウィジェットの新しいインスタンスを作成できると思うので、forループを削除しました。これにより、アイテムを並べ替えるという追加のメリットも得られます。コードを繰り返す必要がないので、jsを別のファイルに移動しました。

ウィジェットクラス

_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&amp;TB_iframe=true');
    return false;
  });
  window.send_to_editor = function(html) {
    imgurl = $('img', html).attr('src');
    image_field.val(imgurl);
    tb_remove();
  }
});
_
33
Tom

このスクリプトは私を大いに助けてくれました。しかし、後で、おそらくメディアアップローダースクリプトを2回呼び出していたために、投稿のメディアアップロードが混乱していることがわかりました。追加して解決しました

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

このような：

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

このように、ウィジェットはウィジェットのページでのみアップローダースクリプトを呼び出し、管理者全体では呼び出しません。

9
giorgos