子テーマ内のCSVファイルを読み込む方法

はじめに

WordPressの子テーマに配置したCSVファイルを読み込み、JavaScript（jQuery）とPHPを活用してデータを取得・表示します。

この記事では、この方法について説明します。

JavaScriptで実装する場合

以下にコード例を示します。

jQuery(function ($) {
  // CSVファイルを取得して配列に変換
  function csvToArray(filename) {
    // XMLHttpRequestオブジェクトを生成して同期通信でファイルをリクエスト
    let srt = new XMLHttpRequest();
    srt.open("GET", filename, false);
    
    try {
      srt.send(null);
    } catch (err) {
      console.log(err);
      return [];
    }

    // レスポンステキストを改行で分割
    let csletr = [];
    let lines = srt.responseText.split(/\r?\n/);

    // 各行をカンマで分割して配列に格納
    for (let i = 0; i < lines.length; i++) {
      let cells = lines[i].split(',');
      if (cells.filter(c => c.trim() !== '').length > 1) {
        csletr.push(cells);
      }
    }
    
    return csletr;
  }

  // CSVファイルを取得してコンソールに出力
  let csvData = csvToArray('/wp-content/themes/cocoon-child-master/test.csv');
  console.log(csvData);
});

補足

a1,b1
a2,b2

上記のCSVファイルを取得した場合、以下のように配列として格納されます。

[
 ["a1","b1"],
 ["a2","b2"]
]

PHPで実装する場合

add_shortcode('my_test', function ($atts) {
  // 子テーマのディレクトリを基準にCSVファイルのパスを取得
  $csv_file_path = get_stylesheet_directory() . '/test.csv';

  // CSVファイルが存在しない場合は終了
  if (!file_exists($csv_file_path)) {
    return '';
  }

  // CSV読み込みと空行スキップを設定
  $file = new SplFileObject($csv_file_path);
  $file->setFlags(SplFileObject::READ_CSV | SplFileObject::SKIP_EMPTY);

  // データ格納用の配列を初期化
  $data = [];

  // CSVの各行を取得
  foreach ($file as $line) {
    // 2列以上ある行を連想配列として追加
    if (is_array($line) && count($line) >= 2) {
      $data[] = [
        'a' => $line[0],
        'b' => $line[1],
      ];
    }
  }

  // 現時点では処理結果の出力を控えるため空文字を返却
  return '';
});

add_shortcode('my_test', function ($atts) {
  // WP_Filesystemを初期化
  global $wp_filesystem;

  // ファイルシステムが初期化されていない場合はインクルードして初期化を実行
  if (empty($wp_filesystem)) {
    require_once ABSPATH . 'wp-admin/includes/file.php';
    WP_Filesystem();
  }

  // CSVファイルのパスを取得
  $csv_file_path = get_stylesheet_directory() . '/test.csv';

  // CSVファイルの存在を確認
  if (!$wp_filesystem->exists($csv_file_path)) {
    return '';
  }

  // CSVファイルの内容を取得
  $csv_content = $wp_filesystem->get_contents($csv_file_path);

  // 行ごとに分割して空行と前後の空白を除去
  $lines = array_filter(array_map('trim', explode("\n", $csv_content)));

  // データ格納用の配列を初期化
  $data = [];

  // 各行をCSVとしてパース
  foreach ($lines as $line) {
    $fields = str_getcsv($line);

    // 2列以上ある行を連想配列として追加
    if (count($fields) >= 2) {
      $data[] = [
        'a' => $fields[0],
        'b' => $fields[1],
      ];
    }
  }

  return '';
});

さいごに

今回紹介した方法を使えば、WordPressの子テーマに配置したCSVファイルをJavaScript（jQuery）とPHPの両方で読み込むことが可能です。
用途に応じて適切な方法を選び、WordPressサイトにCSVデータを活用してください。