WordPressの埋め込み機能により、URLを本文中に書くだけで、自動的にYouTubeなどのコンテンツが埋め込み表示されるようになりました。
CodePenも埋め込みに対応していますが、そのままURLを書いただけでは、プレビュー画面がエラーになってしまいます。
↓Result画面がエラー表示「Our Bad. Probagly. 404(Page Not Found)」になる。
CodPrenを埋め込みで表示するためには、「CodePen oEmbed」というプラグインをインストールする必要があります。
CodePen oEmbedは、インストールして、有効化するだけで大丈夫です。細かい設定などは必要ありません。
↓プラグインを入れたら、無事、Result画面が表示できました。
301 Moved Permanently
プラグインをインストールしてもエラー表示が解消しない場合は、CodePenを表示する投稿のURLを変更して(新規投稿として)、再度埋め込みを行ってみてください。
一度、エラーになった後にプラグインを有効化すると、エラーになったURLでは、しばらくエラーのままになることがあるようです。
ちなみに、埋め込んだCodePenの横幅が小さくなってしまう場合には、iframeにwidth:100%;かmax-width:100%;を指定しましょう。
iframe { width: 100%; }