経緯
今日は何の日のソースコードを公開する一環として、この項をまとめます。以前に述べましたが、OpenWeatherMapを利用して天気情報を取得してみるの記事に力を得て、function.phpに組み込みました。
WordPressのバージョンは現在、4.2.2ですが、将来のバージョンアップに対応すべく子テーマにしています。
WordPressカスタマイズは操作を誤ると甚大な損傷を受けることがありますので慎重な対応を要します。
子テーマ作成方法は、当ブログの
①WordPressのカスタマイズ実践編
②子テーマのCSSが反映されないとき
を参照してください。
天気情報取得ソースコード
実際、関数やショートコードは下図のようにPHPタグに囲まれます。
組み込む手順
ソースコードをダウンロードするにはここをクリックします。ダウンロードができない場合はテキスト画面が現れるのでコピー&ペーストにてSampleFunctions.txtをデスクトップ上に作成し、その後functions.phpにリネームします。このファイルは30行足らずのサイズです。
ここからは①WordPressのカスタマイズ実践編の手順にてchildフォルダにfunctions.phpが存在しているものとして話を進めます。WordPressカスタマイズが今回初めてならば、このたびのfunctions.phpが全内容になりますが、すでにある場合は追加される形になります。
換言すると最初に、従来からのカスタマイズfunctions.phpをデスクトップ上に用意し、今回の関数コードを先頭に追加します。次にファイル転送ソフトのFFFTPにて/wp-content/themes/childフォルダに上書きします。
元々のfunctions.phpは600行ほどのサイズで/wp-content/themes/twentyfouteen等にあり、WordPressシステムがブログ立ち上げ時このファイルに追加してくれます。小テーマのchildはtwentyfouteenの外にあるので、バージョンアップしても問題なく動作するようになっています。
話がくどくなりますが、子テーマを宣言しているのだから、システム固有のfunctions.phpには一切、手を付けません。
動作の確認
動作の確認はFFFTPにてchildフォルダのfunctions.phpを切り換え、ショートコードを[tokyo_weather city=”Tokyo,jp”]のように記述したページを開き、F5キーを押下すれば天気情報を取得する関数が動作します。[]は共に半角です。
最後に
ショートコードをウィジェット欄で参照すれば、ウィジェット欄に天気予報が表示されます。画面サイズにより1行ぶんが2行にわたって表示されることがあります。
ここで示したサンプルコードは2日分ですが、最大16日まで拡大できます。openweathermap.orgからリリースされているドキュメントを読み、ダウンロードしたコードをじっくり眺めて改訂してください。
天気予報取得関数の内容を理解すれば、お天気アイコンをカレンダー上に表示できるようになります。
上図のように%表示の数字は降水確率を意味することが多いのですが、ここでは湿度を表しています。
元日からの通算日等のソースコードは次回になります。