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

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

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

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

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

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

タグ編集画面にカスタムフィールドを追加

タグ編集にもカスタムフィールドを追加することはできます。
基本的にはアクションフックを下記に置き換えるだけです。

functions.php

	add_action ( 'edit_tag_form_fields', 'extra_tag_fields');
	

カスタム分類（タクソノミー）の場合は下記です。

	add_action ( '[タクソノミー名]_edit_form_fields', 'extra_taxonomy_fields');
	

[タクソノミー名]の部分は作成した名称に置き換えてください。