BLOG

WordPressでCodePenを埋め込む方法

2026.06.22 BLOG

CodePenで作ったデモは、WordPressの記事へ埋め込むとコードと実行結果を同じ場所で見せられます。基本はCodePenのEmbed BuilderからコピーしたHTMLを、WordPressの「カスタムHTML」ブロックへ貼り付けます。

この記事では、ブロックエディターでの手順、iframe方式、テーマ側でスクリプトを1回だけ読み込む実装、表示されない時の確認点を整理します。

CodePenで埋め込みコードを取得する

埋め込みたいPenを開く
エディター下部の「Embed」を押す
表示するタブ、テーマ、高さを設定する
「Copy & Paste Code」のHTMLをコピーする

CodePen公式のEmbedコードは、class="codepen"を持つ要素と埋め込みスクリプトで構成されます。JavaScriptが読み込まれる前もPenへのリンクが残るため、フォールバックとして機能します。

方法1：カスタムHTMLブロックへ貼り付ける

WordPressの記事編集画面で「カスタムHTML」ブロックを追加し、CodePenからコピーしたコードを貼り付けます。通常の段落やコードブロックへ貼ると実行されず、文字として表示されます。

<p
  class="codepen"
  data-height="420"
  data-theme-id="dark"
  data-default-tab="html,result"
  data-user="YOUR_USER_NAME"
  data-slug-hash="YOUR_PEN_ID"
>
  <span>
    See the Pen
    <a href="https://codepen.io/YOUR_USER_NAME/pen/YOUR_PEN_ID">
      デモタイトル
    </a>
    on <a href="https://codepen.io">CodePen</a>.
  </span>
</p>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

YOUR_USER_NAMEとYOUR_PEN_IDは、自分のPenの値へ置き換えてください。公開後のページで動作確認します。編集画面のプレビューでは展開されない場合があります。

方法2：iframeで埋め込む

テーマや権限設定によってscriptタグが削除される場合は、CodePenのembed URLをiframeで表示できます。Pen URLの/pen/を/embed/へ変える形です。

<iframe
  height="420"
  style="width: 100%;"
  scrolling="no"
  title="CodePenデモ"
  src="https://codepen.io/YOUR_USER_NAME/embed/YOUR_PEN_ID?default-tab=result"
  loading="lazy"
  allowtransparency="true"
  allowfullscreen="true"
></iframe>

iframeは単純ですが、CodePen公式HTMLが持つテキストリンクのフォールバックは自分で用意する必要があります。高さとスマホ表示も確認してください。

方法3：テーマで埋め込みスクリプトを1回だけ読む

1記事に複数のPenを置く場合、各埋め込みコードへ同じscriptタグを付ける必要はありません。本文にはclass="codepen"のHTMLだけを置き、テーマ側で公式スクリプトを一度だけenqueueできます。

function nines_enqueue_codepen_embed() {
  if (!is_singular('post')) {
    return;
  }

  $post = get_queried_object();
  if (!$post || !str_contains($post->post_content, 'class="codepen"')) {
    return;
  }

  wp_enqueue_script(
    'codepen-embed',
    'https://cpwebassets.codepen.io/assets/embed/ei.js',
    [],
    null,
    true
  );
}
add_action('wp_enqueue_scripts', 'nines_enqueue_codepen_embed');

上記は投稿本文にclass="codepen"が含まれる時だけスクリプトを読み込みます。PHP 8未満へ対応する場合はstr_contains()をstrpos()へ置き換えてください。

CodePen埋め込み用エリア

この記事自体へ完成したPenを載せる場合は、上の枠を公式Embedコードへ差し替えます。以下は記事側の埋め込みHTMLとレスポンシブ補助CSSです。

HTML

<main class="embed-demo">
  <p class="codepen" data-height="380" data-theme-id="dark" data-default-tab="css,result" data-user="YOUR_USER_NAME" data-slug-hash="YOUR_PEN_ID">
    <span>
      See the Pen
      <a href="https://codepen.io/YOUR_USER_NAME/pen/YOUR_PEN_ID">デモタイトル</a>
      on <a href="https://codepen.io">CodePen</a>.
    </span>
  </p>
</main>

CSS

.embed-demo {
  width: min(100%, 960px);
  margin: 0 auto;
}

.embed-demo iframe {
  width: 100%;
  border: 0;
}

JS

// WordPress側でCodePen公式のembed scriptを読み込みます。
// CodePenのPen内で動かすJavaScriptは、各PenのJSパネルへ記述してください。

埋め込みが表示されない原因

カスタムHTML以外へ貼っている：段落・HCB・通常コードブロックではHTMLが実行されません。
scriptタグが抜けている：公式HTML方式ではei.jsが必要です。
CMSや権限でscriptが削除される：iframe方式かテーマ側enqueueを使います。
data-slug-hashが違う：Pen URLのIDを確認します。
下書きプレビューだけで確認している：公開ページで展開されるか確認します。
高さが足りない：data-heightまたはiframeのheightを調整します。
Pen内の外部素材がHTTP：HTTPSサイトでは混在コンテンツとしてブロックされます。

運用上の注意

大量のCodePenを一度に埋め込むと、iframeや外部スクリプトが増えて表示が重くなります。記事の主題となるデモだけを埋め込み、補足例はコードブロックやCodePenへのリンクで見せる方が読みやすくなります。

Cookie同意やコンテンツセキュリティポリシーを導入しているサイトでは、CodePenの外部スクリプト・iframeが許可されているかも確認してください。

まとめ

最も簡単なのは、CodePenのEmbed Builderからコードをコピーし、WordPressのカスタムHTMLブロックへ貼る方法です。複数のPenを運用するなら、公式スクリプトをテーマ側で1回だけenqueueすると重複を防げます。

参考資料

STEP BACK