Memorandum

普段の生活の覚え書き。主に技術録

埋め込み機能(embed)

WordPressのembed機能

WordPressで記事を書いていると、以前に書いた記事を参考にしてもらいたい場面がありました。テキスト形式で編集しているときに、自記事のURLを直接書くと、

https://memoran.net/introduction/

上記のように、embedカード形式(ブログカード)で表示されます。 ただURLを貼り付けただけなのに、タイトル名や本文も抜粋して表示されてなんかいい感じだと思います。 しかし、私の環境では同じように貼り付けた場合でも、embedカード形式表示されず、タイトル名だけのリンクで表示されてしまうことがありました。 同じ記事の中に、別URLを貼り付けて確認してみましたが、片方はきちんとembedカード形式で表示されて、もう一方はタイトル名だけのリンクになっていました。

error message

問題解決の手段として、Google Chromeの開発者ツール(F12)を使ってみました。Consoleタブの中に"Mixed Contents"というエラーメッセージが表示されていました。Mixed Contentsとはhttpsとhttpのコンテンツが混ざっている状態で、安全ではないためhttpのコンテンツを表示されていないようです。 エラー内容は分かりましたが、なぜmixed contentsの状態になっているのかが分かりません。記事内にURLを書いた時に、embedカード形式で表示される内部の処理が分からないので、修正箇所が分かりませんでした。

状況把握

mixed contentsが起こる原因と対策を色々調べましたが、なかなか情報が見つかりませんでした。そのため、なにが影響しているのか調べてみました。 私の環境は以下のような状況です。

プラグインを外してみたり、設定を変えてみたりと色々やったのですが、どれも効果はなかったです。その中でembedカードが正しく表示できたのが、wordpressのテーマを初期設定の"Twenty Seventeen"のしたときです。wordpressのテーマを"Twenty Seventeen"でライブプレビューをした時に、embedカードが全て正常に表示されていました。しかし、テーマを変更するのは少々手間なので、別の方法を探しました。

対応方法

最終的に対応方法として、記事を書く際にビジュアル形式で編集していると、メディアを追加という項目から"URLから挿入"という項目から挿入すると、URLの先頭に[embed]と表示されて、embedカード形式で表示されるようになりました。更にその後、普通にURLだけを書いてみるとそれもembedカード形式で表示されていました。どうやら、httpで取得したキャッシュが残っていたのかと思われます。というのもmixed contentsのエラーの対応として、wordpressの一般設定のwordpressアドレスがhttpのままだったので、httpsに変更したのですがその対応が反映されず、サーバ側でキャッシュされていたhttpのデータを読み込もうとしてエラーになっていたと思います。 このようなエラーがないようにembedカード形式で表示させたいときは明示的に[embed]をつけてあげるほうがいいと思います。このようなエラーはレアケースかもしれませんが、一応備忘録として誰かの役に立つことができれば幸いです。