【WordPress入門】ブロックエディタで投稿記事にGoogleマップを埋め込む方法

WordPressのブロックエディターで投稿記事にGoogleマップを埋め込む方法を解説します。

投稿画面からカスタムHTMLブロックを追加

投稿画面左上の青い「＋」からブロックを追加します。

「＋」を押すと、追加できるブロックの一覧が表示されるので、その中から「カスタムHTML」を選択します。

埋め込みたいGoogleマップの埋め込みコードをコピペ

カスタムHTMLブロックが追加できると下記のような表示になります。

このHTML入力欄に、Googleマップの埋め込みコードを入れます。

試しに、「東京スカイツリー」の所在地のGoogleマップを埋め込んでみましょう。

Googleマップ上で検索し、「共有」をクリックし「地図を埋め込む」を選択すると下記のような表示になります。

小・中・大・カスタムサイズの４種類から適当なサイズを選びます。

実サイズでプレビューできるので、確認してみましょう。

サイズが決まったら「HTMLをコピー」し、下記のように投稿画面の「HTMLを入力…」の欄に貼り付けます。

埋め込みコードをコピペしたら、ツールバーの「プレビュー」でうまく表示されているか確認してみましょう。

下記のような表示となったら、完成です。

これで、ブロックエディターで投稿記事にGoogleマップを埋め込むことができました。