つながるnet

メディアアップローダー(メディアを挿入)にフィールド追加

メディアを挿入/編集 でアップロードした画像(メディア)のために、
「タイトル」「キャプション」「代替テキスト」「説明」などの
フィールドがありますが、この メディアを挿入/編集 にカスタムフィールドを追加する方法をご紹介します。

例えば、ギャラリーサイトを制作する場合に、写真画像ごとに撮影場所、クレジットやクレジットURLを表示したいような場合です。

[メディアを挿入/編集]にカスタムフィールドを追加

メディアのフィールド配列をフックする
attachment_fields_to_edit というフィルターフックを活用します。
詳しくはcodex(英語)をご参照いただきたいと思いますが、
functions.phpに次のように記述します。

/***********************************************
* [メディアを挿入/編集]にメタフィールドを追加
***********************************************/
function my_add_attachment_location_field( $form_fields, $post ) {
    $field_value = get_post_meta( $post->ID, 'location', true );
    $form_fields['location'] = array(
        'input' => 'text',
        'value' => $field_value ? $field_value : '',
        'label' => '撮影場所',
        'helps' => 'この写真の撮影場所を記入'
    );
    return $form_fields;
}
add_filter( 'attachment_fields_to_edit', 'my_add_attachment_location_field' );

これで メディアを挿入/編集 にカスタムフィールドを追加できました。
次に追加したフィールドの設定を保存する記述です。

/** 保存 **/
function my_attachment_field_location_save( $post, $attachment ) {
	if( isset( $attachment['location'] ) )
		update_post_meta( $post['ID'], 'location', $attachment['location'] );
	return $post;
}
add_filter( 'attachment_fields_to_save', 'my_attachment_field_location_save' );

メディアを挿入をポップアップさせてみると次のようにフィールドが追加されているはずです。

メディアを追加

メディアを追加

各種タイプに対応

前述は text(テキストフィールド)に対応した例でしたが、
textarea(テキストエリア)select(セレクトプルダウン)checkbox(チェックボックス)hiddenなどの他のinput typeにすることも可能です。(ラジオボタンも同様)

/***********************************************
* [メディアを挿入/編集]にメタフィールドを追加
***********************************************/
function my_attachment_field_custom( $form_fields, $post ) {
	// textfield
	$form_fields["custom1"]["label"] = __("CF Textfield");
	$form_fields["custom1"]["input"] = "text";
	$form_fields["custom1"]["value"] = get_post_meta($post->ID, "custom1", true);
	// textarea
	$form_fields["custom2"]["label"] = __("CF Textarea");
	$form_fields["custom2"]["input"] = "textarea";
	$form_fields["custom2"]["value"] = get_post_meta($post->ID, "custom2", true);

	// input type="hidden"
	// labelは不要(というかあまり用途がないような)
	$form_fields["custom3"]["input"] = "hidden";
	$form_fields["custom3"]["value"] = get_post_meta($post->ID, "custom3", true);

	// select
	$c4val = get_post_meta( $post->ID, 'custom4', true );
	$form_fields["custom4"]["label"] = __("CF Select");
	$form_fields["custom4"]["input"] = "html";
	$form_fields["custom4"]["html"]  = "<select name='attachments[{$post->ID}][custom4]' id='attachments[{$post->ID}][custom4]'>\n";
	$form_fields["custom4"]["html"] .= ( $c4val == '' )? "<option value='' selected>- none -</option>\n":"<option value=''>- none -</option>\n";
	$form_fields["custom4"]["html"] .= ( $c4val == 'option1' )? "<option value='option1' selected>option1</option>\n":"<option value='option1'>option1</option>\n";
	$form_fields["custom4"]["html"] .= ( $c4val == 'option2' )? "<option value='option2' selected>option2</option>\n":"<option value='option2'>option2</option>\n";
	$form_fields["custom4"]["html"] .= ( $c4val == 'option3' )? "<option value='option3' selected>option3</option>\n":"<option value='option3'>option3</option>\n";
	$form_fields["custom4"]["html"] .= "</select>\n";

	// checkbox
	$c5val = get_post_meta( $post->ID, 'custom5', true );
	$form_fields["custom5"]["label"] = __("CF Checkbox");
	$form_fields["custom5"]["input"] = "html";
	$form_fields["custom5"]["html"]  = "<label><input type='checkbox' name='attachments[{$post->ID}][custom5]' value='option4'";
	$form_fields["custom5"]["html"] .= ( $c5val == 'option4' )? " checked":"";
	$form_fields["custom5"]["html"] .= "> option4</label>\n";
	return $form_fields;
}
add_filter( 'attachment_fields_to_edit', 'my_attachment_field_custom', 10, 2 );

/** 保存 **/
function my_attachment_field_custom_save( $post, $attachment ) {

	$custom_arr = array('custom1', 'custom2', 'custom3', 'custom4', 'custom5');
	foreach ( $custom_arr as $key ) {
		if( isset( $attachment[$key] ) ) {
			update_post_meta( $post['ID'], $key, $attachment[$key] );
		} else {
			delete_post_meta( $post['ID'], $key );
		}
	}
	return $post;
}
add_filter( 'attachment_fields_to_save', 'my_attachment_field_custom_save', 10, 2 );

/*** チェックボックスの幅調整 ***/
function admin_media_custom_head() {
		?>
<style type="text/css">
<!--
.media-sidebar .compat-item .field input {
	width: auto;
}
-->
</style>
<?php
}
add_action('admin_head', 'admin_media_custom_head');

追加したメディアのカスタムフィールドの値を表示する

ショートコード[gallery]や[caption]をカスタマイズする際に活用することができます。
通常の投稿のカスタムフィールドの扱いと同様の仕方で値を取得することができます。通常の投稿はpost_typeがpostであるのに対して、メディアのpost_typeはattachmentです。

ですから get_post_meta で取得することができます。

直接メールしてみる

お名前 (必須)
メールアドレス (必須)
件名
ご相談内容
画像文字をご入力ください
captcha

コメントを残す