WordPress3.4.1
WPAlchemy MetaBox 1.5　を使用します。

「WPAlchemy MetaBox」の使用方法

カスタムフィールドは「WPAlchemy MetaBox」というライブラリを使用します。
基本的な使用方法は下記の過去記事を参考にしてください。

WordPressでカスタムフィールドをお手軽に実装できるクラスライブラリ「WPAlchemy MetaBox」

（実はこれだけでカスタムフィールドの数は変更できてしまいますね、、、）

カスタムフィールドの設定

「wp-content」内に「wpalchemy（ライブラリ本体）」を設置したら、使用しているテーマディレクトリに「metaboxes」というディレクトリを作成して、その中に「setup.php」「metabox.php」「meta.js」「meta.css」を作成します。
ファイルの内容はそれぞれ下記のようになります。

「setup.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() {
		if (is_admin()) wp_enqueue_style('wpalchemy-metabox', get_stylesheet_directory_uri() . '/metaboxes/meta.css');
		if (is_admin()) wp_enqueue_script('wpalchemy-metabox-js', get_stylesheet_directory_uri() . '/metaboxes/meta.js');
	}
	add_action( 'init', 'add_meta_scripts' );
	$custom_metabox = $simple_mb = new WPAlchemy_MetaBox(array
	(
		'id' => '_custom_meta',
		'title' => '商品詳細画像',
		'template' => get_stylesheet_directory() . '/metaboxes/metabox.php'
	));
	

「metabox.php」はカスタムフィールドの表示する部分になります。
ドラッグする部分を画像で用意して「hndle」というクラスを割り当てます。

metabox.php

	<?php global $wpalchemy_media_access; ?>
	<div>
		<p><a href="#" class="dodelete-docs button">全て削除</a></p>
		<ul id="meta-media">
		<?php while($mb->have_fields_and_multi('docs')): ?>
		<?php $mb->the_group_open(); ?>
			<?php $mb->the_field('imgurl'); ?>
			<?php $wpalchemy_media_access->setGroupName('img-n'. $mb->get_the_index())->setInsertButtonLabel('追加'); ?>
			<li class="media-item">
				<span class="hndle"><img src="<?php echo get_stylesheet_directory_uri() ?>/metaboxes/drag-icon.png" alt="ドラッグ" width="23" height="23" /></span>
				<?php echo $wpalchemy_media_access->getField(array('name' => $mb->get_the_name(), 'value' => $mb->get_the_value())); ?>
				<?php echo $wpalchemy_media_access->getButton(); ?> <a href="#" class="dodelete button">X</a>
			</li>
		<?php $mb->the_group_close(); ?>
		<?php endwhile; ?>
		</ul>
		<p class="docopy-docs"><a href="#" class="button">項目の追加</a></p>
	</div>
	

WordPressの管理画面にはドラッグするためのプラグインが使用できる状態になっていますのでJavaScriptは下記のようにするだけです。

meta.js

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

「meta.css」はデザインの部分なので自由に設定してみてください。

meta.css

	#meta-media input[type='text'] {
		width: 80%;
	}
	#meta-media .hndle {
		display: block;
		float: left;	
	}
	

最後に「functions.php」から「setup.php」を読み込みましょう。

functions.php

	include_once 'metaboxes/setup.php';
	

こんな感じになります。

入力した画像を表示する

「single.php」でしたら次のようにするとリスト表示されますので、このあたりは使用するjQueryプラグインに合わせてください。

single.php

	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
	<?php the_content(); ?>
	<?php
	$meta = get_post_meta(get_the_ID(), $custom_metabox->get_the_id(), TRUE);
	if (isset($meta['docs'])):
	?>
	<ul>
	<?php foreach( $meta['docs'] as $value ): ?>
	<li><img src="<?php echo esc_html($value['imgurl']); ?>" /></li>
	<?php endforeach; ?>
	</ul>
	<?php endif; ?>