X

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>

 

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

 

 

矢村やすけ: 矢村やすけと申します。 僕が住む、安曇野には八面大王伝説という伝説があります。その伝説の中で、妖力の強い八面大王をうつ為の矢に使う三十三節ある山鳥の尾羽を、矢村に住んでいた弥助が坂上田村麿呂に献上します。現在、僕が住んでいる場所が、その矢村地区に近いので、矢村やすけとしました。 安曇野の地名は、この八面大王伝説由来のものが多いです。そんな伝説に彩られた安曇野の風景を主にスマホ写真で投稿していきます。(^^)
Related Post

This website uses cookies.