WordPressに天気ウィジェットを追加する方法

観光協会、屋外施設、宿泊・接客業にとって、ウェブサイトに地域の天気情報を掲載することは大きなメリットになります。旅行者やイベント参加者は、予約前に天気予報を確認することがよくあります。別の天気アプリを開く手間を省けるよう、ページに直接天気予報を表示してみてはいかがでしょうか。

WordPressサイトを運営している場合、エディタに天気ブロックが標準では用意されていないことにお気づきかもしれません。しかし、WordPressの天気ウィジェットを使えば、予約情報のすぐ横を含め、サイト内の好きな場所に天気予報を配置できます。お客様はタブやアプリを切り替えることなく、訪問の計画を立てられます。

WordPressに天気ウィジェットを追加する方法は2つあります。WordPressのプラグインディレクトリから天気プラグインをインストールする方法と、別のツールでカスタマイズした無料のウィジェットをページに埋め込む方法です。

地域の店舗オーナーでも、観光サイトの運営担当者でも、APIキーの登録なしでWordPressに天気ウィジェットを追加したいブロガーでも、このガイドで選択肢をご確認いただけます。まずはプラグインから見ていきましょう。

Watch on youtube

How to Add a Weather Widget to WordPress

方法1：WordPressの天気プラグインをインストールする

おすすめのWordPressプラグインをインストールするには、標準のプラグインディレクトリで多数の選択肢から選べます。たとえば、Location Weatherやwp-forecastなどがあります。プラグインはWordPressのダッシュボードと連携するため、すでにWordPressの使い方をご存じであれば、サイトの他の部分と同じ場所から天気予報も管理できます。

デメリットは、無料のWordPress天気プラグインであっても、それ単体では気象データを提供しない点です。そのため、OpenWeatherなどのプロバイダーでAPIキーを登録し、プラグインの設定に入力しないと、WordPressの天気ウィジェットに天気予報を表示できない場合があります。こうした無料のキーには1日あたりのリクエスト数に上限があります。また、これらのプラグインの無料版にはスタイル設定のオプションが少なく、ページの読み込み速度が遅くなることがあるほか、いくつかの機能が有料アップグレード限定になっていることも少なくありません。

それでもダッシュボードから天気予報を管理したい場合は、プラグインを使ってWordPressに天気ウィジェットを追加する手順をご覧ください。

1. プラグインをインストールする：WordPressのダッシュボードからプラグインに移動し、Location Weatherなどの天気プラグインを検索します。今すぐインストールをクリックし、続けて有効化をクリックします。

2. APIキーを追加する：ダッシュボードに新しく追加されたプラグインのメニュー項目を開いて設定に進み、OpenWeatherなどのプロバイダーで取得した無料のAPIキーを貼り付けます。デフォルトの場所と気温の単位を設定したら、保存します。

3. サイトに天気予報を追加する：ブロックエディタでページを開き、プラグインの天気ブロックを追加するか、ショートコードを貼り付けて、更新をクリックします。サイドバーやフッターに配置したい場合は、ダッシュボードのサイドバーにある外観からウィジェットに移動し、そこで追加します。

方法2：無料の天気ウィジェットを使う（おすすめ）

ページの読み込み速度を低下させるおそれのあるプラグインを追加したくない場合や、APIキーを生成するという技術的な手間を避けたい場合は、短い埋め込みコードで追加できるJotform天気ウィジェットのようなホスト型ウィジェットが、よりシンプルな選択肢です。無料で利用でき、設定は場所の選択、天気予報のスタイル設定、そして埋め込みコードをWordPress標準のカスタムHTMLブロックに貼り付けるだけです。

Jotformを使ってWordPressに天気予報ウィジェットを追加する手順は次のとおりです。

1. ウィジェットを作成する：Jotformワークスペースページで作成をクリックし、ウェブサイトウィジェットを選択して「天気」と検索したら、ウィジェットを使用をクリックします。

2. 場所とスタイルを設定する：ウィジェットのプロパティの一般タブで、市区町村、郵便番号、または座標を入力します。あるいは、訪問者の位置情報を選択すると、訪問者ごとにその地域の天気予報が表示されます。温度の単位は華氏または摂氏から選択します。スタイルタブでは、天気テンプレートのレイアウト（1時間ごと、日別、詳細、現在の天気、気温のみ）を選び、テーマに合わせて色を調整します。レイアウトタブでは、カードの幅を好みに合わせて変更できます。

3. 公開して埋め込む：上部の公開をクリックし、埋め込みコードをコピーします。WordPressに天気を埋め込むには、WordPressのブロックエディタでページを開き、カスタムHTMLブロックを追加してHTMLを編集をクリックし、コードを貼り付けて更新をクリックします。

このウィジェットはWordPressサイトではなくJotformのサーバー上で動作するため、プラグインは不要で、サイトの表示速度にも影響しません。

Jotform天気ウィジェットをウェブサイトに埋め込むと、次のように表示されます。

ノーコードのスマートなウィジェットでWordPressサイトを強化する

有効なWordPressプラグインの数を最小限に抑えることは、サイトの速度とセキュリティの面で望ましい運用方法です。プラグインが増えるほど、更新やメンテナンスの対象となるソフトウェアも増えるためです。プラグインやAPIキーが不要なJotformウェブサイトウィジェットのような埋め込み型ツールは、地域のビジネスサイトに機能を追加するうえでよりスマートな方法です。さらに、Jotformの無料ウェブサイトウィジェットディレクトリには150種類以上のウィジェットがあり、たとえば次のようなものがあります。

• すべてのページに浮かんで表示されるタップして電話ボタン。天気予報を確認した訪問者が、ワンタップで電話して予約できます
• 電話よりも手軽に質問を送りたいお客様向けのWhatsAppチャットボタン
• 開催予定のイベントや大会、シーズンオープンに向けたカウントダウンタイマー

どのウィジェットも、天気ウィジェットと同じカスタムHTMLブロックから埋め込めます。予約や問い合わせも受け付けている場合は、JotformのWordPressフォームを使えば、天気予報と同じページからお客様がご連絡いただけるようになります。ぜひディレクトリをご覧いただき、サイトに足りない機能を追加して、パフォーマンスを損なうことなく機能性を高めてください。