H2O space WordPressでページを制作しているとき、場所などを示すのに地図があると便利です。
幸い、Googleマップは無償で地図を貼り付けることができるので、使うことも多いのではないでしょうか。しかし、WordPressのエディターに、埋め込みコードを貼り付けると、なぜか次の図のようにコードがそのまま表示されてしまうことがあります。
これは、「編集モード」の違いによります。順番に説明していきましょう。
埋め込みコードを取得する
まずはその前に、Googleマップの埋め込みコードを取得しましょう。まずは、Googleマップを開きます。
そして、案内したい場所を探して、画面の中央に表示させましょう。そしたら、図のような詳細パネルを開きましょう。このパネルは、ランドマークとして登録されている場所ならクリックするだけ開きます。また、なにもない場所なら右クリックをして「この場所について」メニューをクリックすると、表示指せることができます。
そしたら、右端の「共有」ボタンをクリックします。
共有画面の、「地図を埋め込む」タブをクリックすると埋め込みコードが生成されます。微調整もこの場で可能なので、調整しましょう。次のようなコードを入手します。
<iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2393.7566369714564!2d139.74359669799952!3d35.6583252192703!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1502290938990″ width=”600″ height=”450″ frameborder=”0″ style=”border:0″ allowfullscreen></iframe>
WordPressに貼り付ける
さて、ここで WordPressの編集画面に貼り付けるのですが、この時エディターの右上を確認してください。「ビジュアル」というモードになっていませんか？
この場合、埋め込みコードは正しく埋め込めません。なぜなら、「エスケープ」という処理が自動的に行なわれてしまい、コードがそのままコードとして表示されるように変換されてしまうため。
テキストモードで貼り付けよう
そこで、この場合は隣にある「テキスト」というボタンをクリックします。すると、ちょっと見た目が変わって、これまで画像などがエディター内に見えていたものが、次のようなコード（HTML）に変わってしまいます。
<img src=”…”…>
しかし、編集などをしなければ恐れることはありません。一番下の空いている箇所に、埋め込みコードを貼り付けましょう。
この状態で、ビジュアルモードに戻ると Googleマップが貼り付いた状態となります。記事を公開しても、正常に表示されます。
例えば他にも、YouTubeや SlideShareなど「埋め込みコード」が生成されるサービスは、どれも同じ方法を使って貼り付けることができます。
YouTubeは自動変換機能を利用しよう
WordPressは、YouTubeなど一部のサービスは、URLを貼り付けるだけで自動的に埋め込みコードに変換する機能があります。例えば、埋め込みたい映像を YouTubeで視聴しているとき、Webブラウザーのアドレスバーに表示されているURLをそのままコピーしましょう。
これを、ビジュアルモードのエディターに貼り付けてEnterキーを押すと、あっという間に埋め込みコードに変化して、埋め込まれた状態になります。便利ですね。
Googleマップは、現状サポートされていないようですが、今後のバージョンアップでサポートされる可能性もあります。それまでは、テキストモードとの切り替えを覚えておくと良いでしょう。