web-dev-qa-db-ja.com

メディアモーダルを使用してカスタムプラグインから画像をアップロードする

カスタムプラグインを作成しています。複数の画像をアップロードできるようにする必要があります。私は彼らが内蔵のメディアページを通して、しかしプラグイン設定ページからモーダル/ポップアップを通してこれを実行できるようにしたいです。

似たようなことがThrive Architectを使ってImageタブを選ぶとき、モーダルが現れ、それは管理スクリーン上のメディアライブラリのように見えます。どうやってこれを達成できますか？

私はwordpress media modalを検索しました、そしてそれは Javascript Reference/wp.media を返します。しかし、これが私が探しているものであるかどうか私は完全にはわかりません。

これはWordPressに組み込まれた機能ですか？それとも、これを作成するための独自の方法を見つける必要がありますか？

最後に、他の人が見つけたかもしれない提案も歓迎です！他の人がどのような解決策を見つけたのかを知っておくと常にいいです。

pluginsimagesmediamedia-librarymedia-modal
1
Brandon Benefield

ああ！

ユーザーの経験を気にかけている人が誰もが直面している古典的な問題。

私の経験によると、wp.mediaがその道です。

これは私のコードではありませんが、仕事は完了します。私はそれをたくさん使いました。

それが何をするのかを少しずつ説明します。

// Source: https://vedmant.com/using-wordpress-media-library-in-widgets-options/
jQuery(document).ready(function ($) {

   $(document).on("click", ".upload_image_button", function (e) {
      e.preventDefault();
      var $button = $(this);


      // Create the media frame.
      var file_frame = wp.media.frames.file_frame = wp.media({
         title: 'Select or upload image',
         library: { // remove these to show all
            type: 'image' // specific mime
         },
         button: {
            text: 'Select'
         },
         multiple: false  // Set to true to allow multiple files to be selected
      });

      // When an image is selected, run a callback.
      file_frame.on('select', function () {
         // We set multiple to false so only get one image from the uploader

         var attachment = file_frame.state().get('selection').first().toJSON();

         $button.siblings('input').val(attachment.url).change();

      });

      // Finally, open the modal
      file_frame.open();
   });
});

まず最初に。 inputに結び付けられたボタンが必要です。これについては後で詳しく説明します。これはカスタマイザ内にある場合もあれば、必要な場所にある場合もあります。

<button class="upload_image_button">Upload Image</button>

それから、このボタンに結び付けられたデータのインジェスターが必要です。残念ながら、これは範囲外ですが、ウィジェットでこれを行っていると仮定すると、これはうまくいきません。

<p>
    <label for="<?php echo $this->get_field_id( 'image' ); ?>">Image:</label>
    <br>
    <input class="widefat" id="<?php echo $this->get_field_id( 'image' ); ?>" name="<?php echo $this->get_field_name( 'image' ); ?>" value="<?php echo $instance['image'];?>" />
    <br>
    <button class="upload_image_button">Upload Image</button>
</p>

これまでのところ、ボタンをターゲットにしています。

  // Create the media frame.
  var file_frame = wp.media.frames.file_frame = wp.media({
     title: 'Select or upload image',
     library: { // remove these to show all
        type: 'image' // specific mime
     },
     button: {
        text: 'Select'
     },
     multiple: false  // Set to true to allow multiple files to be selected
  });

コードはよくコメントされています、しかし、これは対応するドキュメンテーションファイルです： https://codex.wordpress.org/Javascript_Reference/wp.media

メディアフレームにアクセスするためにWP JS APIを呼び出すだけです。それでは、必要なファイルパスを取得します。

file_frame.on('select', function () {

私たちがフレームから何かを選択するときはいつでも、AJAX呼び出し、JSONフォーマットで言われたファイルのパスを得て、私にそれを使わせてください - 

var attachment = file_frame.state().get('selection').first().toJSON();

入力に接続しなければならなかったそのボタンを覚えていますか？そう、それで我々はちょうどその入力に入れたこのリンクを挿入する：

$button.siblings('input').val(attachment.url).change();

そして、あなたのイメージへの新しいリンクが生まれました。

3
Jonathan Guerin