１０．天気予報のWordPress化
10-1.フォルダの設定
WordPressテーマフォルダの直下に、まず下記フォルダを作成します。
①CSSファイルは、stylesファルダ
②天気アイコンは、wiconフォルダ
③天気説明文は、wtxtフォルダ
10-2.get_template_directory_uri()関数とは
HTML ファイルの場合、通常は画像や他のファイルへのパスはそのファイルが置いてある場所から相対的な場所（位置）を指定しますが、
WordPress では指定の方法が異なります。
静的な HTML ファイルの場合はファイルの位置はその構造に一致しているので相対的なパスで指定できますが、WordPress の場合は URL の構造とファイルの物理的な構造が一致しているわけではないので、
URL やパスを取得するにはget_template_directory_uri()関数を使います。
10-3.ファイル指定パスの書き方
①CSSファイルのパス
header.phpに下記CSSのパスをheadタグ内に追加します。
<head>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/styles/stylesheet.css">
</head>
②天気アイコンのパス
天気アイコンファイルのパスは、天気予報プログラムと一緒にfrontpage.php（なければindex.php)の適当な箇所に挿入します。
適当な箇所と言うといい加減かもしれませんが、WordPressテーマによっては、プログラムが動かない箇所があるからです。
<img src="<?php echo get_template_directory_uri()."/wicon/${today_code}";?>.png">
この天気コードをパスに入力するのに、とても苦労しました😅
③天気説明文のパス
<?php
$filePath = get_template_directory_uri()."/wtxt/{$code}.txt";
$data = file_get_contents($filePath);
?>
10-4.ショートコード化
WordPressで天気予報を表示する場合、ショートコードで表示する方法もあります。
1. functions.php にショートコードを登録する
子テーマか独自プラグインに以下のように書きます（サンプルコードです）：
<?php
// functions.php
function my_weather_forecast() {
// 例：気象庁のJSON APIから東京の天気を取得する
$url = "https://www.jma.go.jp/bosai/forecast/data/forecast/130000.json";
$response = wp_remote_get($url);
if (is_wp_error($response)) {
return "天気情報を取得できませんでした。";
}
$body = wp_remote_retrieve_body($response);
$data = json_decode($body, true);
if (!$data) {
return "天気データを解析できませんでした。";
}
// 例：今日の天気を取得
$area = $data[0]["timeSeries"][0]["areas"][0]["area"]["name"];
$today_weather = $data[0]["timeSeries"][0]["areas"][0]["weathers"][0];
// HTMLとして返す
return "<div class='weather-widget'>
<strong>{$area}の天気</strong><br>
今日の天気: {$today_weather}
</div>";
}
add_shortcode('weather', 'my_weather_forecast');
?>
2. WordPress でショートコードを挿入
- WordPress の 「ショートコード」ウィジェットを配置
- [weather] と入力
👉 ページに動的な天気予報が表示されます
３.CSSで見た目を整える（任意）
style.css や カスタムCSSで、調整します。
.weather-widget {
background: #eef6ff;
padding: 10px;
border-radius: 8px;
font-size: 14px;
}
★ポイント
・API呼び出しは wp_remote_get() を使うと、WordPress環境に馴染む（cURLより安全）
・何度もAPIを叩くのが重い場合 → set_transient()でキャッシュ するとサーバー負荷が下がる
以上で、天気予報の作り方は終了です。
最後まで読了したあなたは、勇者です‼️
早速、自前の天気サイトを完成させてみましょう‼️