【WordPress】管理画面にメディア選択欄を追加する

<?php
//前略
wp_enqueue_media();
?>
<!-- 中略 -->
<table class="form-table" role="presentation">
    <tr>
        <th scope="row">画像を選択</th>
        <td>
  	        <input type="text" name="image_url" id="image_url" class="regular-text" value="<?php echo /*メタデータの取得を記載*/ ?>"  readonly>
            <p>
                <button type="button" name="image_select" id="image_select" class="button media-button select-mode-toggle-button">画像を選択</button>
                <button type="button" name="image_delete" id="image_delete" class="button media-button select-mode-toggle-button">画像を削除</button>
            </p>
        </td>
    </tr>
</table>
<!-- 中略 -->
<?php
// 後略
?>

jQuery(document).ready(function(){
    function createCustomMedia(){
        var media = wp.media({
            title: 'メディアの選択またはアップロード',
            library: {type: 'image'},
            button: {text: '選択'},
            multiple: false
        });
        return media;
    } 
    var customMedia;
    jQuery('#image_select').click(function(event){
        event.preventDefault();
        if(customMedia){
            customMedia.open();
            return;
        }
        customMedia = createCustomMedia();
        customMedia.on('select', function(){
            var attachment = customMedia.state().get('selection').first().toJSON();
            jQuery('#image_url').val(attachment.url);
        });
        customMedia.open();
    });
    jQuery('#image_delete').click(function(event){
        jQuery('#image_url').val('');
    });
});