数週間前、地元のクライアントのランディングページにWordPressでGoogleマップを埋め込む必要がありました。顧客が実店舗を簡単に見つけられるようにしたかったのですが、サイトを遅くしたり、コードと格闘したりしたくありませんでした。
もしあなたが同じような状況にあったなら、それがどれほどイライラするか知っているでしょう。そのため、このチュートリアルでは、WordPressにGoogleマップを追加する3つの簡単な方法を紹介します。私はそれぞれの方法を実際のプロジェクトで使用したので、ランディングページ、ブログ記事、単発の埋め込みに最適な方法を説明します。
WordPressにGoogleマップを埋め込む方法の概要：
始める前に、サイトにインタラクティブなマップを埋め込むことの利点は何ですか？
WordPressにGoogleマップを埋め込むことが重要な理由
サイトにGoogleマイマップを埋め込むことが、サイトをインタラクティブにするための優れた方法であることは既にご存知でしょう。しかし、ビジネスの成長に役立つ他のいくつかの利点もあります。
たとえば、埋め込まれたGoogleマップは次のことができます：
- ストリートビューで、顧客が近くの店舗を見つけられるようにする
- イベントの開催場所を参加者に示す
- 特定の場所について議論するブログ記事を説明する
- 本社所在地を示す
少しの創造性があれば、Googleのインタラクティブマップを使用してウェブサイトに命を吹き込むことができます。そしてその結果、あなたのビジネスの成長と潜在顧客の両方に貢献します。
GoogleマップAPIキーは必要ですか？
WordPressサイトにGoogleマップを埋め込む前に、GoogleマップAPIキーを作成することをお勧めします。Googleは現在これを要求しています。Google APIキーを取得するには、以下の手順に従ってください。
1. Google Cloud Platform Consoleにアクセスします。まだアカウントをお持ちでない場合は、無料アカウントを作成できます。
2. 既存のプロジェクトを選択するか、新しいプロジェクトを作成します
3. Maps Embed APIを選択し、次の画面で有効にするをクリックします。
4. 次に、[認証情報]サイドバーに移動し、認証情報を作成オプションをクリックして、APIキーを選択します。
これで、Googleマップ用の有効なAPIキーが取得できたはずです。
WordPressにGoogleマップを埋め込む方法（3つの方法）
それでは、WordPressにGoogleマップを埋め込む方法を見ていきましょう。
方法1：SeedProdでWordPressランディングページにGoogleマップを埋め込む
このチュートリアルの最初の方法は、WordPressのランディングページにGoogleマップを埋め込む方法を示しています。ランディングページは、ターゲットトラフィックをリードと売上に転換するための最良の方法です。
そして、そのための最高のWordPressランディングページプラグインはSeedProdです。
SeedProdはドラッグアンドドロップ式のランディングページビルダーであり、コードを書かずにコンバージョン率の高いランディングページやWordPressテーマを作成できます。何百ものレスポンシブなランディングページテンプレートが付属しており、ビジュアルフロントエンドエディターで簡単にカスタマイズできます。
さらに、SeedProdには、以下を含む、ユーザーフレンドリーなコンテンツをページに追加するためのスマートコンテンツブロックが豊富に用意されています。
- Googleマップ
- お問い合わせフォーム
- コールトゥアクションボタン
- 料金表
- 画像カルーセル
- お客様の声
- FAQアコーディオン
- 動的テキスト
- アニメーション見出し
- オプトインフォーム
- その他多数
その結果、開発者を雇うことなく、ランディングページを迅速に作成できます。
SeedProdを使用してWordPressランディングページにGoogleマップを埋め込む方法を学ぶには、以下の手順に従ってください。
1. SeedProdランディングページプラグインをダウンロードする
最初のステップは、SeedProdプラグインをコンピューターにダウンロードすることです。SeedProdはWordPressで無料のランディングページを作成するための無料バージョンを提供していますが、ここではプロバージョンであるSeedProd Proを使用します。これにより、前述の高度なコンテンツブロックを使用できます。
それでは、下のボタンをクリックして開始してください。
次に、SeedProdをウェブサイトにインストールして有効化します。これに役立つ場合は、WordPressプラグインのインストールに関するこのステップバイステップガイドに従ってください。
SeedProdをインストールすると、ライセンスキーを求めるウェルカム画面が表示されます。
SeedProdアカウントにログインし、ライセンスキー、詳細、ダウンロードを表示リンクをクリックすることで、キーを見つけることができます。
キーをコピーしたら、SeedProdのウェルカム画面のライセンスキーフィールドに貼り付け、キーを確認ボタンをクリックします。
2. 新しいランディングページを作成する
これで最初のページ作成を開始できます。ウェルカム画面を下にスクロールし、最初のページを作成ボタンをクリックしてください。そのボタンをクリックすると、SeedProdのランディングページダッシュボードに移動します。
このページでは、まずSeedProdで利用可能なさまざまなランディングページモードが表示されます。これには以下が含まれます。
SeedProdのページモードを使用すると、ワンクリックでさまざまなランディングページをすばやくオンにできます。
たとえば、マイナーアップデートを実行しているときにメンテナンス画面をすばやくアクティブにできます。または、登録ユーザーを歓迎するためにカスタムWordPressログイン画面をオンにすることもできます。
ページモードの主な利点は、この機能を取得するために個別のWordPressプラグインをインストールする必要がないことです。SeedProdにはすべてが1つのコンパクトなプラグインに組み込まれています。
ページモードセクションの下には、SeedProdで作成したすべてのページのリストがあります。現時点では、リストにページは表示されません。
最初のページを作成するには、新しいランディングページを作成ボタンをクリックします。
ボタンをクリックすると、SeedProdのランディングページテンプレート画面に移動します。ここでは、ページのデザインの基盤として使用できる何百ものプロフェッショナルにデザインされたテンプレートが表示されます。
上部には、デザインをフィルタリングするためのさまざまなタブがあります。たとえば、次のとおりです。
- 近日公開
- メンテナンスモード
- 404ページ
- セールス
- ウェビナー
- リード獲得
- ありがとうございます
- ログイン
好きなデザインの上にマウスカーソルを合わせ、ティックアイコンをクリックしてそのテンプレートをインポートします。
このガイドでは、リードスクイーズの見出しの下にあるオポチュニティテンプレートを使用します。
テンプレートをインポートするためにチェックマークアイコンをクリックすると、ランディングページ名を入力するポップアップが表示されます。ページ名はランディングページURLに自動的に割り当てられるため、訪問者にとってわかりやすい名前を付けてください。
間違いがあった場合でも、この設定は後で簡単に変更できます。それでは、保存してページ編集を開始ボタンをクリックしてください。
3. ページのカスタマイズ
デザインをインポートすると、SeedProdのビジュアルページエディターで開かれます。エディターは、ページカスタマイズを非常に簡単にするための使いやすい2ペインデザインを備えています。
- 左ペイン: ページを構築およびカスタマイズするためのページブロックとセクション
- 右ペイン: ランディングページがリアルタイムでどのように表示されるかのプレビュー
エディターの上部には、デザイン、統合、ページ設定をすばやく切り替えるためのナビゲーションメニューがあります。
そして、左ペインの下部には、以下を含むページをナビゲートするのに役立ついくつかのアイコンがあります。
- グローバル設定: ページの色、フォント、背景をグローバルに制御します
- レイアウトナビゲーション: デザインのさまざまな部分にすばやく移動します
- リビジョン履歴: デザインの古いバージョンをプレビューして復元します
- 元に戻す/やり直し: デザインの変更を元に戻したり、すばやくやり直したりします
- モバイルプレビュー: ランディングページのモバイルデザインをプレビューします
上記のさまざまな設定により、ブランディング、コンテンツ、マーケティング目標に合わせてテンプレートを簡単にカスタマイズできます。
たとえば、ページのヘッダーをクリックすると、テキストの色などを変更でき、変更をリアルタイムでより迅速に確認できます。
または、デフォルトの画像を変更したい場合は、画像をクリックするだけで左側に設定が表示されます。その後、コンピューターやメディアライブラリの画像に置き換えたり、無料のストック写真を選択したりできます。
4. Google Mapsランディングページブロックの埋め込み
ランディングページにGoogle Mapsウィジェットを追加するのは簡単です。
左ペインから、Google Mapsブロックをクリックします。次に、ページ内の目的のセクションにドラッグします。
Google Mapブロックの設定をクリックすると、表示したい場所をすばやく入力できます。その後、マップのズームレベルを選択したり、配置を変更したり、マップの幅を調整したりできます。
高度な設定タブを選択すると、さまざまな境界線のスタイルを選択したり、カスタムマップの周りのスペースを調整したりできます。
ランディングページが希望どおりの外観になるまでカスタマイズを続けます。変更を保存するには、右上隅にある緑色の保存ボタンをクリックすることを忘れないでください。
5. 設定の構成
デザインが完了したら、ランディングページを公開する前に構成できる設定がいくつかあります。
SeedProdを使用すると、ランディングページをメールリストに簡単に接続できます。そのため、画面上部の接続をクリックして、一般的なメールマーケティングサービスを表示します。これにより、ユーザーにニュースレターの購読を依頼し、メールリストに自動的に追加することが容易になります。
メールリストを接続したら、[B]ページ設定[/B]タブをクリックして詳細を確認してください。
SeedProdでは5つの設定項目がありますが、これは作成するページのタイプや現在のSeedProdプランによって異なります。
- [B]一般：[/B]ページ名やURLを編集したり、公開済みと下書きを切り替えたりします。
- [B]SEO：[/B] [A id="x1"]WordPress SEOプラグイン[/A]でSEO設定を構成します。
- [B]アナリティクス：[/B] [A id="x1"]Googleアナリティクスプラグイン[/A]でページのパフォーマンスを追跡します。
- [B]スクリプト：[/B]トラッキングピクセルやリターゲティングピクセルなどのカスタムスクリプトを、ページのヘッダー、本文、フッターに追加します。
- [B]カスタムドメイン：[/B]既存のウェブサイトに接続されていない[A id="x1"]カスタムドメイン[/A]を任意のランディングページに割り当てます。
設定を構成したら、変更を保存し、[B]デザイン[/B]タブに戻ります。
6. ランディングページを公開する
ページを公開する前に、デザインが[A id="x1"]モバイルフレンドリー[/A]であることを確認することが重要です。そうでない場合、モバイルユーザーはページをナビゲートするのが難しくなり、リードやコンバージョンを失う可能性があります。
幸いなことに、SeedProdにはページがモバイルフレンドリーであることを確認するための[A id="x1"]モバイルプレビュー[/A]オプションが含まれています。画面下部にあるモバイルアイコンをクリックするだけです。
そこから、モバイルデバイスでのページの表示を確認し、正しく表示または機能しないものを変更できます。
すべて問題がなければ、緑色の保存ボタンの横にある下向き矢印をクリックし、[B]公開[/B]をクリックします。
次に、ページが公開されたことを示すウィンドウが表示されます。
ライブプレビューを表示するには、[B]ライブページを表示[/B]ボタンをクリックしてください。
そして、Googleマップがどのように表示されるかのプレビューはこちらです：
素晴らしい！これで、[A id="x1"]WordPressランディングページ[/A]にGoogleマップを追加する方法がわかりました。
しかし、マップをWordPressの投稿に追加する必要がある場合はどうでしょうか？次にその方法を説明します。
方法2：プラグインを使用してWordPressの投稿やページにGoogleマップを追加する
マップがビジネスにおいて重要な役割を果たし、サイトの複数の投稿やページで使用する必要がある場合に、この方法をお勧めします。ここでもWordPressプラグインを使用します。今回は、無料のWordPress Googleマッププラグインである[A id="x1"]MapPress Maps for WordPress[/A]を使用します。
それでは、WordPressダッシュボードでプラグインをインストールして有効化し、始めましょう。次に、マップを埋め込みたい投稿またはページを編集します。
投稿またはページ内で、ブロックエディター（Gutenberg）の[B]プラス（+）[/B]アイコンをクリックして、新しいWordPressブロックを追加します。次に、[B]MapPress Map[/B]ブロックを検索してクリックし、マップを投稿に追加します。
次に、[B]マップライブラリ[/B]ボタンをクリックし、次の画面で[B]新規追加[/B]を選択します。
次の画面で、検索バーにお好みのマップの場所を入力し、[B]保存[/B]をクリックします。
次に、[B]投稿に挿入[/B]リンクをクリックして、マップをWordPressエディターに追加します。
右側のマップ設定ドロップダウンパネルを使用して、Googleマップのサイズとズームを変更できるようになりました。
その後、更新または公開をクリックして変更を保存し、新しいマップの外観をプレビューします。
方法3：iFrameを使用してWordPressにGoogleマップを手動で埋め込む
もちろん、プラグインを使用せずにWordPressサイトにGoogleマップを追加することもできます。これを行うには、Googleマップのウェブサイトにアクセスし、ストアロケーターなど、表示したい場所を検索する必要があります。
そこから、共有アイコンをクリックし、ポップアップウィンドウに表示されるマップの埋め込みタブをクリックします。次に、HTMLのコピーボタンをクリックします。
次に、WordPressで任意の投稿またはページを編集します。WordPressブロックエディター内で、プラス（+）アイコンをクリックして新しいブロックを追加し、iframeやショートコードなどを追加できるカスタムHTMLオプションを選択します。
次に、Googleマップの埋め込みコードをカスタムHTMLブロックに貼り付け、更新をクリックして投稿を保存します。
投稿をプレビューすると、マップは以下の例と同様の外観になるはずです。
WordPressにGoogleマップを埋め込むことに関するFAQ
これで、WordPressにGoogleマップを埋め込むための3つの簡単な方法がわかりました。ランディングページビルダー、プラグイン、またはiframeを使用した手動埋め込みを使用できます。
サイトにマップをすばやく追加し、デザインを制御したい場合は、SeedProdの使用をお勧めします。これは、私がすべてのクライアントのランディングページに使用しているのと同じツールであり、迅速で柔軟性があり、どのWordPressテーマでも機能します。
試してみる準備はできましたか？今すぐSeedProdを使い始めると、コードに触れることなく数分で完全にブランド化されたGoogleマップをサイトに追加できます。
この記事が気に入った場合は、WordPressフッターの編集方法に関するこの記事も気に入るかもしれません。または、おすすめのWordPressホスティングプロバイダーをご覧ください。
お読みいただきありがとうございます。ビジネスを成長させるための役立つコンテンツについては、YouTube、Twitter、Facebookでフォローしてください。
