カテゴリー: カスタムフィールド

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

さっそくですがカテゴリー編集画面に項目を追加してみましょう。
現在使用している「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=&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( "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」で取得できます。