投稿に対して設定するカテゴリーの色を管理画面で指定できるコード。
なお、練習のために作成したものですので、更新予定はありません。
function.phpに追記して使用します。
<?php
// カテゴリー新規作成画面
add_action('category_add_form_fields', 'ccm_add_color_fields');
function ccm_add_color_fields() {
?>
<div class="form-field term-color-wrap">
<label for="term-bg-color">背景色</label>
<input type="text" name="term-bg-color" value="#cccccc" class="color-picker" data-default-color="#cccccc" />
<p class="description">背景色を選択するか、カラーコードを入力してください。</p>
</div>
<div class="form-field term-text-color-wrap">
<label for="term-text-color">文字色</label>
<input type="text" name="term-text-color" value="#232220" class="color-picker" data-default-color="#232220" />
<p class="description">文字色を選択するか、カラーコードを入力してください。</p>
</div>
<?php
}
// カテゴリー編集画面
add_action('category_edit_form_fields', 'ccm_edit_color_fields');
function ccm_edit_color_fields($term) {
$bg_color = get_term_meta($term->term_id, 'category_color', true);
$text_color = get_term_meta($term->term_id, 'category_text_color', true);
?>
<tr class="form-field term-color-wrap">
<th scope="row"><label for="term-bg-color">背景色</label></th>
<td>
<input type="text" name="term-bg-color" value="<?php echo esc_attr($bg_color ?: '#c96421'); ?>" class="color-picker" data-default-color="#c96421" />
<p class="description">背景色を選択</p>
</td>
</tr>
<tr class="form-field term-text-color-wrap">
<th scope="row"><label for="term-text-color">文字色</label></th>
<td>
<input type="text" name="term-text-color" value="<?php echo esc_attr($text_color ?: '#232220'); ?>" class="color-picker" data-default-color="#232220" />
<p class="description">文字色を選択</p>
</td>
</tr>
<?php
}
// 保存処理
add_action('created_category', 'ccm_save_color_meta');
add_action('edited_category', 'ccm_save_color_meta');
function ccm_save_color_meta($term_id) {
if (isset($_POST['term-bg-color'])) {
update_term_meta($term_id, 'category_color', sanitize_hex_color($_POST['term-bg-color']));
}
if (isset($_POST['term-text-color'])) {
update_term_meta($term_id, 'category_text_color', sanitize_hex_color($_POST['term-text-color']));
}
}
// 管理画面でカラーピッカーJSを有効化
add_action('admin_enqueue_scripts', function($hook_suffix) {
if (in_array($hook_suffix, ['edit-tags.php', 'term.php'])) {
wp_enqueue_style('wp-color-picker');
wp_enqueue_script('wp-color-picker');
add_action('admin_footer', function() {
echo '<script>jQuery(function($){$(".color-picker").wpColorPicker();});</script>';
});
}
});