10.天気予報の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);
?>

以上で、天気予報の作り方は終了です。

最後まで読了したあなたは、勇者です‼️

早速、自前の天気サイトを完成させてみましょう‼️


こんなサイトを作ったよ‼️と、コメントを頂けると幸いです。

最後までお読みいただき、ありがとうございました‼️

今後のご活躍を期待しております‼️😊👍

次は→11.降水確率の表示の仕方

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA