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="&#109;&#97;&#105;&#108;&#116;&#111;&#58;&#101;&#120;&#97;&#109;&#112;&#108;&#101;&#64;&#121;&#97;&#109;&#117;&#114;&#97;&#45;&#121;&#97;&#115;&#117;&#107;&#101;&#46;&#99;&#108;&#117;&#98;">&#101;&#120;&#97;&#109;&#112;&#108;&#101;&#64;&#121;&#97;&#109;&#117;&#114;&#97;&#45;&#121;&#97;&#115;&#117;&#107;&#101;&#46;&#99;&#108;&#117;&#98;</a>

これだと、ロボットがメールアドレスだと認識できずに、拾われないって事で、巡回してくるメールアドレス収集のロボット対策として行われたりします。もっとも、最近は通用しなくなってきているらしいので、やらないよりは、やった方がましってレベルでしょうけど・・・。(^^;

ここで話を元に戻すと、WordPress HTTPSが非SSLページのhttpsをhttpに書き換えてしまう事によってグーグルマップが表示出来なくなるわけですから、httpsという文字列をWordPress HTTPSに認識させなければいいわけだから、上のメールアドレスのロボット対策と同じ理屈で、httpsをエンティティ化しちゃったら、いいんじゃないかと思ったわけです。(^^;

そこで、グーグルマップの埋め込みコード内のhttps://をエンティティ化して、

&#104;&#116;&#116;&#112;&#115;&#58;&#47;&#47;

と表記してみたところ、問題なく、表示されるようになりました。(^^)

例えば大王わさび農場のグーグルマップの埋め込みコードは以下です。

<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="&#104;&#116;&#116;&#112;&#115;&#58;&#47;&#47;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>

正しいやり方なのか分かりませんけど、このやり方だと、新たにプラグインを使うわけでもなく、とっても、お手軽です。(^^)

Share on Tumblr

Pocket