【Simplicity2】httpsのサイトでブログカードが利用できない問題の修正方法

WordPress4.4から内部リンクまたはoEmbed対応の外部リンクが自動的に埋め込まれます。

embed

Simplicity2では、oEmbed対応していないページでもhatenablog-partsを利用してブログカードを表示してくれます。

また埋め込みの表示をはてなブログカードのような表示にカスタマイズしてくれます。

WordPress 日本語ローカルサイトブログ

しかしhttpsで運用しているこのサイトで「はてなブログ」のURLを貼り付けたのですが表示できませんでした。

今回はこの問題を解決する方法を残しておきます。

なお「Simplicity 2.1 安定版」を対象としており、今後のバージョンアップで修正される可能性があります。

スポンサーリンク

ブログカードの仕組み

「youtube」、「twitter」などはoEmbed対応のサービスとしてWordPressに定義されています。

wp-include/class-oembed.php

投稿記事にこれらにマッチするURLが入力されると、定義されたoEmbed APIから表示するものを取得してきて表示します。

マッチしない場合は一度URLにアクセスしヘッダー内の情報からoEmbed APIの取得を試みて、取得できる場合はそれを使用して表示します。

取得したものは投稿メタに保存されてキャッシュとして使用されるので、何度もこのURLへのアクセスが発生することはありません。

取得したブログカードがiframeの場合には別途ブラウザではアクセスが発生します。

Simplicity2

Simplicity2でのブログカードのカスタマイズは「wp-content/themes/simplicity2/lib/blog-card.php」でプログラムされています。

「はてなブログ」のoEmbed APIを$providersに追加しています。

マッチしない場合にURLにアクセスしてoEmbed APIを取得する機能を停止しています。

これらによって、上の$providersで定義されたものにマッチしないURLのうち、「http://」で始まる全てのURLは「はてなブログ」のoEmbed APIで取得を試みるようになります。

実際にURLが「はてなブログ」の場合は次のようなiframeが取得されます。

この「iframe」と「http://から始まるURL」という組み合わせがhttpsのサイトからだとセキュリティの問題で表示できません。

ここまでのステップでoEmbedされなかったURLは、hatenablog-partsを使用してブログカードが表示されます。

スキーマが省略されており、http、httpsどちらにも対応しています。

解決方法

方針

いままでのことを踏まえると、「はてなブログ」のoEmbed APIを使用した「httpで始まるはてなブログ」の埋め込み用のデータの取得を行わないようにすればよいと考えられます。

2016-01-12 現在、「はてなブログ」はssl対応していないとのことなので、そもそも「はてなブログ」のoEmbed APIを使用しないという対応でもよさそうです。

はてなブログを SSL 対応にする方法。つまり https にするってこと。 結論から言うと、2016-01-12 現在、やる方法は無いっぽい。エントリーの編集画面すら対応していない。(やり方知ってたら誰かおしえて) 2017-09-25 追記: やっとできるような予定になってきたようだ。 staff.hatenabl...

対応

以下の記述を子テーマのfunctions.phpに追加することで「はてなブログ」のoEmbed APIが使用されなくなります。

上で参考にさせていただいたブログは「はてなブログ」ですが、ちゃんと表示されていると思います。

まとめ

サイトのSSL化は今後増えていくと思います。

またSSL化は無料で簡単にできるようになっています。

【Let's Encrypt】SSLを導入してみた
最近流行りの「Let's Encrypt」を使用してここのブログにもSSLを導入してみました。 思っていたよりも簡単に導入できてしまいました。 無料なのでまだの方も試してみてはいか...

Simplicity2を使用している方でうまくブログカードが表示されずに困っている方は試してみてください。