WordPressで同じディレクトリに保存されたJSONファイルを読み込む方法について解説します。このガイドでは、具体的な手順と例を含めて詳しく説明します。

JSONとは

JSON（JavaScript Object Notation）は、データをシンプルかつ軽量に構造化して保存するための形式です。以下はJSONの例です:

{
    "title": "サンプル記事",
    "author": "山田太郎",
    "date": "2024-12-27",
    "tags": ["WordPress", "JSON", "PHP"]
}
    

WordPressでJSONを利用することで、テーマやプラグインの動作を柔軟にカスタマイズできます。

PHPを使用してJSONを読み込む方法

WordPressではPHPを使用してJSONファイルを簡単に読み込むことができます。以下は基本的な手順です。

JSONファイルの準備

同じディレクトリに保存されたJSONファイルを読み込むには、以下のように「sample.json」という名前のファイルを用意します。

{
    "siteName": "My WordPress Site",
    "admin": "admin@example.com",
    "theme": "custom-theme"
}
    

PHPコード例

WordPressのテーマやプラグインに以下のコードを追加することでJSONファイルを読み込めます。

$file_path = __DIR__ . '/sample.json';

if (file_exists($file_path)) {
    $json_data = file_get_contents($file_path);
    $data = json_decode($json_data, true);

    if ($data) {
        echo 'サイト名: ' . $data['siteName'];
        echo '<br>';
        echo '管理者: ' . $data['admin'];
        echo '<br>';
        echo '使用中のテーマ: ' . $data['theme'];
    } else {
        echo 'JSONの解析に失敗しました。';
    }
} else {
    echo 'JSONファイルが見つかりません。';
}
    

このコードでは、file_get_contents関数を使用してJSONファイルを読み込み、json_decode関数を使用してPHP配列に変換しています。

フロントエンドでJSONを読み込む方法

フロントエンドでJavaScriptを使用してJSONを読み込む場合、fetch関数を活用します。

JSONファイルの読み込み

以下のようなJavaScriptコードをテーマに追加します。

fetch('sample.json')
    .then(response => {
        if (!response.ok) {
            throw new Error('HTTPエラー: ' + response.status);
        }
        return response.json();
    })
    .then(data => {
        console.log('サイト名:', data.siteName);
        console.log('管理者:', data.admin);
        console.log('使用中のテーマ:', data.theme);
    })
    .catch(error => {
        console.error('エラーが発生しました:', error);
    });
    

このコードは、WordPressテーマ内でフロントエンドスクリプトを登録する方法で追加できます。

PHPからJavaScriptファイルを登録

function enqueue_custom_scripts() {
    wp_enqueue_script(
        'custom-json-script',
        get_template_directory_uri() . '/js/custom-json.js',
        array(),
        null,
        true
    );
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');
    

上記のコードは、テーマのfunctions.phpに追加します。

よくあるエラーとその対処法

JSONを読み込む際に発生する可能性があるエラーとその解決策を紹介します。

ファイルが見つからないエラー

原因: 指定したパスが正しくない。
対処法: __DIR__やget_template_directory()を使用して正しいパスを指定してください。

JSONの解析に失敗

原因: JSONファイルが不正な形式になっている。
対処法: JSONの形式が正しいか検証してください。オンラインツール（例: JSONLint）を使用すると便利です。

JavaScriptでCORSエラー

原因: 同じオリジンからファイルが提供されていない。
対処法: JSONファイルをWordPress内の同じディレクトリに置くことで回避できます。

まとめ

WordPressでJSONを読み込む方法は多岐にわたります。PHPを使用する方法はサーバーサイドで処理を行う場合に便利です。一方、JavaScriptを使用する方法はフロントエンドでの動的な操作に適しています。それぞれの手法を状況に応じて使い分けてください。