WordPress3.5
WPAlchemy 1.5.2
を使用します。

「WPAlchemy」の基本的な使い方

「WPAlchemy」の基本的な使い方は下記を参考にしてください。

WordPressでカスタムフィールドをお手軽に実装できるクラスライブラリ「WPAlchemy MetaBox」
WordPressで数を変更できてドラッグで並び替もできるカスタムフィールドを実装する方法

ダウンロード先が変わってました。

farinspace/wpalchemy

セットアップ

「wp-content」にダウンロードした「wpalchemy」を入れる。

現在使用してるテーマに「metaboxes」フォルダを作成して、下記の内容で「setup.php」「post-meta.php」というPHPファイルを作成する。

setup.php

    <?php
	include_once WP_CONTENT_DIR . '/wpalchemy/MetaBox.php';
	include_once WP_CONTENT_DIR . '/wpalchemy/MediaAccess.php';
	$wpalchemy_media_access = new WPAlchemy_MediaAccess();
	
	function add_meta_scripts() {
		wp_enqueue_style('wpalchemy-metabox', get_stylesheet_directory_uri() . '/metaboxes/meta.css');
		wp_enqueue_script('wpalchemy-metabox-js', get_stylesheet_directory_uri() . '/metaboxes/meta.js');
	}
	if (is_admin()) add_action( 'init', 'add_meta_scripts' );
	
	$custom_metabox = $simple_mb = new WPAlchemy_MetaBox(array
	(
		'id' => '_custom_meta',
		'title' => '画像',
		'types' => array('post'),
		'template' => get_stylesheet_directory() . '/metaboxes/post-meta.php'
	));
    

post-meta.php

    <?php global $wpalchemy_media_access; ?>
	<?php $mb->the_field('imgurl'); ?>
	<?php $wpalchemy_media_access->setGroupName('nn')->setInsertButtonLabel('追加'); ?>
	<div class="media-box">
		<div class="pre-image">
		<?php if ($mb->get_the_value()): ?>
			<?php echo wp_get_attachment_image($mb->get_the_value()); ?>
		<?php else: ?>
			<img src="<?php echo get_stylesheet_directory_uri() . '/metaboxes/no-image.png' ?>" />
		<?php endif; ?>
			<div class="img-edit">
				<a href="<?php echo $wpalchemy_media_access->getButtonLink(); ?>" class="mediabutton-nn thickbox {label:'追加'}">編集</a>
			</div>
		</div>
		<?php echo $wpalchemy_media_access->getField(array('name' => $mb->get_the_name(), 'value' => $mb->get_the_value())); ?>
	</div>
    

今回は管理画面でプレビューを表示したかったので「no-image.png」という空だったときの画像を用意しました。

「setup.php」で「meta.css」を読み込む設定をしたので、下記のように作成します。

meta.css

    #_custom_meta_metabox input[type='text'] {
		display: none;
	}
	#_custom_meta_metabox .pre-image {
		position: relative;
		width: 200px;
		border: solid 5px #ccc;
	}
	#_custom_meta_metabox .pre-image img {
		width: 100%;
		vertical-align: bottom;
		cursor: move;
	}
	#_custom_meta_metabox .pre-image .img-edit {
		background-color: #666;
		padding: 5px;
		position: absolute;
		right: 5px;
		bottom: 5px;
		color: #fff;
		display: none;
	}
	#_custom_meta_metabox .pre-image:hover .img-edit {
		display: block;
	}
	#_custom_meta_metabox .pre-image .img-edit a {
		color: #fff;
		text-decoration: none;
	}
	#_custom_meta_metabox .pre-image .img-edit a:hover {
		color: #eee;
	}
    

これで画像のカスタムフィールドが作成されます。

マウスオーバーで編集ボタンが表示され、クリックするとメディアライブラリが立ち上がりますが、まだ画像の切り替えをすることはできません。

メディアIDで追加できるようにする

「MediaAccess.php」を編集して画像URLの部分をIDに変更してみます。
329行目あたりの「send_to_editor」の「if (wpalchemy_mediafield)」の中を下記のようにします。

MediaAccess.php

	if (wpalchemy_mediafield)
	{
		var src = html.match(/src=['|"](.*?)['|"] alt=/i);
		src = (src && src[1]) ? src[1] : '' ;

		//Media ID で取得
		var mediaId = html.match(/wp-image-[0-9]+/i);
		mediaId = mediaId[0].replace(/wp-image-/,"");
		wpalchemy_mediafield.val(mediaId);

		// プレビュー画像変更
		wpalchemy_mediafield.prev().find('img').attr('src',src);

		// reset insert button label
		setInsertButtonLabel(wpalchemy_insert_button_label);

		wpalchemy_mediafield = null;
	}
	

同時に、管理画面の画像も切り替わる処理をしています。
これで編集ボタンのあどメディアライブラリで追加を押すと、カスタムフィールドの画像が差し替わるはずです。

メディアIDから画像を表示する

		$meta = get_post_meta(get_the_ID(), $custom_metabox->get_the_id(), TRUE);
		if (!empty($meta)) echo wp_get_attachment_image($meta['img_id']);
		

		wp_get_attachment_image($meta['img_id'], null);
		

		$meta = get_post_meta(get_the_ID(), $custom_metabox->get_the_id(), TRUE);
    	print_r(wp_get_attachment_image_src($meta['img_id']));
		

		wp_get_attachment_metadata($meta['img_id'])
		

		$attachment = get_post($meta['img_id']);
        echo 'URL: '.esc_html($attachment->guid);
        echo 'キャプション: '.esc_html($attachment->post_excerpt);
        echo '画像の説明: '.esc_html($attachment->post_content);
        echo '代替テキスト: ' . get_post_meta($meta['img_id'], '_wp_attachment_image_alt', true);
		

可変の複数の画像カスタムフィールド

だいたい前回の通りですが、新たにプレビュー画像にあわせた形にちょこっと編集してみます。

まず「post-meta.php」を下記に置き換え。
画像の枚数を自由に変更できるようにするので、「追加」「削除」ボタンを追加してます。もっとスマートに書けそうですが、参考程度ということで！

post-meta.php

	<?php global $wpalchemy_media_access; ?>
	<div class="media-box">
		<ul id="meta-img-list">
			<?php while($mb->have_fields_and_multi('docs')): ?>
			<?php $mb->the_group_open(); ?>
			<?php $mb->the_field('img_id'); ?>
			<?php $wpalchemy_media_access->setGroupName('img-n'. $mb->get_the_index())->setInsertButtonLabel('追加'); ?>
			<li class="media-item">
				<div class="pre-image">
				<?php if ($mb->get_the_value()): ?>
					<?php echo wp_get_attachment_image($mb->get_the_value()); ?>
				<?php else: ?>
					<img src="<?php echo get_stylesheet_directory_uri() . '/metaboxes/no-image.png' ?>" />
				<?php endif; ?>
					<div class="img-edit">
						<a href="<?php echo $wpalchemy_media_access->getButtonLink(); ?>" class="<?php echo $wpalchemy_media_access->getButtonClass(); ?> {label:'追加'}">編集</a>
						|
						<a href="#" class="dodelete">削除</a>
					</div>
				</div>
				<?php echo $wpalchemy_media_access->getField(array('name' => $mb->get_the_name(), 'value' => $mb->get_the_value())); ?>
			</li>
			<?php $mb->the_group_close(); ?>
			<?php endwhile; ?>
		</ul>
		<p class="docopy-docs"><a href="#" class="button">項目の追加</a></p>
	</div>
	

cssもデザインの部分になるのでご自由に。

meta.css

	#_custom_meta_metabox #meta-img-list li {
		float: left;
		margin-right: 7px;
		margin-bottom: 7px;
	}
	#_custom_meta_metabox .docopy-docs {
		clear: both;
	}
	

あとは画像を並び替えするためのjsを設置して完成。

meta.js

	(function($) {
		$(function() {
			if($('#meta-img-list').size() > 0){
				$('#meta-img-list').sortable({
					items: '.media-item'
				});
			}
		});
	})(jQuery); 
	

完成イメージ。

複数の画像をテンプレートで出力

管理画面でループさせたので多次元配列で返ってきます。
メディアIDだけの配列を作ってから「get_posts」とかで表示してます。

single.php

		<?php
		$meta = get_post_meta(get_the_ID(), $custom_metabox->get_the_id(), TRUE);
		if ($meta):
			$media_ids = array();
			foreach( $meta['docs'] as $value ) array_push($media_ids, intval($value['img_id']));
			$media_args = array(
				'post_type' => 'attachment',
				'post_mime_type' => 'image',
				'post__in' => $media_ids,
				'orderby' => 'post__in'
			);
			$attachments = get_posts($media_args);
			?>
			<div class="img-list cf">
				<?php foreach( $attachments as $key => $value ): ?>
					<div><img src="<?php echo esc_attr($value->guid) ?>" alt="<?php echo esc_attr($value->post_excerpt) ?>"/><br /><?php echo nl2br(esc_html($value->post_excerpt)) ?></div>
				<?php endforeach; ?>
			</div>
		<?php endif; ?>
		

というわけでメディタIDで保存しておけば、キャプションとか他の画像サイズとかの取得が簡単にできるようになります。（URLからメディアIDを取得する方法もあった気がしますが）
カスタムフィールドに関しては他のプラグインならもとからIDのタイプもあるとおもいます。