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%;を指定しましょう。

iframe {
  width: 100%;
}

関連記事

人気の記事

目的別おすすめのWordPressテーマ(無料・有料)【2017年版】
目的別おすすめのWordPressテーマ(無料・有料)【2017年版】
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
アドセンス運用に最適なWordPressテーマ11選
アドセンス運用に最適なWordPressテーマ11選

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

コメント

  • Posted on
  • Updated on
  • Views 495