タグクラウドを分類し一覧表示する方法

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

// ショートコードを追加
add_shortcode('my_tag_list', function ($atts) {
  $atts = shortcode_atts([
    'file'       => '',
    'show_count' => 0,
  ], $atts);

  if (empty($atts['file'])) {
    return '<p>ファイル名が指定されていません。</p>';
  }

  $csv_data = [];
  read_tag_csv($atts['file'], $csv_data);

  if (empty($csv_data)) {
    return '<p>指定されたファイルが読み込めません。</p>';
  }

  $all_groups = [];
  group_tag_data($csv_data, $all_groups);

  if (empty($all_groups)) {
    return '';
  }

  ob_start();
  ?>
  <div class="tag-group">
    <?php foreach ($all_groups as $group): ?>
      <?php if (!empty($group['tags'])): ?>
        <div>
          <p class="tag-title"><?php echo esc_html($group['title']); ?></p>

          <div class="tagcloud widget_tag_cloud">
            <?php foreach ($group['tags'] as $tag_term): ?>
              <?php
              $tag_link = get_tag_link($tag_term->term_id);

              if (!$tag_link) {
                continue;
              }
              ?>
              <a href="<?php echo esc_url($tag_link); ?>" class="tag-cloud-link">
                <span class="tag-caption">
                  <span class="fas fa-tag tax-icon" aria-hidden="true"></span>
                  <?php echo esc_html($tag_term->name); ?>
                </span>

                <?php if ($atts['show_count']): ?>
                  <span class="tag-link-count"><?php echo esc_html($tag_term->count); ?></span>
                <?php endif; ?>
              </a>
            <?php endforeach; ?>
          </div>
        </div>
      <?php endif; ?>
    <?php endforeach; ?>
  </div>
  <?php
  return ob_get_clean();
});


/**
 * テーマ内の指定CSVファイルを読み込み、行ごとの配列データを生成
 *
 * @param string $file 読み込むCSVファイル名（拡張子除く）
 * @param array  &$csv_data 読み込んだCSVデータを格納する配列
 * @return void
 */
if (!function_exists('read_tag_csv')):
function read_tag_csv($file, &$csv_data) {
  global $wp_filesystem;

  $csv_data = [];

  // WP_Filesystemを初期化
  if (empty($wp_filesystem)) {
    require_once ABSPATH . 'wp-admin/includes/file.php';
    WP_Filesystem();
  }

  $file_path = get_stylesheet_directory() . '/csv/' . $file . '.csv';

  if (!$wp_filesystem->exists($file_path)) {
    return;
  }

  $csv_content = $wp_filesystem->get_contents($file_path);

  if ($csv_content === false) {
    return;
  }

  // CSVを1行ずつ配列に保存
  $lines = preg_split('/\r\n|\r|\n/', $csv_content);

  foreach ($lines as $line) {
    if (trim($line) === '') {
      continue;
    }

    $csv_data[] = str_getcsv($line);
  }
}
endif;


/**
 * CSVの行データと既存の投稿タグを突き合わせ、タイトルごとにグループ化
 *
 * @param array $csv_data CSVの行データ配列
 * @param array &$all_groups グループ化されたタグ情報を格納する配列
 * @return void
 */
if (!function_exists('group_tag_data')):
function group_tag_data($csv_data, &$all_groups) {
  $all_groups = [];

  // 既存の投稿タグを取得
  $all_tags = get_terms([
    'taxonomy'   => 'post_tag',
    'hide_empty' => false,
  ]);

  if (is_wp_error($all_tags)) {
    return;
  }

  // タグ名をキーにした連想配列
  $tag_map = [];

  foreach ($all_tags as $tag) {
    $tag_map[$tag->name] = $tag;
  }

  $current_title = '';
  $current_tags  = [];

  // CSVデータをグループ化
  foreach ($csv_data as $data) {
    if (!empty($data[0])) {
      // 直前のグループを保存
      if ($current_title !== '') {
        $all_groups[] = [
          'title' => $current_title,
          'tags'  => $current_tags,
        ];
      }

      $current_title = $data[0];
      $current_tags  = [];

      continue;
    }

    if (!empty($data[1])) {
      $tag_name = $data[1];

      if (isset($tag_map[$tag_name])) {
        $current_tags[] = $tag_map[$tag_name];
      }
    }
  }

  // 最後のグループを保存
  if ($current_title !== '') {
    $all_groups[] = [
      'title' => $current_title,
      'tags'  => $current_tags,
    ];
  }
}
endif;


// フロント用JS・CSSを追加
add_action('wp_enqueue_scripts', function () {
  ob_start();
  ?>
  .tag-group {
    display: grid;
    gap: 15px;

    .tag-title {
      font-weight: bold;
      margin-bottom: 5px;
    }
  }
  <?php

  $handle = 'custom-tag-group';

  wp_register_style($handle, false);
  wp_enqueue_style($handle);
  wp_add_inline_style($handle, ob_get_clean());
});

以下にCSVファイルの例を示します。
CSVファイルに定義したクラウドタグのみが一覧表示されます。
1カラム目に見出し、2カラム目にタグ名を入力します。

コーヒー,
,アメリカ
,イエメン
,インド
ショップ,
,LIGHT UP COFFEE
,神楽珈琲
,珈琲問屋

子テーマ内に「csv」というフォルダを作成し、その中にCSVファイルを配置します。

• cocoon-child-master
  • csv
    • ファイル名.csv（UTF-8形式）