Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressで天気予報を表示する方法(初心者ガイド)

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

WordPressで天気予報を表示したいですか?

サイトによっては、訪問者に今後の天気予報を表示する必要がある場合がある。旅行代理店やホテル予約サイトのようなホスピタリティサイトなどです。

この投稿では、WordPressに天気予報を簡単に追加する方法をご紹介します。

How to Add a Weather Widget to WordPress (Step by Step)

WordPressに天気予報は必要か?

すべてのサイトで天気予報をユーザーに見せる必要はない。しかし、時には、人々は今後の天候の状況に基づいて決定を下すかもしれません。

旅行、イベント、ホテル、ベッド&ブレックファスト、または同様の業界のサイトを運営している場合、訪問者は今後の天気に興味があるかもしれません。

このような情報をサイトに表示することで、より良いユーザー体験を提供することができます。これにより、サイトを長く利用してもらうことができ、コンバージョンの獲得につながります。

例えば、暑くて晴れの天気予報を見た訪問者は、ホテルの予約フォームに入力することを決めるかもしれません。

An example of a weather forecast on a booking form

旅行やホスピタリティのサイトを運営していなくても、WordPressの天気予報ウィジェットは訪問者の役に立つかもしれません。

例えば、旅行ブログを運営している場合、読者は旅行の計画を立てるために今後の予報を利用するかもしれない。

最新の天気情報を取得し、サイトに美しく表示できるプラグインはたくさんあります。しかし、最良の結果を得るためには、高速でユーザーフレンドリーで、外部の気象サービスへのリンクをたくさん追加しないWordPressプラグインを見つける必要があります。

それでは、WordPressの投稿、ページ、サイドバーウィジェットに天気更新予報を簡単に追加する方法を見ていきましょう。以下のクイックリンクから特定のステップに飛ぶことができます:

ステップ1:ロケーションウェザーアカウントのインストールと設定

Location Weatherは、初心者にも使いやすいWordPress天気予報プラグインです。任意のページや投稿、ウィジェット対応エリアに毎日の天気予報を追加できます。このプラグインを使用すると、風速、気温、気圧、視界などを表示できます。

A example of a weather forecast, added to a WordPress website

複数の場所の天気予報を同じページに表示することもできる。

このガイドでは、WordPressで天気予報を表示するために必要なものがすべて揃っている無料のプラグインを使用します。複数日の予報を表示したい場合や、訪問者の位置情報を自動的に検出したい場合は、Location Weather Proもあります。

最初に行う必要があるのは、Location Weather プラグインをインストールして有効化することです。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

Location Weatherは、OpenWeatherと呼ばれるオンライン気象サービスからリアルタイム予報を取得しています。OpenWeatherにアクセスするには、APIキーを作成し、プラグインの設定に追加する必要があります。

キーを作成するには、WordPressダッシュボードのLocation Weather ” Settingsにアクセスしてください。ここで「Get API key」リンクをクリックします。

Link to OpenWeather API

メールアドレスを入力し、パスワードを作成すると、無料のOpenWeatherMapアカウントを作成する画面になります。

OpenWeatherMap アカウントにサインインした後、ツールバーで自分の名前をクリックし、’My API keys’ を選択します。

Getting a weather forecast API key for your WordPress website

この画面では、初期設定のAPIキーが表示されます。

キーをコピーしてください。

OpenWeatherMap API Key

WordPress ダッシュボードに戻り、API キーを OpenWeather API Key ボックスに貼り付けます。

設定が完了したら、「Save Settings」ボタンをクリックしてAPIキーを保存する。

An OpenWeather API key

ステップ2:WordPressに天気予報を追加する

これでWordPressに天気予報を追加する準備ができました。

まず、天気予報のタイトルを入力します。このタイトルはWordPressサイトの天気予報の上に表示され、訪問者の目に留まるようになります。

How to add a weather forecast to your WordPress website

その後、「都市名」までスクロールし、天気予報の場所を入力する必要がある。

無料版を使用しているため、「City, Country」形式を使用する必要があります。これは、ほとんどの場所でうまく機能するはずです。

Configuring a weather forecast using a free WordPress plugin

複数の場所が同じ名前である場合、プラグインは間違った都市を選択するかもしれません。その場合は、Location Weather Proにアップグレードしてから、都市ID、ZIP、または場所の座標を入力する必要があります。

そうしたら、Location Weatherが使用している気温、気圧、風速の単位をチェックし、必要な変更を加えます。

例えば、アメリカに住んでいるなら、華氏を使う必要がある。

Changing units in a weather forecast including temperature, wind speed, and more

次に、「表示オプション」タブを選択し、WordPressブログに表示する情報を選択します。

これらの設定のほとんどは簡単なので、目を通して好きなように変更することができる。

The Display Options Tab

初期設定では、Weather Locationは予報の下に「Weather from OpenWeatherMap」というメッセージを表示します。

このテキストを非表示にしたい場合は、表示オプション画面を一番下までスクロールし、「Weather Attribution」スイッチをクリックして無効化する。

Remove the Link to the OpenWeatherMap Site

次のタブは「スタイルオプション」で、WordPressの 背景色と 文字色を変更できます。

また、色のついた枠線をつけたり、半径を変えてカーブした角を作ることもできます。

The Style Options Tab

天気予報のカスタマイザー設定に満足したら、「公開する」ボタンをクリックしてください。

その後、天気予報プラグインが自動的に作成するショートコードをコピーする。

Adding a weather forecast to WordPress using shortcode

ステップ 3: WordPressサイトに天気予報を表示する

WordPressの投稿やページ、あるいはウィジェット対応エリアにショートコードを追加できるようになりました。例えば、サイドバーにショートコードを追加することで、サイト全体に天気予報ウィジェットを表示させることができます。

ショートコードの設置方法については、WordPressでショートコードを追加する方法と WordPressウィジェットを追加して使用する方法のガイドをご覧ください。

ブロック対応のWordPressテーマを使用している場合、フルサイトエディターを使ってサイトのどのエリアにも天気予報を追加できます。これには、標準のWordPressコンテンツエディターで編集できないエリアも含まれます。

例えば、404ページのテンプレートを改善するために天気予報を使うかもしれない。

その後、WordPress天気ウィジェットの動作を確認するためにあなたのサイトを訪問することができます。

Preview the Weather Forecast

このチュートリアルで、WordPressサイトに天気予報を表示する方法をご理解いただけたでしょうか?また、メールマガジンの正しい作成方法や、専門家が選ぶ最高のWebプッシュ通知ソフトウェアもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

9件のコメント返信を残す

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Mohamed Shamir says

    What a fantastic tutorial! Adding a weather forecast to a WordPress site using the Location Weather plugin seems like a breeze, thanks to the clear instructions provided. I’m curious, though does the plugin offer any customization options for the design of the weather widget itself, like font styles or icon sizes?

    Thanks for sharing this valuable information. It’s definitely going to elevate the user experience on my website!

  3. Jemal Bakars says

    Hello , thanks for the documentation, But ,what if I want to create a website only focused on ” showing weather forecast”
    Can I put AdSense monetisation on my weather forecast website ?

    • WPBeginner Support says

      You would either need to create a post or custom post type for the different pages and if your site is approved for Adsense you could use it on your site.

      管理者

  4. schultzter says

    OpenWeatherMap works better in some countries than others. I tried using it for thunderstorm warnings but the closest it got in my area (eastern Canada) was “strong rain” so I ended up using the Environment Canada’s Weather Office applets.

  5. Gail Issen says

    This article is very informative. I’m working on a blog for a client whose customers are very aware of the weather. I will definitely add the weather to the sidebar. It will add valuable information to the blog.

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。