WordPressでCodePenの埋め込みをショートコードで実装可能にするプラグイン「CodePen Embedded Pens Shortcode」の使い方を紹介しています。

※ CodePenとはHTML・JS・CSSのWEB上でテストできる開発環境であり、ソースコードの動作サンプルやコードの紹介などをブログ記事やWEBサイトに手軽に埋め込める事できる事で人気のWEBツールです。

プラグイン「CodePen Embedded Pens Shortcode」

プラグイン「CodePen Embedded Pens Shortcode」は以下のページに詳細情報があります。

Plugin Name: CodePen Embedded Pens Shortcode – WordPress-plugin | WordPress.org Dansk

実際にCodePenを埋め込んでみた動作サンプルです。

See the Pen 埋め込みコード記事、サンプル用 by yochans (@yochans) on CodePen.

CodePenは、どの埋め込みコードがおすすめか

現在、CodePenの埋め込み用コードはWordPressのショートコード、HTML、iframe、APIを介した処理ができるPrefillの4タイプがあります。

Prefill Embedsでも埋め込みは問題ありませんが、特にそのまま埋め込むだけに使うのであればショートコードタイプ、HTMLタイプ、iframeタイプのいずれかを使う事になります。

この３つで、おすすめなのはHTMLタイプかショートコードタイプです。
また、ショートコードタイプで出力されるコードはHTMLタイプと同じです。

エディタで「カスタムHTML」ブロック使うか、「ショートコード」ブロックを使うか、の違いのみになります。