WordPress functions.php

管理画面のカテゴリーの画面で色を決められるようにすると、カテゴリーを足したときも、CSS を書き足さずに色を付けられます。

この記事のコードでは、色はカテゴリーごとの「タームメタ」に保存します。色のコード（#ff0000 など）でない値は保存しません。

/*----------------------------------------------------
 カテゴリーに背景色・文字色を持たせる（タームメタ）
----------------------------------------------------*/

// 1. 保存する値の決まり（色のコードだけを受け付ける）
function fs_cat_color_register_meta() {
	foreach ( array( 'cat_color_bg', 'cat_color_txt' ) as $key ) {
		register_term_meta( 'category', $key, array(
			'type'              => 'string',
			'single'            => true,
			'sanitize_callback' => 'sanitize_hex_color',
			'show_in_rest'      => true,
		) );
	}
}
add_action( 'init', 'fs_cat_color_register_meta' );

// 2. 入力欄（新規追加の画面）
function fs_cat_color_add_fields() {
	wp_nonce_field( 'fs_cat_color_save', 'fs_cat_color_nonce' );
	?>
	<div class="form-field">
		<label for="cat_color_bg">カテゴリー背景色</label>
		<input type="text" name="cat_color_bg" id="cat_color_bg" value="" class="fs-color-field" placeholder="#1e73be">
	</div>
	<div class="form-field">
		<label for="cat_color_txt">カテゴリー文字色</label>
		<input type="text" name="cat_color_txt" id="cat_color_txt" value="" class="fs-color-field" placeholder="#ffffff">
	</div>
	<?php
}
add_action( 'category_add_form_fields', 'fs_cat_color_add_fields' );

// 3. 入力欄（編集の画面）
function fs_cat_color_edit_fields( $term ) {
	$colors = fs_get_category_colors( $term->term_id );
	wp_nonce_field( 'fs_cat_color_save', 'fs_cat_color_nonce' );
	?>
	<tr class="form-field">
		<th scope="row"><label for="cat_color_bg">カテゴリー背景色</label></th>
		<td><input type="text" name="cat_color_bg" id="cat_color_bg" value="<?php echo esc_attr( $colors['bg'] ); ?>" class="fs-color-field"></td>
	</tr>
	<tr class="form-field">
		<th scope="row"><label for="cat_color_txt">カテゴリー文字色</label></th>
		<td><input type="text" name="cat_color_txt" id="cat_color_txt" value="<?php echo esc_attr( $colors['txt'] ); ?>" class="fs-color-field"></td>
	</tr>
	<?php
}
add_action( 'category_edit_form_fields', 'fs_cat_color_edit_fields' );

// 4. 保存（自分の入力欄が送られたときだけ）
function fs_cat_color_save( $term_id ) {
	if ( ! isset( $_POST['fs_cat_color_nonce'] )
		|| ! wp_verify_nonce( sanitize_key( wp_unslash( $_POST['fs_cat_color_nonce'] ) ), 'fs_cat_color_save' ) ) {
		return; // クイック編集や、ほかの処理から呼ばれたときは何もしない
	}
	if ( ! current_user_can( 'edit_term', $term_id ) ) {
		return;
	}
	foreach ( array( 'cat_color_bg', 'cat_color_txt' ) as $key ) {
		$color = isset( $_POST[ $key ] ) ? sanitize_hex_color( wp_unslash( $_POST[ $key ] ) ) : '';
		update_term_meta( $term_id, $key, (string) $color ); // 色でない値は空になる
	}
}
add_action( 'created_category', 'fs_cat_color_save' );
add_action( 'edited_category', 'fs_cat_color_save' );

// 5. 管理画面でカラーピッカーを使う
function fs_cat_color_admin_scripts( $hook ) {
	if ( ! in_array( $hook, array( 'edit-tags.php', 'term.php' ), true ) ) {
		return;
	}
	wp_enqueue_style( 'wp-color-picker' );
	wp_enqueue_script( 'wp-color-picker' );
	wp_add_inline_script( 'wp-color-picker', 'jQuery(function($){ $(".fs-color-field").wpColorPicker(); });' );
}
add_action( 'admin_enqueue_scripts', 'fs_cat_color_admin_scripts' );

// 6. 色を取り出す（前の書き方で保存した cat_{id} のオプションも読む）
function fs_get_category_colors( $term_id ) {
	if ( metadata_exists( 'term', $term_id, 'cat_color_bg' ) ) {
		$bg  = get_term_meta( $term_id, 'cat_color_bg', true );
		$txt = get_term_meta( $term_id, 'cat_color_txt', true );
	} else {
		$old = get_option( 'cat_' . $term_id ); // 一度も保存し直していないカテゴリー
		$bg  = is_array( $old ) ? ( $old['cat_color_bg'] ?? '' ) : '';
		$txt = is_array( $old ) ? ( $old['cat_color_txt'] ?? '' ) : '';
	}
	return array(
		'bg'  => (string) sanitize_hex_color( $bg ),
		'txt' => (string) sanitize_hex_color( $txt ),
	);
}

// 7. 色つきのカテゴリーボタンの HTML を返す
function fs_get_category_color_buttons( $post_id = null ) {
	$html = '';
	foreach ( get_the_category( $post_id ) as $cat ) {
		$colors = fs_get_category_colors( $cat->term_id );
		$style  = '';
		if ( $colors['bg'] ) {
			$style .= 'background-color:' . $colors['bg'] . ';';
		}
		if ( $colors['txt'] ) {
			$style .= 'color:' . $colors['txt'] . ';';
		}
		$html .= sprintf(
			'<a class="cat_btn" href="%s" rel="category tag"%s>%s</a>',
			esc_url( get_category_link( $cat ) ),
			$style ? ' style="' . esc_attr( $style ) . '"' : '',
			esc_html( $cat->name )
		);
	}
	return $html;
}

// テンプレートでそのまま出すとき
function fs_the_category_color_buttons( $post_id = null ) {
	echo fs_get_category_color_buttons( $post_id ); // 中身は上でエスケープ済み
}

上のコードを足すと、下のようにカテゴリーの画面に欄が増えます（画像は前のコードの入力欄です。新しいコードでは、欄をクリックするとカラーピッカーが開きます）。

.cat_btn {
	display: inline-block;
	padding: 5px 10px;
	margin: 0 10px 10px 0;
	border-radius: 5px;
	background-color: #666; /* 色を決めていないカテゴリー */
	color: #fff;
	text-decoration: none;
}

style.css には <style> のタグを書きません（前の記事のコードには書いてあり、CSS のファイルに入れると、すぐ後ろの .cat_btn の指定がまるごと効かなくなります）。色を決めていないカテゴリーは、ここの色になります。

<?php fs_the_category_color_buttons(); ?>

文字列につないで使うときは、HTML を返す fs_get_category_color_buttons() を使います。

echo '<p class="date">' . fs_get_category_color_buttons( get_the_ID() ) . '</p>';

前のコードの the_category_color_btn() は、その場で echo する関数でした。上のように文字列につなぐと、ボタンが <p> の外（前）に出てしまいます。

前の書き方との違い

確かめた結果

このサイトの作業環境（WordPress 7.1.3・PHP 8.3）で、試しのカテゴリーを作り、前のコードと新しいコードを比べました（確かめたあと、カテゴリーと作られたデータは消しました）。

前のコードから入れ替えるとき

前のコードは消してから、新しいコードを入れます。両方を残すと、前のコードの保存もいっしょに動いてしまいます。

前のコードで決めた色は、新しいコードでもそのまま表示されます。カテゴリーの編集画面で一度保存すると、色がタームメタに移ります。テンプレートの the_category_color_btn( $post->ID ) は fs_the_category_color_buttons( $post->ID ) に書き換えます。

• {$taxonomy}_add_form_fields（category_add_form_fields）
• {$taxonomy}_edit_form_fields（category_edit_form_fields）
• created_{$taxonomy}（created_category）
• edited_{$taxonomy}（edited_category）
• register_term_meta()
• sanitize_hex_color()