[WP] Magic fields のグループで『Duplication』機能をONにした場合の処理をおさらいしてみる(特に画像ね)。

wordpressのカスタムフィールドを便利にするプラグイン『Magic Fieldsチュートリアル)』。昨今では『Advanced Custom Fields』や『Custom Field Template』をよく目にしますが、私はあえて『Magic Fields』を使いつづけています。

主な理由はデフォルトでグループやフィールドの複製が可能な事。これが大変便利。これがないと仕事にならない。そのくらい重要。

そんな事はさておき、早速 Magic fields のグループで『Duplication(複製)』機能をONにした場合の処理をおさらいしてみます。

まずは、完成イメージから

一つの記事のグループ単位で “複製された(Duplicateされた)” フィールドをまとめて表示出来るようになります。

表示画面1_

Step1:Magic fields でグループを作成します。

『Duplication』機能をONにした「コミック」という名のグループを作成しました。

設定2

Step2:Magic fields で作成したグループ内にフィールドを作成します。

「Label」と「Name」は同じにしています。いずれも2バイト文字が使えます。

設定1

Step3:投稿画面 はこんな感じになりました。

投稿画面1

Step4:single.php はこんな感じの記述になります。

/wp-content/themes/○○○○/single.php では以下のように記述しています(必要に応じて各所変更してください)。

本来 single.php では「have_posts()」は無くても良いのですが、MagicFieldsの独自関数「get_group(‘グループ名’);」が「have_posts()」の中でしか使えない為、「the_post();」の「$post->ID;」で取得した記事IDを「query_posts」の「post__in」の配列に入れる、という回りくどいやり方になっています…。

詳細はソース中のコメントを確認してください。

<?php
// wp-config.php を読み込む(よく使う方法ですが、今回はsingle.phpに記述するので使いません)
//include_once('./wp-config.php');
?>

<?php /*
=================================
必要な箇所にペーストして微調整する / ここから
=================================
*/ ?>

<?php
//記事IDを取得1:「the_post();」を実行すると、$postという変数で各々値が取得できるようになる。
the_post();
//記事IDを取得2:「the_post();」で取得した記事IDを変数「$ID」に入れる。
$ID = $post->ID;
//表示させたい記事IDを代入して表示する。
query_posts(array('post__in' => array($ID)));
?>

<?php
//お約束の『have_posts()』スタート
if (have_posts()) :
while (have_posts()) : the_post();
?>

		<?php
		//WPプラグイン『MagicFields』のグループで『Duplication』機能をONにした場合の処理
		$AAAA = get_group('コミック'); //←『コミック』はグループ名
		if (is_array($AAAA)) {
		?>
		
			<?php /* グループに投稿が1件でもあればタイトルを表示 */ ?>
			<h3>コミック</h3>

		<?php 
		//4つ区切りで『<hr />』を入れたい為、カウンターをセットする。
		$counter = 0;
		// foreach でまわしはじめる。
		foreach($AAAA as $BBBB){
		//画像のURLが「http://」からのパスになるので、必要に応じてURLを変換する。
		$img_comic = str_replace("http://○○○○.co.jp/", "/", $BBBB['画像(コミック)'][1]['o']);
		?>
			
				<div class="box_comic">
					<div class="pic">
						<a href="<?php echo $BBBB&#91;'amazonURL(コミック)'&#93;&#91;1&#93;; ?>" target="_blank">
						<img src="<?php echo $img_comic ?>" />
						</a>
					</div>
					<div class="title">
						<?php echo $BBBB&#91;'タイトル(コミック)'&#93;&#91;1&#93;; ?>
					</div>
					<div class="amazon">
						<a href="<?php echo $BBBB&#91;'amazonURL(コミック)'&#93;&#91;1&#93;; ?>" target="_blank">
						<img src="/common/img/btn_amazon_comic.png" alt="<?php echo $BBBB&#91;'タイトル(コミック)'&#93;&#91;1&#93;; ?> を amazonで購入する!!" />
						</a>
					</div>
				</div>
				
				<?php
				//4つ区切りで『<hr />』を入れる
				if($counter++ / 4 == 1 && $counter != 1 ){ 
				?>
					<hr />
				<?php } ?>
				
				
			<?php } ?>
		<?php }else{ ?>
			<!-- コミックはございません。 --> 
		<?php } ?>

<?php
//お約束の『have_posts()』スタート
endwhile; ?>
<?php else : ?>
	<!-- 投稿はございません。 --> 
<?php endif; ?>

<?php /*
=================================
必要な箇所にペーストして微調整する / ここまで
=================================
*/ ?>

Step5:CSSはざっくりとこんな感じで設定します。

クラス名 {プロパティ名:値;} 等はお好みの応じて変更してください。

.box_comic {
	float:left;
	width:162px;
	margin:10px 0px 10px 15px;
	}
.box_comic .pic img{
	max-width:160px;
	max-height:230px;
	padding:1px;
	border:1px solid #ccc;
	}
.box_comic .title{
	padding:4px 0;
	font-size:14px;
	width:162px;
	font-weight:bold;
	}
.box_comic .amazon{
	}
.box_comic .clear{
	clear:both;
	}
hr {
	border:none;
	border-top:1px dotted #111;
	}

Step6:そして、表示はこんな感じになりました。

4つ目の最後に <hr /> を入れるようにしている為、罫線が入ります。

特に<hr />で無く <div class=”clear”></div> 等でもよいですが、このようにすると1セルの縦幅が変わっても特別なJS処理等を入れなくてもレイアウト崩れを防げます。

表示画面1_

以上です。

Similar posts