Skip to content

Instantly share code, notes, and snippets.

@sus-happy sus-happy/admin-media.js
Last active Aug 29, 2015

Embed
What would you like to do?
WordPress CustomFIeld MediaUpload
/**
* 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 );
/**
* ファイル未選択時は「選択解除」ボタンが出ないようにする
*/
.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;
}
<?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' );
}
?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.