小金井にあるWEB制作会社の備忘録

MEMORANDUM

WordPress(ワードプレス)でカテゴリー(タクソノミー)登録・編集画面にカスタムフィールドを追加する。

各投稿記事への項目ではなく、カテゴリーに項目を追加してカテゴリーの色分けを希望された際に実装した内容をメモ。

function.php

今回新たに入力項目を設置する箇所はカスタム投稿タイプに追加した「sample-cat」。
フックは{$taxonomy}_add_form_fields、{$taxonomy}_edit_form_fields、create_{$taxonomy}、edit_{$taxonomy}を使用。

※{$taxonomy}はタクソノミー名(今回はsample-cat)

//新規登録画面への項目追加
function category_form_fields_function($taxonomy){
	echo('<div class="form-field">
	<label for="bg_color">ラベル背景色</label>
	<input type="color" name="bg_color" id="bg_color" value="">
	</div>');
};

add_action('sample-cat_add_form_fields', 'category_form_fields_function');

//編集画面への項目追加
function category_editform_fields_function($tag, $taxonomy){
	$term_meta = get_term_meta($tag->term_id, 'bg_color', true));
	echo('<tr class="form-field">
        <th scope="row" valign="top"><label for="bg_color">ラベル背景色</label></th>
        	<td>
            	<input type="color" name="bg_color" id="bg_color" value="'.esc_attr($term_meta).'">
            </td>
        </tr>');
}

add_action('sample-cat_edit_form_fields', 'category_editform_fields_function');

//入力内容の登録処理
function update_category_form_termmeta($term_id){
	$key = 'bg_color';
	if(isset($_POST[$key]) && esc_attr($_POST[$key])){
		update_term_meta($term_id, $key, $_POST[$key]);
	}else{
		delete_term_meta($term_id, $key);
	}
}

add_action('create_sample-cat', 'update_category_form_termmeta');
add_action('edit_sample-cat', 'update_category_form_termmeta');

データ取得(PHP)

$term = get_queried_object();
if($term){
	$meta = get_term_meta($term->term_id, 'bg_color', true);
}

尚、上記はwordpress4.4以上の場合、それ以前だと「update_term_meta」「delete_term_meta」が使えないので下記の方法で対応。

function.php

//新規登録画面への項目追加
function category_form_fields_function($taxonomy){
	echo('<div class="form-field">
	<label for="bg_color">ラベル背景色</label>
	<input type="color" name="bg_color" id="bg_color" value="">
	</div>');
};

add_action('sample-cat_add_form_fields','category_form_fields_function');

//編集画面への項目追加
function category_editform_fields_function($term){
	$t_id = $term->term_id;
	$term_meta = get_option("sample-cat_bg_color_$t_id");
	
	echo('<tr class="form-field">
        <th scope="row" valign="top"><label for="term_meta[bg_color]">ラベル背景色</label></th>
        	<td>
            	<label for="term_meta[bg_color]"></label><input type="color" name="term_meta[bg_color]" id="term_meta[bg_color]" value="'.esc_attr($term_meta['bg_color']).'">
                <p>初期値に戻す場合は #1f2879 を入力</p>
            </td>
        </tr>');
}

add_action('sample-cat_edit_form_fields','category_editform_fields_function');

//入力内容の登録処理
function update_category_form_termmeta($term_id){
	if(isset($_POST['term_meta'])){
		$t_id = $term_id;
		$term_meta = get_option('sample-cat_bg_color_$t_id');
		$cat_keys = array_keys($_POST['term_meta']);
		foreach($cat_keys as $key){
			if(isset($_POST['term_meta'][$key])){
				$term_meta[$key] = $_POST['term_meta'][$key];
			}
		}
		update_option('sample-cat_bg_color_$t_id', $term_meta);
	}
}

add_action('create_sample-cat', 'update_category_form_termmeta');
add_action('edit_sample-cat', 'update_category_form_termmeta');

データ取得(PHP)

$term = get_queried_object();
if($term) {
	$t_id = $term->term_id;
	$term_meta = get_option('sample-cat_bg_color_$t_id');
}

同一カテゴリーの記事