はじめに
WordPressサイトでインタラクティブなコードサンプルやデモを提供するには、CodePenが非常に便利です。CodePenはフロントエンド開発者にとって人気のあるプラットフォームであり、HTML, CSS, JavaScriptのコードを共有・テストすることができます。
症状・背景
- ユーザーにインタラクティブなコーディングデモを見せたい
- 技術記事でコードサンプルを効果的に表示したい
- オープンソースプロジェクトの使い方を説明したい
- コードスニペットを試すためにユーザーフレンドリーなインターフェースが必要
手順・設定方法
ステップ1: CodePenのプロジェクトを共有する
# CodePenの共有リンクを取得します。
https://codepen.io/user/pen/example
# WordPressエディタに埋め込みコードをコピーします。
<iframe height="300" style="width: 100%;" scrolling="no" title="Example Pen" src="https://codepen.io/user/embed/example?default-tab=result&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>ステップ2: WordPressの設定を調整する
# テーマのfunctions.phpファイルを開きます。
// ファイルエディタで開くコマンド例：nano wp-content/themes/your-theme/functions.php
# 以下のようなショートコードを追加します。
function codepen_shortcode($atts) {
$atts = shortcode_atts( array(
'id' => '',
), $atts, 'codepen');
return '<iframe height="300" style="width: 100%;" scrolling="no" title="'. esc_attr($atts['id']) .'" src="https://codepen.io/embed/'. esc_attr($atts['id']) .'?default-tab=result&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>';
}
add_shortcode('codepen', 'codepen_shortcode');ステップ3: ショートコードを使用して記事に埋め込む
# WordPressのエディタで新しい投稿を作成します。
// 新しい投稿を作成するコマンド例：wp post create --post_type=post --title="CodePen埋め込みサンプル" --content="[codepen id='example']"
# エディタでショートコードを直接挿入します。
[codepen id='example']ステップ4: 埋め込んだCodePenの確認
# ブログの投稿一覧ページを開きます。
// ブラウザで開くコマンド例：firefox https://your-wordpress-site.com/
# コードペンが正しく表示されていることを確認します。注意事項
- CodePenプロジェクトは共有設定を公開にしておく必要がある
- セキュリティ上、iframeのソースURLから外部サイトへのアクセスを制限すること
- パフォーマンスに影響を与えないよう、iframeのサイズやコンテンツを適切に調整する
- WordPressテーマがショートコードをサポートしていることを確認する
まとめ
1. 共有リンク取得: CodePenプロジェクトを公開設定で保存し、共有リンクを取得します。
2. ショートコード追加: functions.phpファイルに埋め込み用のショートコードを追加します。
3. 記事内への挿入: WordPressエディタ内でショートコードを使用してCodePenを記事に埋め込みます。
4. 確認と調整: ブログページで正しく表示されているか確認し、必要に応じてサイズや設定を調整します。
関連記事: