web-dev-qa-db-ja.com

カスタムプラグインでメディアアップローダーを使用する

私が作成しているウィジェットの一部として、私は新しいクラスの下に私は次のコードを持っているウィジェットパネルを介して画像をアップロードするために管理者が必要です

<?php
function form($instance) {
   $instance = wp_parse_args( (array) $instance, array( 'qrimage'=> '');
   $qrimage=$instance['qrimage']; ?>

<label for="<?php echo $this->get_field_id('qrimage'); ?>">
      Upload QR Image:
<input class="wide" 
       id="<?php echo $this->get_field_id('qrimage'); ?>" 
       name="<?php echo $this->get_field_id('qrimage'); ?>" 
       type="text" 
       value='<?php echo attribute_escape($qrimage); ?>' />
Upload Image 
<label for="uploadi<?php echo $this->get_field_id('qrimage'); ?>"> 
   <input class="uploadi<?php echo $this->get_field_id('qrimage'); ?>" 
          name="uploadi<?php echo $this->get_field_id('qrimage'); ?>" 
          id="uploadi<?php echo $this->get_field_id('qrimage'); ?>" 
          value="Upload Image" type="button" />
</label>

<script type="text/javascript">
      var formfield = '';
      var imgurl ='';
      jQuery(document).ready(function() {
        jQuery('.uploadi<?php echo $this->get_field_id('qrimage');?>').click(function() {
         formfield = jQuery('#<?php echo $this->get_field_id('qrimage'); ?>').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');
         jQuery('#<?php echo $this->get_field_id('qrimage'); ?>').val(imgurl);
         tb_remove();
        }

        });
  </script>

ことですが…ウィジェットパネルにウィジェットのインスタンスが1つあれば、すべてうまくいきます。

別のインスタンスを追加すると、最初のインスタンスですべてが動作していますが、2番目のインスタンスでは画像を保存できません。テキストフィールドに値が表示されますが、保存すると表示されなくなります

どんな考え？

ありがとう

pluginswidgetsmediaoop
3
lior

ウィジェットのformメソッドの出力コードは、ウィジェットのインスタンスごとに1回ずつ（「使用可能なウィジェット」パネルに含まれる「ダミー」インスタンスを含めて）ページに追加されるので、window.send_to_editor関数を定義するJavaScriptコードがもっと表示される場合があります。最後のインスタンスが前のインスタンスを上書きします。 formメソッドによってJavaScriptコードが出力されない理由は少なくとも2つあります。

  1. ウィジェットの新しいインスタンスを（ドラッグ＆ドロップで）作成すると、 "dummy"のHTMLコード（__i__ indexでマークされています）が新しく作成されたウィジェットにコピーされ、インデックスは数字に置き換えられますが、イベントハンドラはコピーされないため、新しいウィジェットは期待通りに動作しない可能性があります。
  2. ウィジェットを保存すると、データはajaxを介してサーバーに送信され、formメソッドの出力はページに送り返されてからDOMに動的に追加されます。 jQueryのドキュメント によると、「HTMLが文字列として返される前に、取得されたデータ内に埋め込まれたJavaScriptが実行される」という奇妙な振る舞いを引き起こす可能性があります。これについての方法）。

Javascriptコードを別のjsファイルに入れ、 wp_enqueue_script を使用してページの先頭に含め、jQuery live メソッドを使用してページの先頭に含めることをお勧めします。イベントハンドラを追加します。すべてのインスタンスに汎用イベントハンドラを使用してから、適切なDOM要素を探して関連するアクションを適用することができます。例：

jQuery('input[id^=uploadi]').live('click', function() {
     formfield = jQuery('input[id^=qrimage]', jQuery(this).closest('.widget')).attr('name');
     tb_show('', 'media-upload.php?type=image&amp;TB_iframe=1');
     return false;
});

注：上記のコードのqrimageセレクタを変更して（テストされていません）、フィールドのプレフィックスを減らします。

PS私はまたmedia-upload.php?type=image&amp&TB_iframe=1というURLの誤字に気づいた

1
marcochiesi