WordPress備忘録 WordPress HTTPS使用時に非SSLページでグーグルマップが表示出来ない時の対処方法
最近では、お問い合わせフォームなどもSSLにするのが普通になってきていますよね。
そんな時に便利なのが、WordPress HTTPSというプラグインで、使われてる方も多いと思います。ところが、WordPress HTTPSを使用すると、非SSLページにはめ込んだグーグルマップが表示されなくなるという現象が発生します。これは、WordPress HTTPSが非SSLページのhttpsをhttpに書き換えてしまうのが原因のようです。
まあ、グーグルマップをはめ込んだページもSSLにしちゃえばいいって話なんですけど、それでも、そうはしたくない場合も多いわけで・・・。(^^;
ここで、ちょっと「エンティティ表記」について書かせて頂きます。
「エンティティ表記」ってのは、アルファベットや記号をHTML内で使用できる10進数や16進数のコードで表記するものです。難しい理屈はおいておいて、下のようなページで、アルファベッドなどを簡単にエンティティ化することができます。
http://webtools.dounokouno.com/entity/index.html
例えば、example@yamura-yasuke.clubは、通常HTML内には、以下のように書き込みますよね。
<a href="mailto:example@yamura-yasuke.club">example@yamura-yasuke.club</a>
こんなふうにWebページにメールアドレスを掲載しておくと、メールアドレス収集のロボットの巡回で拾われて、その後、迷惑メールが大量にやってきたりってのがあるので、メールアドレスの部分をエンティティ化してみると、以下のような表記になります。
<a href="mailto:example@yamura-yasuke.club">example@yamura-yasuke.club</a>
これだと、ロボットがメールアドレスだと認識できずに、拾われないって事で、巡回してくるメールアドレス収集のロボット対策として行われたりします。もっとも、最近は通用しなくなってきているらしいので、やらないよりは、やった方がましってレベルでしょうけど・・・。(^^;
ここで話を元に戻すと、WordPress HTTPSが非SSLページのhttpsをhttpに書き換えてしまう事によってグーグルマップが表示出来なくなるわけですから、httpsという文字列をWordPress HTTPSに認識させなければいいわけだから、上のメールアドレスのロボット対策と同じ理屈で、httpsをエンティティ化しちゃったら、いいんじゃないかと思ったわけです。(^^;
そこで、グーグルマップの埋め込みコード内のhttps://をエンティティ化して、
https://
と表記してみたところ、問題なく、表示されるようになりました。(^^)
例えば大王わさび農場のグーグルマップの埋め込みコードは以下です。
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3213.8997190137106!2d137.90695871527694!3d36.33898018004618!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x601d6d90f97d839f%3A0x1341c208b47c20b9!2z5aSn546L44KP44GV44Gz6L6y5aC0!5e0!3m2!1sja!2sjp!4v1453958477521" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
この頭のhttps://をエンティティ化すると
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3213.8997190137106!2d137.90695871527694!3d36.33898018004618!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x601d6d90f97d839f%3A0x1341c208b47c20b9!2z5aSn546L44KP44GV44Gz6L6y5aC0!5e0!3m2!1sja!2sjp!4v1453958477521" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
正しいやり方なのか分かりませんけど、このやり方だと、新たにプラグインを使うわけでもなく、とっても、お手軽です。(^^)