この記事では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」の配列名を変更して追加してください。
これでカテゴリー編集画面を見ると下図のようになっているはずです。
![110817_1 カテゴリー編集に項目が追加された](https://mint123.tokyo/technology/wp-content/uploads/110817_1.png)
メタデータの保存
項目を追加しただけでは保存されませんので、保存する処理を記述しましょう。
先ほど記述した「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');
}
}
これで画像を追加の横のアイコンをクリックすると、いつもの画像を挿入するウィンドウが表示されます。
![110817_2 画像をアップロード画面](https://mint123.tokyo/technology/wp-content/uploads/110817_2.png)
テンプレートファイルでの表示
入力したデータをテンプレートで表示してみます。
ここではリスト表示をしてみます。
<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」で取得できます。