【WordPress】外部API処理をfunctions.phpから切り離して安全に実装する方法（OpenWeatherMapの例）

はじめに

WordPressの functions.php に外部API（OpenWeatherMapなど）の呼び出し処理を書いた場合、以下のような課題があります。

• セキュリティ: APIキーがテーマのコード内に露出してしまう不安
• 保守性: WordPress本体やテーマの更新時にコードが消えたり影響が出たりする心配
• パフォーマンス: 処理が重くなった際、サイト全体のレスポンスに影響する可能性

これらの課題を解決するため、APIのデータ取得・HTML生成処理をWordPressの外（別ディレクトリ）に切り離し、ショートコード経由で安全に呼び出すことに成功しましたので紹介します。

完成イメージ

この記事の手法を最後まで実装すると、サイト内に以下のような川越市の天気情報をショートコードで表示できるようになります。

システムの概要

WordPressの外に専用のPHPファイルを配置します。WordPress側はショートコード経由でそのファイルと通信（内部API呼び出し）を行い、結果のHTMLを表示させます。

1. ユーザーがページを閲覧
2. WordPressがショートコードを実行し、自サーバー内のPHPファイルにリクエスト
3. PHPファイルがAPIキーを使って外部サービス（OpenWeatherMap）からデータを取得
4. PHPファイルがHTMLを生成してJSON形式で返却
5. WordPressがそのHTMLを受け取って表示

---

手順1：外部PHPファイルの作成

まず、WordPressのインストールディレクトリ（公開ディレクトリ）の直下に api などのフォルダを作成し、API処理用のPHPファイルを設置します。

配置場所の例

public_html/api/kawagoe_weather.php

実装コード（kawagoe_weather.php）

<?php
// JSONを返す設定とCORS対策（安全にデータを渡すため）
header('Content-Type: application/json; charset=utf-8');
header('Access-Control-Allow-Origin: *');

// --- 設定項目 ---
$api_key = 'YOUR_API_KEY'; // OpenWeatherMapのAPIキー
$city_id = '1859171';      // 川越市のID
$url = "[https://api.openweathermap.org/data/2.5/weather?id=](https://api.openweathermap.org/data/2.5/weather?id=){$city_id}&appid={$api_key}&units=metric&lang=ja";

// 1. 外部APIからデータを取得
$response = @file_get_contents($url);

if ($response === FALSE) {
    echo json_encode(array('error' => '天気情報が取得できません'));
    exit;
}

$data = json_decode($response, true);

if ($data['cod'] !== 200) {
    echo json_encode(array('error' => 'エラー: ' . $data['message']));
    exit;
}

// 2. 必要なデータの抽出
$temp = round($data['main']['temp']);
$description = $data['weather'][0]['description'];
$icon = $data['weather'][0]['icon'];

// 3. 表示用のHTML生成
$html = '<div class="weather-box" style="border: 1px solid #ccc; padding: 15px; border-radius: 10px; background: #fff; max-width: 300px; margin: 20px 0; text-align: center;">';
$html .= '<p style="margin: 0; font-size: 0.9em; color: #666;">川越市の現在の天気</p>';
$html .= '<img src="[https://openweathermap.org/img/wn/](https://openweathermap.org/img/wn/)' . $icon . '@2x.png" style="width: 80px; margin: -10px 0;">';
$html .= '<div style="font-size: 1.2em; font-weight: bold;">' . $description . ' / ' . $temp . '℃</div>';
$html .= '</div>';

// 4. 結果をJSON形式で出力
echo json_encode(array('html' => $html));

手順2：WordPress側の設定（functions.php）

手順1で作ったPHPファイルを呼び出すための「橋渡し」を functions.php に記述します。

実装コード

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

function kawagoe_weather_shortcode() {
    // 手順1で設置したファイルのURL（自分のサイトのドメインに書き換えてください）
    $api_url = '[https://example.com/api/kawagoe_weather.php](https://example.com/api/kawagoe_weather.php)';
    
    // WordPressの関数を使って内部通信を行う
    // 自分のサイト内なので sslverify は false でも問題ありません
    $response = wp_remote_get($api_url, array('sslverify' => false));

    if (is_wp_error($response)) {
        return '天気情報の取得に失敗しました（通信エラー）';
    }

    $body = wp_remote_retrieve_body($response);
    $data = json_decode($body, true);

    // JSONからHTMLを取り出して出力する
    if (isset($data['html'])) {
        return $data['html'];
    } else {
        return 'データの読み込みに失敗しました';
    }
}
// ショートコード名 [kawagoe_weather] を登録
add_shortcode('kawagoe_weather', 'kawagoe_weather_shortcode');

手順3：記事への表示

あとは、WordPressのブロックエディタやクラシックエディタで、表示したい場所にショートコードを記述するだけです。
[kawagoe_weather]

実際の表示例

今回解説した手法を用いて、実際に天気を表示させているページがこちらです。表示速度やデザインの参考にしてください。

川越市の現在の天気（実装サンプル）

---

まとめ

この手法のメリットは以下の通りです。

1. 管理の分離: functions.php がスッキリし、APIロジックの修正が容易になる。
2. 再利用性: 今回作ったPHPファイルは、WordPress以外のサイトやJavaScript（Fetch API）からも利用できる。
3. 安全性: APIキーをテーマファイル内に持たせないため、セキュリティリスクを軽減できる。

WordPressを単独のサイトとしてだけでなく、「APIサーバー」の入り口として活用する第一歩として、ぜひ試してみてください。