WordPressの画像カスタムフィールドにメディアIDで保存してプレビューする方法

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から画像を表示する

無事保存できたと思うので、今度はテンプレートで表示してみます。
とりあえず画像を表示したいときは「single.php」だったら下記のようにします。

single.php

		$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」はデフォルトではサムネイルが表示されます。
他のサイズを表示したい場合引数に「medium」や「thumbnail」を指定します。
フルサイズの画像は「null」を指定します。

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

画像パスだけを取得する

「wp_get_attachment_image」は画像表示までしてくれて便利な機能ですが、クラス名やサイズなどコントロールしたいときパスだけ取得できたらなと思うことがあります。
その場合には「wp_get_attachment_image_src」を使用します。

		$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」を使用するとすべての画像サイズをまとめて取得することができます。

		wp_get_attachment_metadata($meta['img_id'])

画像の情報を取得する

画像情報入力欄

「$wp_get_attachment_metadata」で「caption」の配列があるのでこれでキャプションも表示できそうなんですが、なぜか空になっているので「get_post」を使用します。

		$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);

基本「get_post」にメディアIDを指定すれば画像の情報は取得できますが、代替テキストだけ入っていないので「get_post_meta」を使用します。

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

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

まず「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のタイプもあるとおもいます。

参考サイト：WordPress › Support » Get Title, Alt, or Caption from Media Library and insert into theme
写真素材：PAKUTASO/ぱくたそ

WordPressの画像カスタムフィールドにメディアIDで保存してプレビューする方法

「WPAlchemy」の基本的な使い方

セットアップ

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

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

画像パスだけを取得する

画像の情報を取得する

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

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

関連記事

WordPressで数を変更できてドラッグで並び替もできるカスタムフィールドを実装する方法

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

WordPressで指定したタグをエスケープさせない方法

WordPressでページと記事を関連付けできるプラグイン「Posts 2 Posts」