カスタムフィールドのメタボックスで画像をアップロード : WordPress 3.5〜

Tweet

Pocket

カスタムフィールドから3.5以降のメディアアップローダーを使い画像をアップロードするメモ。

カスタムフィールドの追加

// メディアアップローダー用アセット設定
add_action('admin_init', 'add_upload_assets');
function add_upload_assets() {
     
    // 2014.02.14 追記
    // カスタム投稿タイプでアイキャッチ画像をサポートしたときは
    // 下記処理(wp_enqueue_media())は行わない
    wp_enqueue_media();  //メディアアップローダーAPIを利用するための処理
    
    // カスタムスタイルロード
    wp_enqueue_style(
        'infotown-uploader-css',
        get_bloginfo( 'stylesheet_directory' ) . '/myuploader.css',
        array(),
        false,
        'all'
    );
    
    // カスタムスクリプトロード
    wp_enqueue_script(
        'infotown-uploader-script',
        get_bloginfo( 'stylesheet_directory' ) . '/myuploader.js',
        array( 'jquery' ),
        filemtime( dirname( __FILE__ ) . '/uploader.js' ),
        true
    );
}

// カスタムフィールド追加
function infotown_sample_meta_box( $post )
{
    add_meta_box(
        'sample',
        'サンプル',
        'infotown_sample_meta_callback',
        'sample', // 設定するカスタム投稿タイプ名(例: sample)
        'normal',
        'high'
    );
}
function infotown_sample_meta_callback( $post, $box )
{
        
    // カスタムフィールドの値を取得
    $url  = get_post_meta( $post->ID, 'infotown-uploader-url1', true ); // infotown-uploader-url1はカスタムフィールド名
    //
    echo wp_nonce_field( 'sample_meta_box', 'sample_nonce' );
    // 入力域
    ?>
    <div  class="infotown-uploader">
        <div class="infotown-uploader__heading"><h2>画像</h2></div>
        <div class="infotown-uploader__ctrl">
            <input type="text" class="infotown-uploader-url" name="infotown-uploader-url1" size="50" value="<?php echo $url; ?>">
        </div>
        <div class="infotown-uploader__ctrl">
            <button id="infotown-uploader-button1" class="infotown-uploader-button">画像追加</button>
        </div>
        <div class="infotown-uploader__ctrl">
            <div class="infotown-uploader-preview">
                <?php
                if ( ! empty( $url ) ) {
                   echo '<img src="' . esc_url( $url ) . '">';
                }
                ?> 
            </div>
        </div>
        <div class="infotown-uploader__ctrl">
            <button class="infotown-uploader-remove">画像削除</button>
        </div>
    </div>
<?php
}

// 保存処理
add_action( 'save_post', 'infotown_sample_meta_update' );
function infotown_sample_meta_update( $post_id )
{
    if ( isset( $_POST[ 'sample_nonce' ] ) && ! wp_verify_nonce( $_POST[ 'sample_nonce' ], 'sample_meta_box' ) ) {
        return $post_id;
    }
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
        return $post_id;
    }
    if ( 'sample' === $_POST[ 'post_type' ] ) {
        if ( ! current_user_can( 'edit_post', $post_id ) ) {
            return $post_id;
        }
    } else {
        return $post_id;
    }
    if ( isset( $_POST[ 'infotown-uploader-url1' ] ) ) {
        $url = $_POST[ 'infotown-uploader-url1' ];
        if ( '' === $url ) {
            delete_post_meta( $post_id, 'infotown-uploader-url1' );
        } else {
            update_post_meta( $post_id, 'infotown-uploader-url1', $url );
        }
    }
}

JavaScript(uploader.js)

メディアアップローダー処理スクリプトは下記の記事を参考にした。

» WordPress 3.5の新メディアアップローダーを自作プラグインやテーマに組み込む。 | firegoby

jQuery(function($) {

    var custom_uploader;

    $( ".infotown-uploader-button" ).on( "click", function( e ) {

        e.preventDefault();
        e.stopPropagation();
        
        var parent = $( this ).parents( ".infotown-uploader" );
        
        if ( custom_uploader ) {
            custom_uploader.open();
            return;
        }
        
        /** @var object wp recieved form wordpress */
        custom_uploader = wp.media({
            title: "Choose Image",
            button: {
                text: "Choose Image"
            },
            multiple: false
        });
        
        custom_uploader.on( "select", function() {
            var image = custom_uploader.state().get( "selection" );
            var preview = $( ".infotown-uploader-preview", parent );
            image.each(function( file ) {
                $( ".infotown-uploader-url", parent ).val( file.toJSON().url );
                var img = $( "img", preview );
                if ( img.length === 0 ) {
                    preview.append( '<img src="' + file.toJSON().url + '" />' );
                } else {
                    img.attr( "src", file.toJSON().url );
                }
                preview.css( "display", "block" );
            });
        });
        custom_uploader.open();

    });
    
    // 削除
    $( ".infotown-uploader-remove" ).on( 'click', function( e ) {
        
        e.preventDefault();
        e.stopPropagation();

        var parent = $( this ).parents( ".infotown-uploader" );
        $( ".infotown-uploader-url", parent ).val( "" );
        
        var preview = $( ".infotown-uploader-preview", parent );

        if (  $( "img", preview ).length > 0 ) {
            $( "img", preview ).remove();
        }
        
    });

});