Wordpressでプラグインを使わずに画像をアップロードするフォームを作ります。

media-lib-uploader.jsの作成

任意の場所にmedia-lib-uploader.jsを作成してください。

media-lib-uploader.jsでWordpressのメディアAPIを利用できるようにする

media-lib-uploader.jsにおいてWordpressのメディアAPIが使用できるようにします。

functions.phpに以下のコードを実装してください。

 function my_enqueue_media_lib_uploader() {
　　wp_enqueue_media();
   
   wp_register_script( 'media-lib-uploader-js', '/path/to/media-lib-uploader.js');
	 wp_enqueue_script( 'media-lib-uploader-js' );
 }
 add_action('admin_enqueue_scripts', 'my_enqueue_media_lib_uploader');

管理画面にFormを描画させる

functions.phpに以下のコードを実装してください。

function add_custom_column() {
   
    add_meta_box(
        'image',
        '画像を登録',
        'on_image',
        'image',
        'side',
        'high'
    );
}
add_action('admin_menu','add_custom_column');

function on_image($post){
  //すでに画像がアップロードされている場合は表示させる
  $image = get_post_meta($post->ID,'image',true);

  $vals = array(
    '<form  method="POST">',
    '<p>',
    '<label>カスタム画像</label><br>',
    sprintf('<input class="image-url normal" type="text" value="%s" name="image" />',$image),
    sprintf('<img src="%s" width="50" height="50" class="image">',$image),
    '<input class="upload-button" type="button" class="button" value="Upload Image" />',
    '</p>'
    '<input type="submit" value="Submit" />',
    '</form>'
  );
  foreach($vals as $val){
    echo $val;
  }

}

upload-buttonクラスを持つボタンをクリックした時のイベントを実装

media-lib-uploader.jsに以下のコードを実装します。

var $ = jQuery;
$(document).ready(function(){

    var mediaUploader;
    $('.upload-button').click(function(e) {
      e.preventDefault();

      if (mediaUploader) {
        mediaUploader.open();
        return;
      }

      mediaUploader = wp.media.frames.file_frame = wp.media({
        title: 'Choose Image',
        button: {
          text: 'Choose Image'
        }, multiple: false });


        mediaUploader.on('select', function() {
          attachment = mediaUploader.state().get('selection').first().toJSON();
          $('.image-url').val(attachment.url);
          $('.image-path').attr('src',attachment.url);
        });

        mediaUploader.open();
      });
})

記事を更新するタイミングでアップロードした画像を保存する

最後に記事を更新するタイミングでアップロードしたタイミングで画像を保存します。

functions.phpに以下のコードを実装してください。

add_action('save_post','save_image');
function save_image(){
  if(!get_post()){
    return;
  }
  $id = get_post() -> ID;

  if(isset($_POST['image'])) {
    $image = $_POST['image'];
    update_post_meta( $id, 'image', $image);
  }

}