【Cocoonカスタマイズ】カテゴリー色をクイック編集から設定し一覧で確認できるようにする方法

はじめに
目的
完成イメージ
実装手順
さいごに

はじめに

Cocoonには、カテゴリーごとにラベルの背景色や文字色を設定する機能があります。

以下の記事では、カテゴリー一覧にカスタムフィールドを表示しクイック編集可能にする方法を紹介しました。

「Cocoonのカテゴリー一覧でメタディスクリプションを編集する方法」を解説。カテゴリー一覧にメタディスクリプションのカラムを追加し、クイック編集から直接編集する方法や、投稿一覧への表示・編集、フォームの配置をJavaScriptで調整する方法を分かりやすく紹介します。

そこで今回は、カテゴリーラベルの背景色と文字色を「クイック編集」から直接変更できるようにします。
さらに、設定した配色の確認用ラベルを一覧画面のカラムに表示するカスタマイズを行います。

この記事では、この方法について説明します。

目的

Cocoonの標準機能でもカテゴリーラベルの色変更は可能ですが、運用上で以下の2つの課題があります。

個別編集画面を開く手間がかかる
色を変更・微調整するたびにカテゴリーの個別編集画面へ移動する必要があり、複数のカテゴリーを連続で作業する際に手間がかかります。

配色の視認性（可読性）をすぐに確認できない
設定した背景色と文字色の組み合わせが読みやすいかどうかを、一覧画面の段階で即座に確認することができません。

今回紹介するコードを導入すれば、カテゴリー一覧画面から「クイック編集」でサクサク色を変更でき、さらに一覧内に実際のデザインに近いラベルサンプルが表示されるため、配色の確認も一目で完了します。

完成イメージ

実装手順

以下のコードをfunctions.phpに追加します。

// 管理画面一覧にカラムを追加
add_filter('manage_edit-category_columns', function ($columns) {
  $columns['category_color'] = '色';

  return $columns;
});


// 管理画面一覧のカラムにデータを表示
add_action('manage_category_custom_column', function ($content, $column_name, $cat_id) {
  if ($column_name !== 'category_color') {
    return $content;
  }

  // カテゴリーの背景色を取得
  $bg_color = get_the_category_color($cat_id);

  // カテゴリーの文字色を取得
  $text_color = get_the_category_text_color($cat_id);

  // クイック編集JavaScript用のデータ属性を設定
  $data_attr = 'class="category-color-data category-color-badge" data-bg-color="' . esc_attr($bg_color) . '" data-text-color="' . esc_attr($text_color) . '"';

  if (empty($bg_color) && empty($text_color)) {
    return '<span ' . $data_attr . '>－</span>';
  }

  $label = 'ラベル';
  $text_color = !empty($text_color) ? $text_color : '#fff';
  $bg_color   = !empty($bg_color)   ? $bg_color   : 'transparent';

  $style = '--badge-bg:' . esc_attr($bg_color) . ';--badge-color:' . esc_attr($text_color) . ';';

  return '<span ' . $data_attr . ' style="' . $style . '">' . esc_html($label) . '</span>';
}, 10, 3);


// クイック編集画面にカスタムフィールドを追加
add_action('quick_edit_custom_box', function ($column_name, $screen, $taxonomy) {
  if ($taxonomy !== 'category' || $column_name !== 'category_color') {
    return;
  }

  wp_nonce_field('save_category_color_quick_edit', 'category_color_quick_edit_nonce');
  ?>
  <!-- クイック編集の入力エリア構造を出力 -->
  <fieldset class="inline-edit-col-left clear">
    <div class="inline-edit-col">
      <div class="category-color-quick-edit-wrap">
        <div class="category-color-item">
          <span class="title">背景色</span>
          <div class="input-wrap">
            <input type="text" name="the_category_color" class="category-color-picker" value="" />
          </div>
        </div>
        <div class="category-color-item">
          <span class="title">文字色</span>
          <div class="input-wrap">
            <input type="text" name="the_category_text_color" class="category-text-color-picker" value="" />
          </div>
        </div>
      </div>
    </div>
  </fieldset>
  <?php
}, 10, 3);


// 管理画面用JS・CSSを追加
add_action('admin_enqueue_scripts', function ($hook) {
  if ($hook !== 'edit-tags.php') {
    return;
  }

  ob_start();
  ?>
  .category-color-badge {
    background-color: var(--badge-bg, transparent);
    border-radius: 4px;
    color: var(--badge-color, #fff);
    display: inline-block;
    font-size: 12px;
    padding: 4px 10px;
  }

  .category-color-quick-edit-wrap {
    display: flex;
    gap: 20px;
    margin-top: 8px;
    margin-bottom: 8px;
  }

  .category-color-item {
    align-items: flex-start;
    display: flex;
    flex-direction: column;

    &:has(.wp-picker-open) .wp-picker-input-wrap {
      align-items: flex-start;
      display: inline-flex;

      label {
        margin: 0;
      }
    }

    .title {
      display: block;
      margin-bottom: 4px;
      padding: 0;
    }

    .wp-picker-container {
      display: inline-block;
    }
  }
  <?php

  $handle = 'wp-color-picker';

  wp_enqueue_style($handle);
  wp_enqueue_script($handle);
  wp_add_inline_style($handle, ob_get_clean());

  ob_start();
  ?>
  jQuery(document).ready(function ($) {
    $('#the-list').on('click', 'button.editinline', function() {
      var $tr = $(this).closest('tr');

      // ID文字列の接頭辞を置換してカテゴリーIDを取得
      var catId = $tr.attr('id').replace('tag-', '');

      // データ属性から背景色コードを取得
      var bgColor = $tr.find('.category-color-data').data('bg-color') || '';

      // データ属性から文字色コードを取得
      var textColor = $tr.find('.category-color-data').data('text-color') || '';

      // 対象カテゴリーの編集用行要素を取得
      var $editRow = $('#edit-' + catId);

      // 背景色入力用input要素を取得
      var $bgInput = $editRow.find('input[name="the_category_color"]');

      // 文字色入力用input要素を取得
      var $textInput = $editRow.find('input[name="the_category_text_color"]');

      // 背景色input要素の値を変更
      $bgInput.val(bgColor);

      // 文字色input要素の値を変更
      $textInput.val(textColor);

      // 背景色カラーピッカーを設定
      if ($bgInput.hasClass('wp-color-picker')) {
        // カラーピッカーの色変更
        $bgInput.wpColorPicker('color', bgColor);
      } else {
        // 背景色カラーピッカーの初期化
        $bgInput.wpColorPicker();
      }

      // 文字色カラーピッカーを設定
      if ($textInput.hasClass('wp-color-picker')) {
        // カラーピッカーの色変更
        $textInput.wpColorPicker('color', textColor);
      } else {
        // 文字色カラーピッカーの初期化
        $textInput.wpColorPicker();
      }
    });
  });
  <?php
  wp_add_inline_script($handle, ob_get_clean());
});


// カテゴリー編集の設定を保存
add_action('edited_category', function ($term_id) {
  // nonceチェック
  if (!isset($_POST['category_color_quick_edit_nonce']) || !wp_verify_nonce($_POST['category_color_quick_edit_nonce'], 'save_category_color_quick_edit')) {
    return;
  }

  if (isset($_POST['the_category_color'])) {
    update_term_meta($term_id, 'the_category_color', sanitize_hex_color($_POST['the_category_color']));
  }

  if (isset($_POST['the_category_text_color'])) {
    update_term_meta($term_id, 'the_category_text_color', sanitize_hex_color($_POST['the_category_text_color']));
  }
});

さいごに

今回紹介した方法を使えば、カテゴリー個別の編集画面に都度移動することなく、一覧画面のクイック編集から背景色と文字色をスムーズに設定・更新できるようになります。

また、一覧画面上に設定色を反映した「ラベル」バッジが表示されるため、視認性や可読性の確認もその場で行えて作業効率が大幅に向上します。Cocoonでカテゴリーラベルの色を細かく整えたい場合に、ぜひ活用してみてください。