WordPress CustomFIeld MediaUpload

admin-media.js

/**
 * admin-media.js
 * 
 * @author SUSH <sush@sus-happy.ner>
 */
( function( $, U ) {
    $( function() {
        var target = $( '.custom-media' );

        // 対象要素がなければ終了
        if(! target.length ) {
            return false;
        }

        // 初期設定
        var CustomMediaWindow = function( wrap ) {
            this._wrap   = wrap;
            this._append = wrap.find( '.custom-media-append' );
            this._delete = wrap.find( '.custom-media-delete' );
            this._target = $( wrap.attr( 'data-target' ) );
            this._tgt_ap = null;
            this._type   = wrap.attr( 'data-type' );
            this._title  = wrap.attr( 'data-title' );

            this._window = U;

            this.init();
        };
        CustomMediaWindow.prototype = {
            // コンストラクタ
            init: function() {
                var that = this;

                this._append.bind( 'click.customMedia', function( e ) {
                    return that.open_window();
                } );

                this._delete.bind( 'click.customMedia', function( e ) {
                    return that.delete_selected();
                } );

                switch( that._type ) {
                    case 'image':
                        that.init_image();
                        break;
                    case 'file':
                        that.init_file();
                        break;
                }
            },
            // type: image のコンストラクタ
            init_image: function() {
                this._tgt_ap = $( this._wrap.attr( 'data-target' )+'-photo' );

                if( this._target.val() ) {
                    this._delete.show();
                }
            },
            // type: file のコンストラクタ
            init_file: function() {
                this._tgt_ap = $( this._wrap.attr( 'data-target' )+'-file' );

                if( this._target.val() ) {
                    this._delete.show();
                }
            },
            // メディアアップローダの表示
            open_window: function() {
                var that = this;

                // 未定義であれば設定
                if( this._window === U ) {
                    this._window = wp.media( {
                        title: this._title,
                        multiple: false,
                        button: { text: '登録' }
                    } );

                    // 画像選択時のイベント
                    this._window.on( 'select', function() {
                        var first = that._window.state().get( 'selection' ).first().toJSON();
                        that._target.val( first.id );
                        that._delete.show();

                        switch( that._type ) {
                            case 'image':
                                that.append_image( first );
                                break;
                            case 'file':
                                that.append_file( first );
                                break;
                        }
                    } );
                }

                // 表示
                this._window.open();

                return false;
            },
            // 画像選択
            append_image: function( selection ) {
                if( this._tgt_ap.length ) {
                    this._tgt_ap.html( '' );
                    $('<img>', { src: selection.url } ).appendTo( this._tgt_ap );
                }
            },
            // ファイル選択
            append_file: function( selection ) {
                if( this._tgt_ap.length ) {
                    this._tgt_ap.html( '' );
                    $('<span>', { class: 'filename' } ).text( selection.filename ).appendTo( this._tgt_ap );
                    $('<a>', { href: selection.url, target: '_blank', class: 'button' } ).text( 'プレビュー' ).appendTo( this._tgt_ap );
                }
            },
            // 選択解除
            delete_selected: function() {
                this._target.val( '' );
                this._delete.hide();

                switch( this._type ) {
                    case 'image':
                        this.delete_selected_image();
                        break;
                    case 'file':
                        this.delete_selected_file();
                        break;
                }

                return false;
            },
            // 画像選択解除
            delete_selected_image: function() {
                if( this._tgt_ap.length ) {
                    this._tgt_ap.html( '' );
                }
            },
            // ファイル選択解除
            delete_selected_file: function() {
                if( this._tgt_ap.length ) {
                    this._tgt_ap.html( '' );
                }
            }
        };

        // 対象要素の分だけインスタンスを作成
        target.each( function() {
            new CustomMediaWindow( $(this) );
        } );
    } );
} )( jQuery );

admin.css

/**
 * ファイル未選択時は「選択解除」ボタンが出ないようにする
 */
.wp-core-ui .custom-media .custom-media-delete {
    display: none;
}

/**
 * 画像がはみ出さないようにサイズ調整
 */
.media-photo {
}
    .media-photo img {
        max-width: 100%;
    }
/**
 * ファイル名とボタンの位置調整
 */
.media-file {
}
    .media-file span.filename {
        display: inline-block;
        /display: inline;
        /zoom: 1;
        margin-right: 15px;
        vertical-align: middle;
    }

function.php

<?php
 
// カスタムフィールドを追加する処理を色々
// 上記JSとCSSを読み込む処置も書く
 
function _add_meta_box( $post )
{
    // 登録済みであれば、ファイル情報を取得する
    $image_value = get_post_meta( $post->ID, 'field-image', TRUE );
    if( ! empty( $image_value ) ){
        $attached = get_post( $image_value );
        if( $attached ) {
            $image_attach_id = $attached->ID;
            $image_file      = $attached->guid;
            $image_file_name = basename( $image_file );
        }
    }
    
    $file_value = get_post_meta( $post->ID, 'field-file', TRUE );
    if( ! empty( $file_value ) ){
        $attached = get_post( $file_value );
        if( $attached ) {
            $file_attach_id = $attached->ID;
            $file_file      = $attached->guid;
            $file_file_name = basename( $file_file );
        }
    }

    ?>
    <!--
    data-type:   image / file
    data-title:  メディアアップロードのモーダルウィンドウのタイトル
    data-target: '#'+カスタムフィールド名
    -->
    
    <!-- data-type: imageの場合 -->
    <div class="custom-media" data-type="image" data-title="画像" data-target="#field-image">
        <input type="hidden" name="field-image" id="field-image" value="<?php echo $image_attach_id !== NULL ? esc_attr( $image_attach_id ) : ''; ?>" />
        <p>
            <a href="#" class="button button-primary custom-media-append">イラスト画像選択</a>
            <a href="#" class="button custom-media-delete">選択解除</a>
        </p>
    
        <!-- カスタムフィールド名（field-image）+'-photo'というIDを指定します -->
        <div class="media-photo" id="field-image-photo">
            <?php if( $image_attach_id !== NULL ): ?>
            <img src="<?php echo esc_url( $image_file ) ?>">
            <?php endif; ?>
        </div>
    </div>
    
    <!-- data-type: fileの場合 -->
    <div class="custom-media" data-type="file" data-title="画像" data-target="#field-file">
        <input type="hidden" name="field-file" id="field-file" value="<?php echo $file_attach_id !== NULL ? esc_attr( $file_attach_id ) : ''; ?>" />
        <p>
            <a href="#" class="button button-primary custom-media-append">イラスト画像選択</a>
            <a href="#" class="button custom-media-delete">選択解除</a>
        </p>
    
        <!-- カスタムフィールド名（field-file）+'-file'というIDを指定します -->
        <div class="media-file" id="field-file-file">
            <?php if( $file_attach_id !== NULL ): ?>
            <span class="filename"><?php echo esc_html( $file_file_name ) ?></span>
            <a class="button" href="<?php echo esc_url( $file_file ) ?>" target="_blank">プレビュー</a>
            <?php endif; ?>
        </div>
    </div>
    <?php
    
    wp_nonce_field( 'custom_key', 'custom_nonce' );
}

?>