Blog

2024年2月21日

WordPress 管理画面のカテゴリー編集画面に、カスタムフィールドのような項目を増やす方法

管理画面のカテゴリー編集画面とは、下記の画面のことです。

カテゴリー追加画面

カテゴリー編集画面

一番簡単な方法は、Advanced Custom Fieldsプラグインを使うことです。
PROじゃなくても、無料版でOKです。

Advanced Custom Fieldsを使っていない場合に、カテゴリー編集画面にカスタムフィールドのような項目をfunctions.phpで追加する方法を紹介します。

functions.phpに追加する

カスタムフィールドのような…というのは、オプションを使っているからです。

//wp-admin/edit-tags.php?taxonomy=categoryにフィールドを作る
add_action( 'category_add_form_fields', 'category_add_form_fields' );
function category_add_form_fields() {
  $default_color = '#000000';
  $default_color_name = '';
  $html = '
  <div class="form-field">
    <label for="term_meta[category_color]">カテゴリー色</label>
    <input type="color" name="term_meta[category_color]" id="term_meta[category_color]" size="3" style="width:50px;" value="'.$default_color.'">    
  </div>
  <div class="form-field">
    <label for="term_meta[category_color_name]">色名</label>
    <input type="text" name="term_meta[category_color_name]" id="term_meta[category_color_name]" value="'.$default_color_name.'">
  </div>
  ';
  echo $html;
}

//wp-admin/term.php?taxonomy=categoryにフィールドを作る
add_action( 'category_edit_form_fields', 'category_edit_form_fields' );
function category_edit_form_fields( $tag ) {
  $term_id = $tag->term_id;
  $term_meta = get_option( "taxonomy_$term_id" );
  $term_meta['category_color'] = isset($term_meta['category_color']) ? $term_meta['category_color'] : '';
  $term_meta['category_color_name'] = isset($term_meta['category_color_name']) ? $term_meta['category_color_name'] : '';
  $html = '
  <tr class="form-field">
    <th scope="row" valign="top"><label for="term_meta[category_color]">カテゴリー色</label></th>
    <td>
      <input type="color" name="term_meta[category_color]" id="term_meta[category_color]" size="3" style="width:50px;" value="'.esc_attr( $term_meta['category_color'] ).'">     
    </td>
  </tr>
  <tr class="form-field">
    <th scope="row" valign="top"><label for="term_meta[category_color_name]">色名</label></th>
    <td>
      <input type="text" name="term_meta[category_color_name]" id="term_meta[category_color_name]" value="'.esc_attr( $term_meta['category_color_name'] ).'">
    </td>
  </tr>
  ';
  echo $html;
}

//追加した項目を保存
add_action( 'edited_category', 'save_taxonomy_custom_meta', 10, 2 );
add_action( 'created_category', 'save_taxonomy_custom_meta', 10, 2 );
function save_taxonomy_custom_meta( $term_id ) {
  if ( isset( $_POST['term_meta'] ) ) {
    $t_id = $term_id;
    $term_meta = get_option( "taxonomy_$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( "taxonomy_$t_id", $term_meta );
  }
}

表示箇所

テンプレートで表示する箇所のコード例です。

<section class="categories">
    <h2>カテゴリー一覧</h2>
    <ul>
      <?php
        $categories = get_categories();
        foreach($categories as $category) :
          $catname = '';
          $category_color = '';
          $category_color_name = '';
          if($category){
            $catname = $category->cat_name;
            //追加項目の取得
            $category_id = get_cat_ID($catname);
            $term_meta = get_option("taxonomy_$category_id");
            $category_color = isset($term_meta['category_color']) ? $term_meta['category_color'] : '';
            $category_color_name = isset($term_meta['category_color_name']) ? $term_meta['category_color_name'] : '';
          }
      ?>
      <li style="--bgColor:<?= $category_color ?>;"><?= $catname ?>
        <?php if($category_color_name) : ?>
        <span class="text-s"><?= $category_color_name ?></span>
        <?php endif; ?>
      </li>
      <?php endforeach; ?>
    </ul>
  </section>

色コードをCSS変数で渡しています。CSS側でbackground-color: var(--bgColor);を設定します。

カテゴリーごとに色のデータをもたせて、色を変えることができました。