WordPressの編集画面にファイルアップローダー付きの独自メタボックスを追加する方法。

WordPressにはカスタムフィールドという機能が搭載されているが、実際のところはプログラム関連の知識が豊富でなおかつ応用が利くデザイナーでなければ有効に使いこなすことはできない。WEB関連の知識が乏しいクライントや一般ユーザーにとっては到底無理な話である。

それでも、「簡単に資料を添付できるようにしてほしい」とか「この位置にきれいに画像を貼りたい」とか、結構困った要望は上がってくるもので、そんなときには独自のメタボックスを作るとすんなり解決できるかもしれない。しかもファイルアップローダー付き。

作成手順

まずメタボックスのコードを作成する。functions.phpに次のようなコードを記述。

<?php
//メタボックス本体
function my_metabox_setting($post_ID){
  $post = get_post($post_ID);
  $meta_value = get_post_meta($post->ID, 'my_box_key', true);
?>
<fieldset id="my_meta_field">
<input type="text" id="my_box_key" name="my_box_key" value="<?php echo $meta_value; ?>">
<a class="button upload_button" href="#">ファイル設定</a>
</fieldset>
<?php
}

function add_metabox_form(){
  add_meta_box('my_metabox','添付ファイル設定','my_metabox_setting','post','normal','high');
}
add_action('admin_init','add_metabox_form');

//メタボックス用のスタイルシート
function my_field_styles() {
  wp_register_style('my_metabox', get_bloginfo('template_directory').'/css/my_metabox.css');
  wp_enqueue_style('my_metabox');
}
add_action('admin_print_styles', 'my_field_styles');
?>

上記のコードで下図のメタボックスが編集画面内に追加される。

次に記事を更新するときに追加したフィールドの値が保存されるよう、次のコードをfunctions.phpに記述。

<?php
function record_my_metadata($post_ID){
  $post = get_post($post_ID);
  update_post_meta($post->ID, 'my_box_key', $_POST['my_box_key']);
}
add_action('wp_insert_post','record_my_metadata');
?>

続いて、ファイルアップローダーを起動させるJavascriptを作成する。ここではファイル名をmy_metabox.jsとしている。

jQuery(function($){

  // Set all variables to be used in scope
  var frame,
      metaBox = $('#my_metabox'), // Your meta box id here
      addFilLink = $('.upload_button', metaBox),
      settingFil = $('#my_box_key', metaBox);
  
  // ADD FILE LINK
  addFilLink.on("click", function( event ){
    
    event.preventDefault();
    
    // If the media frame already exists, reopen it.
    if ( frame ) {
      frame.open();
      return;
    }
    
    // Create a new media frame
    frame = wp.media({
      title: '添付するファイルを選択してください。',
      button: {
        text: 'このファイルを設定'
      },
      multiple: false  // Set to true to allow multiple files to be selected
    });

    
    // When an image is selected in the media frame...
    frame.on( 'select', function() {
      
      // Get media attachment details from the frame state
      var attachment = frame.state().get('selection').first().toJSON();

      // Send the attachment URL to our custom image input field.
      settingFil.val( attachment.url );

    });

    // Finally, open the modal on click
    frame.open();
  });
  
});

最後に、このJavascriptを管理画面内に読み込むためにfunctions.phpに次のコードを記述。

<?php
function my_field_scripts() {
  wp_enqueue_media();
  wp_register_script('my_metabox', get_bloginfo('template_directory').'/js/my_metabox.js', array(), false, true );
  wp_enqueue_script('my_metabox');
}
add_action('admin_print_scripts', 'my_field_scripts');
?>

以上でファイルアップローダー付きメタボックスの完成。
元ネタはこちらです。https://codex.wordpress.org/Javascript_Reference/wp.media

追記：
最近仕様が変わったようで、wp_register_scriptの前に”wp_enqueue_media();”を定義しなければならなくなっています。