【WordPress】
SCFのカラーピッカーでカテゴリーごとに色を変える方法。
実務で使える「壊れない」実装コード
公開日
Web制作の現場でよくある「カテゴリーごとにラベルの色を変えたい」という要望。CSSのクラスを分けるのも手ですが、運用を考えると管理画面からクライアントが自由に変更できるようにするのがベストです。
今回は、Smart Custom Fields（SCF）のカラーピッカーを使って、動的に背景色を反映させる実装方法を詳しく解説します。
ここがポイント！
投稿画面ではなく、「カテゴリー（タクソノミー）の編集画面」にフィールドを追加することで、一度の設定でそのカテゴリーに属する全記事に色が反映されます。効率的な運用には欠かせない設定です。
STEP1：SCFでカラーピッカーを設定する
まずはSCFの設定画面で、以下の通りフィールドを作成します。
- タイプ：カラーピッカー
- 名前：color（※PHPで取得する際に使用します）
- 表示条件（右側）：タクソノミー ＞ カテゴリー にチェック
これで、投稿カテゴリーの編集画面にカラーピッカーが出現します。
STEP2：テンプレートに出力するコード（PHP）
カテゴリーのメタ情報を取得するため、SCF::get_term_meta を使用します。未設定時の「デフォルトカラー」を指定しておくのが、実務でサイトを壊さないコツです。
<?php
$categories = get_the_category();
$category = ! empty( $categories ) ? $categories[0] : null;
if ( $category ) {
$cat_name = esc_html( $category->name );
// SCFから「カテゴリー編集画面」の設定値を取得
$scf_color = SCF::get_term_meta( $category->term_id, 'category', 'color' );
// カラーピッカーが未設定の場合のデフォルト色
$default_color = '#C6B18A';
$final_color = ! empty( $scf_color ) ? $scf_color : $default_color;
// style属性として出力
echo '<p class="latest_cat" style="background-color: ' . esc_attr( $final_color ) . ';">' . $cat_name . '</p>';
}
?>プロの助言
esc_attr() を使って色コードをエスケープすることを忘れないでください。また、!empty() で判定することで、万が一SCFが値を返さない時でもPHPの警告（Notice）が出るのを防いでいます。
まとめ：クライアントも扱いやすい親切な設計を
コードを直接触らなくても管理画面から色を変えられる仕組みは、クライアントに非常に喜ばれます。今回紹介した「デフォルトカラー付き」の実装なら、設定漏れがあってもデザインが崩れないので安心です。