WordPressでCodePen埋め込みエラーを解決する方法

WordPressの埋め込み機能により、URLを本文中に書くだけで、自動的にYouTubeなどのコンテンツが埋め込み表示されるようになりました。

CodePenも埋め込みに対応していますが、そのままURLを書いただけでは、プレビュー画面がエラーになってしまいます。

↓Result画面がエラー表示「Our Bad. Probagly. 404(Page Not Found)」になる。
cap001

CodPrenを埋め込みで表示するためには、「CodePen oEmbed」というプラグインをインストールする必要があります。

cap002

CodePen oEmbedは、インストールして、有効化するだけで大丈夫です。細かい設定などは必要ありません。

↓プラグインを入れたら、無事、Result画面が表示できました。

プラグインをインストールしてもエラー表示が解消しない場合は、CodePenを表示する投稿のURLを変更して(新規投稿として)、再度埋め込みを行ってみてください。

一度、エラーになった後にプラグインを有効化すると、エラーになったURLでは、しばらくエラーのままになることがあるようです。

ちなみに、埋め込んだCodePenの横幅が小さくなってしまう場合には、iframeにwidth:100%;かmax-width:100%;を指定しましょう。

スポンサーリンク

人気の記事

コメントを投稿する

  • Posted on 2016.03.17
  • Views 453