WordPress カスタム設定画面でメディアアップローダーから画像を選択・アップロードする機能を実装する

2018-03-14

何を言ってるのか分からねーと思うが。 要するに、プラグインを作ったりする時に、設定画面内の項目でメディアライブラリの画像を選択できるようにしたい、ということです。

これをやりたい

自作プラグインの設定ページで、こういう↓フォームを作って、

ボタン押したらメディアライブラリが立ち上がって、

選択したらその画像のURLなりIDなりを取得したい。

実装

プラグインや設定ページの基本的な作り方は割愛します。そちらの方が長くなるので。

多言語化の記述なども、サンプルコードの主旨を分かりやすくするため省略します。

設定画面のHTML

設定画面側にはこんなHTMLを用意します。ただし、$value や inputのname属性などはプラグインの仕様に合せて変更してください。


<?php
$value = isset($this->options['image_url']) ? esc_html($this->options['image_url']) : '';
?>
<input type="text" id="myplugin-media-url" class="widefat" name="myplugin-setting[image_url]" value="<?php echo $value; ?>">
<p>
  <button id="myplugin-media-select" class="button">メディアライブラリから選択</button>
  <button id="myplugin-media-clear" class="button">画像をクリア</button>
</p>
<p><img id="myplugin-media-image" src="<?php echo $value; ?>" style="width: 150px; height: auto;"></p>

管理画面で読み込ませるJavaScript

WordPressメディアアップローダーAPIなるものが用意されていますので、それを利用します。


(function ($) {
  const $url = $('#wpogp-media-url')
  const $image = $('#wpogp-media-image')
  const $select = $('#wpogp-media-select')
  const $clear = $('#wpogp-media-clear')
  let uploader

  $select.on('click', function (e) {
    e.preventDefault()

    if(uploader) {
      uploader.open()
      return
    }

    // メディアアップローダーのインスタンス
    uploader = wp.media({
      title: 'Select Image',

      library: {
        type: 'image'
      },

      button: {
        text: 'Select Image'
      },

      multiple: false
    })

    uploader.on('select', function () {
      const images = uploader.state().get('selection')

      // dataに選択した画像の情報が入ってる
      images.each(function (data) {
        const url = data.attributes.url
        $url.val(url)
        $image.attr('src', url)
      })
    })

    uploader.open()
  })

  $clear.on('click', function () {
    $url.val('')
    $image.attr('src', '')
  })
})(jQuery)


ちょっとした解説

サンプルではフルサイズのURLを取得していますが、他を取得したい場合。


// ID
data.id
// サムネイルサイズのURL
data.attributes.sizes.thumbnail.url

// その他を知りたい場合は
console.log(data)

なお、設定画面で、最初imgタグのsrcが空になってますが、設定画面なので細かいことは気にしなくてOK。