WordPressの記事でYahoo!地図を表示する方法

いわゆる静的なHTMLサイトなどでは、Yahoo!地図で取得したコードをそのままサイト（ページ）などに貼り付けるだけでYahoo!地図が表示されます。

WordPressでも記事の中（エディタ）でYahoo!地図で取得したコードをそのまま貼り付けることで地図を表示することができます。

しかし、JavaScript圧縮系プラグインを利用していると表示されないことがあります。そのようなときは、圧縮しないで使うと良いのですが、それ以外の方法で表示する方法について書きます。

Yahoo!地図の地図をWordPressで表示させる方法

Windows付属のメモ帳、またエディタを用意してサイトを表示させるためのHTMLタグを入力して、その中にあるbodyタグの中でYahoo!地図で取得したscriptタグを貼り付けます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Yahoo!地図</title>
</head>
<body>
ここにYahoo地図のコードを貼り付ける
</body>
</html>

メモ帳の場合、一旦HTMLファイルとして保存したあとにブラウザ（IE、Google Chrome、Fire Fox）で開きます。また、エディタで保存しなくてもブラウザで表示させる機能がある場合は、そのままブラウザで表示させます。

地図を表示させた状態で、キーボードにある「F12」ボタン（または「ツール」⇒「F12開発ツール」）で開発ツールを開き、「DOM Explorer」を表示させます。

DOM Explorerに地図を表示させているiframeタグがあるので、それをクリックするとフォーカスさせるので右クリックでiframeタグのコードを全てコピーします。

WordPresの投稿エディタを開いて「テキスト」にしてからコピーしたコードを貼り付けて完了です。確認のためにプレビューで表示させることができたら成功です。

地図を表示させた状態で、キーボードの「F12」で開発ツールを立ち上げて、「Elements」を開くとiframeタグがあるのでコピーします。

コピーしたコードをWordPressのエディタをテキストにして貼り付けてページを表示させて地図が表示されれば成功です。