WordPress | CodePen専用のプラグイン「CodePen Embedded Pens Shortcode」の使い方
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」ブロック使うか、「ショートコード」ブロックを使うか、の違いのみになります。