ブログがEmbedで表示されないのはAutoptimizeが原因だった?![間違いでした]

2016年6月9日2016年6月11日Web-log・ココログ関連,WordPress

(追記 2016-06-09 00:46 すみません、大間違いでした。原因は、"Header always append X-Frame-Options SAMEORIGIN"を設定していたためでした。)

先日、WordPress 4.4からの新機能を使ったブログ埋め込みのために、ショートコードを置き換えるためだけのプラグインを作りました。

[embed]ショートコードはdo_shortcode()では動作しない

プラグイン自体は動くのですが、肝心の埋め込みに失敗します。blockquoteの枠に、タイトルしか表示されません。

htmlソースを見てみると、埋め込み自体はできているようなのですが、styleに、"display: none;"が指定されていました。なぜだろう…。すごく悩みました。そして、次の記事を発見しました。ありがとうございます!!

WordPress 4.4 oEmbed 埋め込みカードの仕組みと注意点！！ – セルティスラボ

表示用コンテンツリクエスト

次に、WP4.4 から含まれた wp-embed.min.js スクリプトによって、iframe 内のURLとシークレットキーを使って、非同期に iframe 内に表示するためのコンテンツのリクエストが行われます

※何らかの理由でスクリプトが機能しない場合は、引用文として記事タイトルのリンク表示だけしか出来なくなります

WordPress 4.4 oEmbed 埋め込みカードの仕組みと注意点！！ – セルティスラボより

JavaScriptが動かない時の症状と同じだ! もしかしたら、AutoptimizeのJavaScriptの最適化が影響を与えているのかも…。そう思って、試しにAutoptimizeをoffにしてみたら、無事表示されるようになりました。

ですが、Autoptimizeは、Google PageSpeed Insightsのスコアを上げるためには必須のプラグインなのです。Autoptimizeを入れないと、レンダリングをブロックするスクリプトがあると言われてしまいます。スコアを上げることは、訪問者がページを見られるようになるまでの時間が短くなることを意味します。

Autoptimizeの設定を見直してみたら、設定していないオプションがありました。

“Add try-catch wrapping?"と言うオプションで、"If your scripts break because of a JS-error, you might want to try this." (もし、あなたのスクリプトがJS-errorで動かなかったら、これを試すのを希望するかも) と説明が書かれています。

このオプションを設定してみたら、ちゃんと埋め込みが出来るようになりました。よかったです。

(追記 2016-06-09 00:46)

すみません、大間違いでした。原因は、"Header always append X-Frame-Options SAMEORIGIN"を設定ていたためでした。

Safariで表示されてみたら、うまく表示されおらず、確認してみたら上記の設定が原因のエラーが出ていました。

(追記 2016-06-11 12:54)

次の記事で上記の設定をしています。設定をしていたことは覚えていましたが、同じドメインなので大丈夫のはず、と思っていんたのですが。うまくいきませんでした。