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

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

add_shortcode('my_tag_list', function($atts) {
  global $wp_filesystem;

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

  $atts = shortcode_atts([
    'file'       => '',
    'show_count' => 0,
  ], $atts);

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

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

  if (!$wp_filesystem->exists($file_path)) {
    return '<p>指定されたファイルが見つかりません。</p>';
  }

  $csv_content = $wp_filesystem->get_contents($file_path);
  if ($csv_content === false) {
    return '<p>指定されたファイルが読み込めません。</p>';
  }

  $output = '';
  $title = '';
  $tags_list = '';

// 見出しとタグリストを出力する関数
  $output_tag_group = function (&$output, $title, $tags_list) {
    if (!empty($title) && !empty($tags_list)) {
      $title = esc_html($title);
      $output .= <<<EOF
<div>
  <p class="tag-title">{$title}</p>
  <div class="tagcloud widget_tag_cloud">{$tags_list}</div>
</div>

EOF;
    }
  };

  // 行単位でCSVを処理
  $lines = explode("\n", $csv_content);
  foreach ($lines as $line) {
    if (trim($line) === '') continue;

    $data = str_getcsv($line);

    if (!empty($data[0])) {
      // 新しい見出しがある場合
      $output_tag_group($output, $title, $tags_list);
      $title = $data[0];
      $tags_list = '';
    } elseif (!empty($data[1])) {
      $tag_name = esc_html($data[1]);
      $tag_term = get_term_by('name', $tag_name, 'post_tag');

      if ($tag_term) {
        $tag_link = get_tag_link($tag_term->term_id);
        if ($tag_link) {
          $escaped_tag_name  = $tag_name;
          $escaped_tag_link  = esc_url($tag_link);
          $escaped_tag_count = esc_html($tag_term->count);

          $count_html = '';
          if ($atts['show_count']) {
            $count_html = <<<EOF
<span class="tag-link-count">{$escaped_tag_count}</span>
EOF;
          }

          $tags_list .= <<<EOF
<a href="{$escaped_tag_link}" class="tag-cloud-link">
  <span class="tag-caption">
    <span class="fas fa-tag tax-icon" aria-hidden="true"></span>{$escaped_tag_name}
  </span>
  {$count_html}
</a>

EOF;
        }
      }
    }
  }

  // 最後の見出しの出力
  $output_tag_group($output, $title, $tags_list);

  return '<div class="tag-group">' . $output . '</div>';
});

以下のコードをstyle.cssに追加します。

.tag-group {
  display: grid;
  gap: 15px;
}

/* 見出し */
.tag-title {
  font-weight: bold;
  margin-bottom: 5px; 
}

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

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

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

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