PHPでCSVデータをCocoonテーマ（WordPress）で使えるHTMLテーブルに変換対応

Chillax Style | チラックススタイルのサイト内にて実際に活用している例として、200超のCSVデータをCocoonテーマ（WordPress）で使えるHTMLテーブルに変換している箇所は以下となります。

意外と知らない読書数の話

Chillax Style | チラックススタイル 意外と知らない読書数の話 コロナ禍以降の読書記録からの七祥 タケヤ（Takeya Nanasho）読書統計 日本人が半年に読む冊数平均 コロナ禍以降の読書記録からの七祥 タケヤ（Takeya Nanasho）読書記録

chillaxstyle.com

2026.02.06

意外と知らない47都道府県B級グルメの話

Chillax Style | チラックススタイル 意外と知らない47都道府県B級グルメの話 意外と知らない47都道府県B級グルメの話どころか、全く知らない47都道府県B級グルメの話 コロナ禍の頃にチラックススタイル管理人 七祥 タケヤ（Takeya Nanasho）は自炊47都道府県B級グルメで47都道府県旅行を達成 47都道府県B級グルメの概念 47都道府県B級グルメ一覧

chillaxstyle.com

2026.02.06

大量のデータをテーブルで扱う場合に便利なCSVファイルの内容をPHPで読み込み、Cocoonテーマ（WordPress）で使えるHTMLテーブルに変換して出力するPHPプログラムとなります。

車輪の再発明なのですが…まぁWordPressショートコードの勉強になりました。

public_html/wp-content/themes/cocoon-child-master/function.php

下記コードを子テーマのfunctions.phpに追記します。

//【Cocoon】CSV TO Cocoon TABLE start
/**
 * CSVファイルを読み込み、HTMLテーブルとして出力する
 * Cocoonテーマの記事内にショートコードで埋め込み可能
 * 例: [csv_table file="sample.csv"]
 */

function csv_to_html_table($atts) {
	// ショートコード属性の初期値
	$atts = shortcode_atts(
		array(
			'file' => '', // CSVファイル名（wp-content/uploads/Y/m/ 直下）
			'yyyymm' => '', // 年月フォルダ（Y/m/：2026/02/）
		),
		$atts,
		'csv_table'
	);

	// ファイルパスを決定（WordPressのアップロードディレクトリ）
	$upload_dir = wp_upload_dir();
	$csv_path = trailingslashit($upload_dir['basedir']) . $atts['yyyymm'] . $atts['file'];

	// ファイル存在チェック
	if (!file_exists($csv_path)) {
		return '<p style="color:red;">CSV CAN NOT FIND: ' . esc_html($atts['file']) . '</p>';
	}

	// CSV読み込み
	$rows = [];
	if (($handle = fopen($csv_path, "r")) !== false) {
		while (($data = fgetcsv($handle)) !== false) {
			// 文字コード変換（Shift-JIS → UTF-8）
			foreach ($data as &$value) {
				$value = mb_convert_encoding($value, 'UTF-8', 'SJIS-win');
			}
			$rows[] = $data;
		}
		fclose($handle);
	} else {
		return '<p style="color:red;">CSV CAN NOT OPEN</p>';
	}

	// HTMLテーブル生成
	$html = '<table class="cocoon-table" border="1" cellpadding="5" cellspacing="0">';
	foreach ($rows as $i => $row) {
		$html .= '<tr>';
		foreach ($row as $cell) {
			if ($i === 0) {
				// 1行目はヘッダー
				$html .= '<th>' . esc_html($cell) . '</th>';
			} else {
				$html .= '<td>' . esc_html($cell) . '</td>';
			}
		}
		$html .= '</tr>';
	}
	$html .= '</table>';

	return $html;
}

// ショートコード登録
add_shortcode('csv_table', 'csv_to_html_table');
//【Cocoon】CSV TO Cocoon TABLE end

functions.php追記対応後に、

WordPress管理画面 → メディア → CSVファイルをアップロード（例: sample.csv）。

ページ側のショートコードブロックに以下の様にCSVファイル名と年月フォルダ名を記述します。

[csv_table file="sample.csv" yyyymm=”2026/02/”]

プレビュー及び公開時にCocoonテーマのスタイルが適用されたテーブルが表示されます。

※文字化けした場合はCSVファイルの文字コードをSJISに指定してみて下さい

Google スプレッドシートでCSVファイルを作成する方法

EXCELだと「名前を付けて保存」にてCSVファイルへ変換するので、一瞬少し悩んでしまいますが、メニュー「ファイル」→ダウンロード→カンマ区切り形式（.csv）にてCSVファイルへ変換が可能です。