この記事では、プラグインを使用せずにレスポンシブ Google マップを WordPress Web ページ (連絡先ページなど) に追加する方法を紹介します。 このチュートリアルでは WordPress 6.0 と、このバージョンの WordPress のデフォルト テーマである Twenty Twenty Two テーマを使用します。
Google マップ機能を使用すると、ビジネスの場所をインタラクティブな地図に表示できるため、サイトの訪問者は、現在地を簡単に確認したり、地図を操作して周囲の状況を確認したり、道順を取得したりできます。サイト訪問者にデモンストレーションを行いますあなたが地元のビジネスであり、実際の物理的な場所を持っていること。 企業が連絡先ページに地図を掲載することは非常に一般的です。
そこにはたくさんのGoogleマッププラグインがありますが、それらの多くは扱いにくく、完全なプラグイン機能の支払いか、望ましくない結果を生み出す複雑な手順を伴うGoogle Developerアカウントのいずれかが必要です.
そうは言っても、プラグインや複雑な手順を一切使わずに、WordPress 6.0 ページに Google マップを追加する本当に簡単な方法があります。 それに飛び込みましょう。
ステップ 1: HTML ブロックを作成する
まず、WordPress サイトの管理エリアにログインし、[ページ] セクション (上の画像の赤い矢印) に移動します。
Google マップ機能を追加するページをクリックします (ページ名、私の場合は「連絡先」(上の画像の青い矢印) をクリックするか、単にページ名の下の「編集」をクリックします)。
Twenty Twenty Two のようなブロック テーマを使用している場合は、ページのブロック エディター内に移動します。 地図を挿入する場所まで下にスクロールします。
次に、「+」アイコン (「Block Inserter」 – 上の画像の赤い矢印) をクリックして、ブロックを挿入します。
検索フィールド (写真の緑色の枠) で「グループ」を検索し、クリックしてグループ ブロック (赤い矢印) を追加します。 これにより、ブロック要素にいくつかのカスタム設定を追加できます。
たとえば、[配置の変更] オプション (赤い矢印) をクリックし、[全幅] (緑の矢印) を選択します。 これにより、Google マップのインタラクティブ マップを含むブロックの幅が全幅になります。
次に、グループ内の大きな「+」ボタン（上の写真の赤い矢印）をクリックします。 検索バー (緑の枠) で「HTML」を検索し、「カスタム HTML」ブロック (青い矢印) をクリックします。
「Write html…」（赤い矢印）と表示されます。 ここにマップを追加します。
ステップ 2: Google マップの埋め込み HTML を生成する
ここで、Google マップを使用してマップを生成する必要があります。 これを行うには、新しいブラウザ タブを開き、デフォルトの検索ブラウザでない場合は Google.com に移動します。
次に、マップに表示する住所を入力します。 この例では、エンパイア ステート ビルディング (赤い矢印) を使用します。 この部分には、会社の正確な住所を使用できます (つまり、番地、番地、市区町村、州、郵便番号、または米国以外の場合は国際住所として入力したもの)。
検索エンジンの結果ページに表示される住所の地図画像をクリックします (画像の赤い矢印 – 住所または名前のどちらを入力したかに応じて、ページの中央または右側に表示されます)。私がしたような場所）。
住所が全画面地図上にマーカーとして表示されます (上の画像の赤い矢印)。 また、検索した場所の住所またはタイトルの下にいくつかのアイコンが表示されます。 これらのアイコンには、「ルート案内」、「保存」、「付近」、「電話に送信」、「共有」が含まれます。 「共有」アイコン（青い矢印）をクリックします。
表示される [共有] タブで、[地図を埋め込む] タブ (上の写真の青い矢印) をクリックします。
このタブには、埋め込まれた Google マップ ウィジェットのプレビューが表示されます。 コードの左側 (緑色の矢印) にサイズのドロップダウンがあります。既製のサイズを選択するか、「カスタム」を選択して独自のサイズを設定できます。 「カスタム」オプション (赤い矢印) を選択します。
ここに、カスタム マップの寸法が表示されます。 高さ、つまり最初の次元を 1200 (赤い矢印) に設定します。 幅は 600 のままにします。[実際のサイズをプレビュー] (緑色の矢印) をクリックすると、新しいポップアップ ウィンドウに地図がフル サイズで表示されます (ポップアップ ブロッカーがある場合は、それらを無効にしてください)。ウィンドウを塞がないようにオンにします)。 完了したら、プレビュー ウィンドウを終了します。
次に、[HTML をコピー] リンク (青い矢印) をクリックします。 これは、WordPress ページに取り込むコードです。
ステップ 3: HTML コードを WordPress ページに貼り付ける
WordPress Web サイトを含むブラウザー タブに戻ります。 「Write HTML here…」と表示されている空の HTML ブロックをクリックし、キーボードで ctrl+v (Mac では cmd+v) を押してコード (赤い矢印) を貼り付けます。
ブロック ツールバーの [プレビュー] オプション (赤い矢印) をクリックすると、ページにマップが表示されます (緑の矢印)。 「HTML」オプションをクリックして、HTML コードに戻ります (青い矢印)。
ページにマップを埋め込んでいますが、レスポンシブではありません。つまり、タブレットや電話などの小さな画面でマップを表示すると、画面に合わせてサイズが調整されません。 これを修正するには、カスタム スタイルを HTML コードに追加する必要があります。
ステップ 4: Google マップをレスポンシブにする
私はなるだろう このウェブサイトから取得したコードを使用して Google マップの埋め込みをレスポンシブにします。 「Google マップをレスポンシブに埋め込む方法」(赤い矢印) というラベルの付いたセクションまで下にスクロールします。 次に、XNUMX 番目のコード セット (青い矢印) まで下にスクロールします。
「」からすべてをコピーします” to “” by highlighting the code with your mouse and hitting ctrl+c on your keyboard (cmd+c on a MAC – red arrow in the image above).
WordPress に戻ります。 HTML コードの先頭でマウスをクリックして、この新しいコードを最初に挿入します (赤い矢印)。 ctrl+v を押してコードを貼り付けます。
最後に、HTML コードの最後 (赤い矢印) をクリックし、「 」 すべてを閉じます。 基本的に、HTML コードをカスタム スタイルでラップしました。 このスタイル設定は、訪問者が表示しているウィンドウのサイズに基づいてマップのサイズを変更するように訪問者のブラウザーに指示します。
ステップ 5: インタラクティブ マップの縦横比を調整する
最後にもう 75 つ、「padding-bottom: XNUMX%;」が表示されるまでコードの先頭までスクロールします。 （赤い矢印）。 このコードは、マップの縦横比を決定しています。
マップのサイズを 1200 x 600 に変更したため、縦横比は 2:1 になります。 このためには、パーセンテージを「50%」に変更する必要があります (赤い矢印)。
マップに使用するパーセンテージがわからない場合は、縦横比 (つまり 16:9) を取得し、9 番目の数値を最初の数値で割ってパーセンテージを取得します (16 を 56.25 で割ると XNUMX%)。
[更新] をクリックして変更を適用し (上の画像の青い矢印)、左下隅にある [ページを表示] をクリックして結果を確認します。
Google マップ ウィジェットが表示されます (上の画像の赤い矢印)。
ブラウザーのサイズを縮小してから、マップのある Web ページの領域までスクロールして戻ることで、応答性をテストできます。
このチュートリアルは以上です。 気に入って、独自のプロフェッショナルな WordPress Web サイトをゼロから作成する方法を学びたい場合は、私の Web サイトに登録できます。 Udemy の非コーダー向け WordPress 6.0 コース、または私の他のチュートリアルをチェックしてください!
