WordPress かっこいい天気予報ウィジェットの作り方
realrhymer工事現場の天気予報ウィジェットの作り方。
プラグインを入れてもいいんですが、その分サイトの読み込みが重くなってしまいます。
そのため、外部サイトのAPIを使用して実装していきます。
天気予報ウィジェット
https://weatherwidget.org/
こんな感じのウィジェットが簡単に作成できます。
More forecasts: 天気 10日間 東京
aa https://www.jma.go.jp/bosai/common/const/area.json
function weather_search(){
if ( false === ( $weather_data = get_transient( 'weather' ) ) ) {
$list = array();
$url = "https://www.jma.go.jp/bosai/forecast/data/forecast/260000.json";
$json = file_get_contents($url);
try {
$result = json_decode( $json, true, 512, JSON_THROW_ON_ERROR );
} catch ( JsonException $e ) {
}
if ($result !== NULL) {
$week = array("日","月","火","水","木","金","土") ;
$timeDefines = $result[0]['timeSeries'][0]['timeDefines'];
$weatherCodes = $result[0]['timeSeries'][0]['areas'][0]['weatherCodes'];
foreach ($timeDefines as $key => $item){
$list[] = array(
'date' => date('m月d日',strtotime($item)) .'(' . $week[date('w',strtotime($item))].')',
'img' => 'https://www.jma.go.jp/bosai/forecast/img/'. $weatherCodes[$key] .'.png'
);
}
$weather_data = $list;
set_transient( 'weather', $weather_data, 2 * HOUR_IN_SECONDS );
}
}
return $weather_data;
}<?php
$list = weather_search();
?>
<ul>
<?php foreach ($list as $key => $item){ ?>
<li>
<div class="img">
<img src="<?php echo $item['img']; ?>" alt="">
</div>
<div class="date">
<?php echo $item['date'] ;?>
</div>
</li>
<?php } ?>
</ul>