Title: CodePen Embed Block Author: Chris Coyier Published: 2020年1月17日 Last modified: 2026年8月21日 --- プラグインを検索 このプラグインは **WordPress の最新3回のメジャーリリースに対してテストされていま せん**。もうメンテナンスやサポートがされていないかもしれず、最新バージョンの WordPress で使用した場合は互換性の問題が発生する可能性があります。 ![](https://ps.w.org/codepen-embed-block/assets/icon-256x256.jpg?rev=2471014) # CodePen Embed Block 作者: [Chris Coyier](https://profiles.wordpress.org/chriscoyier/) [ダウンロード](https://downloads.wordpress.org/plugin/codepen-embed-block.zip) * [詳細](https://ja.wordpress.org/plugins/codepen-embed-block/#description) * [レビュー](https://ja.wordpress.org/plugins/codepen-embed-block/#reviews) * [インストール](https://ja.wordpress.org/plugins/codepen-embed-block/#installation) * [開発](https://ja.wordpress.org/plugins/codepen-embed-block/#developers) [サポート](https://wordpress.org/support/plugin/codepen-embed-block/) ## 説明 [CodePen](https://codepen.io) は、フロントエンド開発のためのオンラインコードエディタ です。HTML、CSS、JavaScriptと、それらに付随する言語やライブラリを使って、何か (私 たちはペンと呼んでいます) を作ることができます。どの Pen も他のサイトに埋め込むこと ができ、ブログ記事、ドキュメント、フォーラムなどに便利です。 このブロックを使えば、簡単に Pen を埋め込むことができます。oEmbed (Pen の URL を 貼り付けるだけ) もブロックエディターの CodePen 埋め込みに使えますが、このプラグイン を使うと高さ、テーマ、デフォルトタブの設定など、より多くのカスタマイズが可能です。 ## スクリーンショット [⌊CodePen の埋め込みブロックを追加⌉⌊CodePen の埋め込みブロックを追加⌉[ CodePen の埋め込みブロックを追加 [⌊すべてのオプションを含むブロック⌉⌊すべてのオプションを含むブロック⌉[ すべてのオプションを含むブロック ## ブロック このプラグインは1個のブロックを提供します。 * CodePen Embed Embeds CodePen pens ## インストール WordPress プラグインディレクトリからインストールします。 ## FAQ ### これはどこで役に立つのですか？ CodePen で作成した (または他の人が作成した) Pen を自分の WordPress サイトに埋め込む のに便利です。 ## 評価 ![](https://secure.gravatar.com/avatar/d1a79b946f31874fa60f2b234b9ac8add41a2049281523e8a96698354406f8e6? s=60&d=retro&r=g) ### 󠀁[Super for custom code embeds](https://wordpress.org/support/topic/super-for-custom-code-embeds/)󠁿 [Deniss](https://profiles.wordpress.org/cms24/) 2022年5月4日 Good module for custom code embeds from CodePen. ![](https://secure.gravatar.com/avatar/3d03ea1bfb9ecee0ee6ec90857c2e62be4dbc83d9e2f9e1ee24618e9dde6a3bb? s=60&d=retro&r=g) ### 󠀁[Great tutorial tool](https://wordpress.org/support/topic/great-tutorial-tool/)󠁿 [Georgi Popov](https://profiles.wordpress.org/magadanski_uchen/) 2022年1月20日 I write web development tutorials in my blog and have tried many syntax highlighter options for code snippets in the past. I recently decided to give Codepen a try and this plugin is surely the best way to embed and configure those! [ 2件のレビューをすべて表示 ](https://wordpress.org/support/plugin/codepen-embed-block/reviews/) ## 貢献者と開発者 CodePen Embed Block はオープンソースソフトウェアです。以下の人々がこのプラグイン に貢献しています。 貢献者 * [ Chris Coyier ](https://profiles.wordpress.org/chriscoyier/) * [ Andrew Taylor ](https://profiles.wordpress.org/andrewtaylor-1/) “CodePen Embed Block” は2ロケールに翻訳されています。 [翻訳者](https://translate.wordpress.org/projects/wp-plugins/codepen-embed-block/contributors) のみなさん、翻訳へのご協力ありがとうございます。 [“CodePen Embed Block” をあなたの言語に翻訳しましょう。](https://translate.wordpress.org/projects/wp-plugins/codepen-embed-block) ### 開発に興味がありますか ? [コードを閲覧](https://plugins.trac.wordpress.org/browser/codepen-embed-block/)する か、[SVN リポジトリ](https://plugins.svn.wordpress.org/codepen-embed-block/)をチェック するか、[開発ログ](https://plugins.trac.wordpress.org/log/codepen-embed-block/)を [RSS](https://plugins.trac.wordpress.org/log/codepen-embed-block/?limit=100&mode=stop_on_copy&format=rss) で購読してみてください。 ## 変更履歴 #### 1.0 * 初回リリース #### 1.0.2 * 編集可能なオプションを追加 #### 1.0.3 * Tested up to WordPress 6.3.1 #### 1.1.0 * Added new setting for default theme ID #### 1.2.0 * Rewritten using @wordpress/blocks builder * Update RegEx to support 2.0 editor URLs #### 1.2.1 * Sanitize and escape the default theme ID setting to prevent stored cross-site scripting. ## メタ * バージョン **1.2.1** * 最終更新日 **2か月前** * 有効インストール数 **600+** * WordPress バージョン ** 5.1またはそれ以降 ** * 検証済み最新バージョン: **6.7.10** * PHP バージョン ** 7.2またはそれ以降 ** * 言語 * [Chinese (Taiwan)](https://tw.wordpress.org/plugins/codepen-embed-block/)、[English (US)](https://wordpress.org/plugins/codepen-embed-block/)、 [French (France)](https://fr.wordpress.org/plugins/codepen-embed-block/). * [プラグインを翻訳](https://translate.wordpress.org/projects/wp-plugins/codepen-embed-block) * タグ * [code](https://ja.wordpress.org/plugins/tags/code/)[codepen](https://ja.wordpress.org/plugins/tags/codepen/) [embed](https://ja.wordpress.org/plugins/tags/embed/)[gutenberg](https://ja.wordpress.org/plugins/tags/gutenberg/) * [詳細を表示](https://ja.wordpress.org/plugins/codepen-embed-block/advanced/) ## 評価 5つ星中5つ星 * [ 2 5-星レビュー ](https://wordpress.org/support/plugin/codepen-embed-block/reviews/?filter=5) * [ 0 4-星レビュー ](https://wordpress.org/support/plugin/codepen-embed-block/reviews/?filter=4) * [ 0 3-星レビュー ](https://wordpress.org/support/plugin/codepen-embed-block/reviews/?filter=3) * [ 0 2-星レビュー ](https://wordpress.org/support/plugin/codepen-embed-block/reviews/?filter=2) * [ 0 1-星レビュー ](https://wordpress.org/support/plugin/codepen-embed-block/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/codepen-embed-block/reviews/#new-post) [すべてのレビューを見る](https://wordpress.org/support/plugin/codepen-embed-block/reviews/) ## 貢献者 * [ Chris Coyier ](https://profiles.wordpress.org/chriscoyier/) * [ Andrew Taylor ](https://profiles.wordpress.org/andrewtaylor-1/) ## サポート 意見や質問がありますか ? [サポートフォーラムを表示](https://wordpress.org/support/plugin/codepen-embed-block/)