「カテゴリー」ウィジェットでカスタムタクソノミーのターム一覧を表示させる方法

はじめに

WordPressのタグクラウドウィジェットでは、カスタムタクソノミーを選択することができます。
しかし、カスタムタクソノミーは「タグ」として分類され、デフォルトではカテゴリーウィジェットのようなドロップダウン表示はありません（図1参照）。

そこでカテゴリーウィジェットにも、タグクラウドウィジェットと同様にタクソノミーを選択できる機能を追加します。
この記事では、この方法について説明します。

完成イメージ

実装手順

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

// ウィジェットに独自オプションを追加
add_action('in_widget_form', function($widget, $return, $instance) {
  if ($widget->id_base === 'categories') {
    $taxonomy   = !empty($instance['taxonomy']) ? $instance['taxonomy'] : 'category';

    // ターム情報を取得
    $taxonomies = get_taxonomies(['public' => true, 'show_ui' => true], 'names');

    ?>
    <p>
      <label for="<?php echo esc_attr($widget->get_field_id('taxonomy')); ?>">タクソノミー:</label>
      <select id="<?php echo esc_attr($widget->get_field_id('taxonomy')); ?>" name="<?php echo esc_attr($widget->get_field_name('taxonomy')); ?>" class="postform custom-taxonomy-dropdown" data-taxonomy="<?php echo esc_attr($taxonomy); ?>"> 
      <?php foreach ($taxonomies as $value) : ?>
        <option value="<?php echo esc_attr($value); ?>" <?php selected($taxonomy, $value); ?>>
          <?php echo esc_html(get_taxonomy($value)->label); ?>
        </option>
      <?php endforeach; ?>
      </select>
    </p>
    <?php
  }
}, 10, 3);


// オプションの値を更新
add_filter('widget_update_callback', function($instance, $new_instance, $old_instance) {
  if (isset($new_instance['taxonomy'])) {
    $taxonomies = get_taxonomies(['public' => true, 'show_ui' => true], 'names');
    if (in_array($new_instance['taxonomy'], $taxonomies)) {
      $instance['taxonomy'] = sanitize_text_field($new_instance['taxonomy']);
    }
  }
    return $instance;
}, 10, 3);


// オプションを反映
add_filter('widget_categories_args', function($args, $instance) {
  if (!empty($instance['taxonomy'])) {
    $args['taxonomy'] = $instance['taxonomy'];
  }
  return $args;
}, 10, 2);


add_filter('widget_categories_dropdown_args', function($args, $instance) {
  if (!empty($instance['taxonomy'])) {
    $taxonomy = $instance['taxonomy'];
    $args['taxonomy'] = $taxonomy;

    if ($taxonomy !== 'category') {
      $current_term = get_queried_object();
      $args['id'] = $taxonomy;
      $args['value_field'] = 'slug';

      if ($current_term && isset($current_term->slug)) {
        $args['selected'] = $current_term->slug;
      }
    }
  }
  return $args;
}, 10, 2);


// ドロップダウンメニューを表示
add_filter('wp_dropdown_cats', function($output) {
  if (preg_match('/<select[^>]*id=\'([^\']+)\'/', $output, $matches)) {
    $home_url = home_url();

    $output = preg_replace(
      '/<select([^>]+)>/',
      '<select$1 onchange="if (this.value && this.value !== \'-1\') { window.location.href = \'' . $home_url . '/\' + this.id + \'/\' + this.value + \'/\'; }">',
      $output
    );
  }
  return $output;
});

独自の「カテゴリー」ショートコードで表示する方法

カテゴリーウィジェットと同様の形式でカテゴリーやカスタムタクソノミーを表示するショートコードを実装します。
また、カテゴリーウィジェットとは異なり、特定のカテゴリーやタームを除外することができます。

使用方法

以下にショートコードを示します。

[my_category]

オプション	説明	値	初期値
exclude	除外カテゴリー	カテゴリーIDをカンマ区切りで指定
dropdown	ドロップダウンで表示	0=非表示 / 1=表示	0
hierarchical	階層を表示	0=非表示 / 1=表示	0
show_count	投稿数を表示	0=非表示 / 1=表示	0
taxonomy	カクソノミー		category

実装手順

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

add_shortcode('my_category', function($atts) {
  $atts = shortcode_atts([
    'exclude'      => '',         // 除外するタームID（カンマ区切り）
    'dropdown'     => 0,          // ドロップダウン形式
    'hierarchical' => 0,          // 階層を表示
    'show_count'   => 0,          // 投稿数を表示
    'taxonomy'     => 'category', // デフォルトは通常のカテゴリー
  ], $atts);

  // 現在のタームを取得
  $queried_object = get_queried_object();
  $current_term_slug = '';

  if ($queried_object && isset($queried_object->slug)) {
    if ($queried_object->taxonomy === $atts['taxonomy']) {
        $current_term_slug = $queried_object->slug;
    }
  }

  $args = [
    'taxonomy'        => $atts['taxonomy'],
    'exclude'         => $atts['exclude'],
    'hierarchical'    => $atts['hierarchical'],
    'show_count'      => $atts['show_count'],
    'id'              => 'my-cat',
    'order'           => 'ASC',
    'orderby'         => 'name',
    'selected'        => $current_term_slug,
    'show_option_none'=> '選択してください',
    'title_li'        => '',
    'value_field'     => 'slug',
  ];

  if ($atts['dropdown']) {
    // ドロップダウン形式
    ?>
    <?php wp_dropdown_categories($args); ?>
    <script>
      document.getElementById("my-cat").addEventListener("change", function() {
        var selectedSlug = this.value;
        if (selectedSlug) {
          window.location.href = "<?php echo esc_url(home_url('/')); ?>" + "<?php echo esc_attr($atts['taxonomy']); ?>/" + selectedSlug + "/";
        }
      });
    </script>
    <?php
  } else {
    // リスト形式
    ?>
    <div class="widget_categories">
      <ul>
        <?php wp_list_categories($args); ?>
      </ul>
    </div>
    <?php
  }
});

さいごに

今回紹介した方法を使えば、カテゴリーウィジェットにカスタムタクソノミーのターム一覧を表示させることができます。
また、ショートコードを活用することで、特定のカテゴリーを除外したり、柔軟にカテゴリー表示をカスタマイズすることができ、サイトの使いやすさが向上します。