カスタムフィールドで記録した天気を、お天気アイコン画像で表示させるPHPコードを考えてみた。WordPressを、日記のように使ってる人にはいいかもしれない。
左のように、お天気アイコン画像を使い表示させる。
カスタムフィールドを作る
まず、WordPressのカスタムフィールドの基本的使い方を参考にしながら、下のようなカスタムフィールドを作る。
- 名前：今日の天気
- 値：「晴れ、曇り、雨、雪」のいずれかひとつ。
画像を用意
「晴れ、曇り、雨、雪」それぞれのお天気アイコン画像を用意する。
そのうち、当サイト（alphasis.info）でも素材の提供を始めます。
WordPress用PHPコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <?php $custom_fields_key = "今日の天気"; $custom_fields_values = get_post_meta(get_the_ID(), $custom_fields_key); if($custom_fields_values[0] == "晴れ"){ $custom_fields_value_img = "晴れの画像のURL"; }elseif($custom_fields_values[0] == "曇り"){ $custom_fields_value_img = "曇りの画像のURL"; }elseif($custom_fields_values[0] == "雨"){ $custom_fields_value_img = "雨の画像のURL"; }elseif($custom_fields_values[0] == "雪"){ $custom_fields_value_img = "雪の画像のURL"; } ?> <div><?php echo get_the_date(); ?>の天気: <img src="<?php echo $custom_fields_value_img ?>" title="<?php echo $custom_fields_values[0] ?>" style="vertical-align: bottom;" /> <?php echo $custom_fields_values[0] ?></div> |
設定
WordPress用PHPコード内の
- 晴れの画像のURL
- 曇りの画像のURL
- 雨の画像のURL
- 雪の画像のURL
の部分を、それぞれ用意したお天気アイコン画像のURLに置き換える。
使用方法
テンプレートファイル内で使用する方法
画像のURLを指定したPHPコードを、「single.php」など、記事を表示させるテンプレートに貼り付ける。
Twenty Ten テーマ の場合、wp-content/themes/twentyten フォルダーにある「single.php」をテキストエディタで開き、
1 2 3 | <div class="entry-meta"> <?php twentyten_posted_on(); ?> </div><!-- .entry-meta --> |
の部分を
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <div class="entry-meta"> <?php twentyten_posted_on(); ?> <?php $custom_fields_key = "今日の天気"; $custom_fields_values = get_post_meta(get_the_ID(), $custom_fields_key); if($custom_fields_values[0] == "晴れ"){ $custom_fields_value_img = "晴れの画像のURL"; }elseif($custom_fields_values[0] == "曇り"){ $custom_fields_value_img = "曇りの画像のURL"; }elseif($custom_fields_values[0] == "雨"){ $custom_fields_value_img = "雨の画像のURL"; }elseif($custom_fields_values[0] == "雪"){ $custom_fields_value_img = "雪の画像のURL"; } ?> <div><?php echo get_the_date(); ?>の天気: <img src="<?php echo $custom_fields_value_img ?>" title="<?php echo $custom_fields_values[0] ?>" style="vertical-align: bottom;" /> <?php echo $custom_fields_values[0] ?></div> </div><!-- .entry-meta --> |
に変更。もちろん、画像のURLは、用意したお天気アイコン画像のURLに置き換えておく。
投稿欄に入力して使う方法
Exec-PHPや、PHP Executionなどの、投稿記事内で PHP を実行させるWordPressプラグインをインストールしておく必要がある。
投稿記事内で PHP を実行させるWordPressプラグインをインストールしてあれば、あとは、画像のURLを置き換えたPHPコードを、投稿欄に入力するだけ。
出力例
Twenty Ten テーマ の「single.php」に、PHPコードを追加した場合、上の画像のように、用意したお天気アイコン画像が出力されるはず。
使用する際は、自己責任でね。気に入ったらリンクを貼って下さい。