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テーマ(無料・有料)【2018年版】
目的別おすすめのWordPressテーマ(無料・有料)【2018年版】
2018年におすすめしたい、日本語対応の有料WordPressテーマ10選
2018年におすすめしたい、日本語対応の有料WordPressテーマ10選
【2018年版】アドセンス運用に最適なWordPressテーマ10選
【2018年版】アドセンス運用に最適なWordPressテーマ10選

 

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

最新情報をお届けします

コメント

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

  • Posted on
  • Updated on
  • Views 531