カスタムフィールドの値を表示する(繰り返しフィールド、画像)

カスタムフィールドの値を表示する
繰り返しフィールドで、画像の場合

<?php
$rows = get_field('フィールド名' );
for($i = 0; $rows[$i] != ''; $i ++){
    $row = $rows[$i];
    $image = $row['サブフィールド名'];
    // echo '<pre>';
    // var_dump($image);
    // echo '</pre>';
    echo '<div style="margin-top:20px;">'.$image[title].'<div>';
    echo '<img src="'.$image[url].'" alt="'.$image[title].'" />';
}
?>

カスタムフィールドの保存方法を見てみよう!

カスタムフィールドは、wp_options というテーブルに保存されます。サイトの基本情報やプラグイン、テーマファイルなど、様々な設定情報と同じテーブルに保存されています。書き方も暗号かとおもうほど複雑難解です。慣れれば読めるようになります。
しかし、画像の場合ここには保存されずにIDのみが保存されます。

記事やページを記録する wp-posts というテーブルに保存されていますので、上記から抽出したIDを元にソートをかけると、やっと目的の画像ファイル名にたどり着けます。

↓wp_options

wordpress のデータベース構造は最小公倍数に設計されているのでとてもシンプルですが、構造がシンプルな代わりに保存方法が無限にありますので解析するにはかなりの熟練が必要です。

WordPress のカテゴリにカスタムフィールドを追加する

この記事ではWordpress3.2を使用しています。

カテゴリー編集に項目を追加

さっそくですがカテゴリー編集画面に項目を追加してみましょう。
現在使用している「functions.php」に以下を追加します。

functions.php

	add_action ( 'edit_category_form_fields', 'extra_category_fields');
	function extra_category_fields( $tag ) {
	    $t_id = $tag->term_id;
	    $cat_meta = get_option( &quot;cat_$t_id&quot;);
	?>
	<tr class=&quot;form-field&quot;>
		<th><label for=&quot;extra_text&quot;>その他テキスト</label></th>
		<td><input type=&quot;text&quot; name=&quot;Cat_meta[extra_text]&quot; id=&quot;extra_text&quot; size=&quot;25&quot; value=&quot;<?php if(isset ( $cat_meta['extra_text'])) echo esc_html($cat_meta['extra_text']) ?>&quot; /></td>
	</tr>
	<tr class=&quot;form-field&quot;>
		<th><label for=&quot;upload_image&quot;>画像URL</label></th>
		<td>
			<input id=&quot;upload_image&quot; type=&quot;text&quot; size=&quot;36&quot; name=&quot;Cat_meta[img]&quot; value=&quot;<?php if(isset ( $cat_meta['img'])) echo esc_html($cat_meta['img']) ?>&quot; /><br />
			画像を追加: <img src=&quot;images/media-button-other.gif&quot; alt=&quot;画像を追加&quot;  id=&quot;upload_image_button&quot; value=&quot;Upload Image&quot; style=&quot;cursor:pointer;&quot; />
		</td>
	</tr>
	<?php
	}
	

項目を追加したい場合は「$cat_meta」の配列名を変更して追加してください。
これでカテゴリー編集画面を見ると下図のようになっているはずです。

カテゴリー編集に項目が追加された

メタデータの保存

項目を追加しただけでは保存されませんので、保存する処理を記述しましょう。
先ほど記述した「extra_category_fields」の下に追加します。

functions.php

	add_action ( 'edited_term', 'save_extra_category_fileds');
	function save_extra_category_fileds( $term_id ) {
	    if ( isset( $_POST['Cat_meta'] ) ) {
		   $t_id = $term_id;
		   $cat_meta = get_option( &quot;cat_$t_id&quot;);
		   $cat_keys = array_keys($_POST['Cat_meta']);
			  foreach ($cat_keys as $key){
			  if (isset($_POST['Cat_meta'][$key])){
				 $cat_meta[$key] = $_POST['Cat_meta'][$key];
			  }
		   }
		   update_option( &quot;cat_$t_id&quot;, $cat_meta );
	    }
	}
	

画像アップ用のjs&cssの読み込み

追加した項目がテキストフィールドだけなら必要ありませんが、今回は画像フィールドもあるので、その場でアップロードできるようにcssとjsを読み込みます。
まずは新しいjavascriptを作成します。

upload.js

	(function($) {
		$(function() {
			$('#upload_image_button').click(function() {
				formfield =$('#upload_image').attr('name');
				tb_show('', 'media-upload.php?type=image&amp;post_id=&amp;TB_iframe=true');
				return false;
			});
			window.send_to_editor = function(html) {
				imgurl = $('img',html).attr('src');
				$('#upload_image').val(imgurl);
				tb_remove();
			}
		});
	})(jQuery);
	

このjsファイルは「upload.js」として現在使用しているテーマの「js」フォルダに保存します。

次に「functions.php」に戻って下記を追加します。

functions.php

	add_action('admin_print_scripts', 'my_admin_scripts');
	add_action('admin_print_styles', 'my_admin_styles');
	function my_admin_scripts() {
		global $taxonomy;
		if( 'category' == $taxonomy ) {
			wp_enqueue_script('media-upload');
			wp_enqueue_script('thickbox');
			wp_register_script('my-upload', get_bloginfo('template_
directory') .'/js/upload.js');
			wp_enqueue_script('my-upload');
		}
	}
	function my_admin_styles() {
		global $taxonomy;
		if( 'category' == $taxonomy ) {
			wp_enqueue_style('thickbox');
		}
	}
	

これで画像を追加の横のアイコンをクリックすると、いつもの画像を挿入するウィンドウが表示されます。

画像をアップロード画面

テンプレートファイルでの表示

入力したデータをテンプレートで表示してみます。
ここではリスト表示をしてみます。

	&lt;ul class=&quot;clearfix&quot;&gt;
	&lt;?php
	$tag_all = get_terms(&quot;category&quot;, &quot;fields=all&quot;);
	foreach($tag_all as $value):
	$cat_data = get_option('cat_'.intval($value-&gt;term_id));
	?&gt;
	&lt;li&gt;
	&lt;?php echo esc_html($value-&gt;name) ?&gt;
	&lt;img src=&quot;&lt;?php echo esc_html($cat_data['img']) ?&gt;&quot; width=&quot;110&quot; height=&quot;110&quot; /&gt;
	&lt;?php echo esc_html($cat_data['extra_text']) ?&gt;&lt;br /&gt;
	&lt;/li&gt;
	&lt;?php endforeach; ?&gt;
	&lt;/ul&gt;
	

カテゴリーで追加したカスタムフィールドのデータは「wp_options」に保存されていますので、「term_id」でidを取得したら「get_option」で取得できます。

wordpressでカスタムフィールドを使いすぎると

カスタムフィールドテンプレートなど便利なプラグインもありますが、
項目(フィールド)を沢山設けると動作がおかしくなることがあります。
原因はデータベースに登録するSQL分が長くなり、サーバーが全てをうまく処理できなくなってしまいます。
ほとんどのサーバーでは、SQL文の長さには制限があります。

カスタムフィールドのDBテーブルは柔軟性のある構造になっています。
この柔軟性な構造のため、複雑な長い SQL を発行します。
一つのカスタムフィールドにつき一つの JOIN(結合)が必要です。
5つのフィールドを参照しようとすると、5つの JOIN(結合)が必要になります。
JOIN は著しくパフォーマンスを低下させます。

Codex関数で表示すると、上記のようなことになりますので、
生のPHPでデータベースから直接取り出すことで回避できます。

カスタムフィールドを抽出して条件分岐

カスタムフィールドの値により様々なアイコンを表示する。
コンナ感じかな?

<?php
    // echo post_custom('施工実績(ジャンル)');
    $hoge = post_custom('施工実績(ジャンル)');
    // echo $hoge;
    if($hoge == '新築'){
        $echoimg = 'icon_mini_new.png';
    }elseif($hoge == 'リフォーム'){
        $echoimg = 'icon_mini_rehome.png';
    }elseif($hoge == '外構・ミニハウス'){
        $echoimg = 'icon_mini_gaikou.png';
    }elseif($hoge == '店舗'){
        $echoimg = 'icon_mini_shop.png';
    }
?>
<img src="<?php bloginfo('template_directory'); ?>/images/<?php echo $echoimg; ?>">