説明

CodePen は、フロントエンド開発のためのオンラインコードエディタです。HTML、CSS、JavaScriptと、それらに付随する言語やライブラリを使って、何か (私たちはペンと呼んでいます) を作ることができます。どの Pen も他のサイトに埋め込むことができ、ブログ記事、ドキュメント、フォーラムなどに便利です。

この Gutenberg ブロックを使えば、簡単に Pen を埋め込むことができます。oEmbed (PenのURLを貼り付けるだけ) も Gutenberg の CodePen 埋め込みに使えますが、このプラグインを使うと高さ、テーマ、デフォルトタブの設定など、より多くのカスタマイズが可能です。

スクリーンショット

CodePen の埋め込みブロックを追加
すべてのオプションを含むブロック

ブロック

このプラグインは2個のブロックを提供します。

CodePen Embed
Cp Codepen Embed Block

インストール

WordPress プラグインディレクトリからインストールします。

FAQ

これはどこで役に立つのですか？: CodePen で作成した (または他の人が作成した) Pen を自分の WordPress サイトに埋め込むのに便利です。

評価

Deniss 2022年5月4日

Good module for custom code embeds from CodePen.

Georgi Popov 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件のレビューをすべて表示

貢献者と開発者

CodePen Embed Block はオープンソースソフトウェアです。以下の人々がこのプラグインに貢献しています。

“CodePen Embed Block” は1ロケールに翻訳されています。翻訳者のみなさん、翻訳へのご協力ありがとうございます。

“CodePen Embed Block” をあなたの言語に翻訳しましょう。

開発に興味がありますか ?

コードを閲覧するか、SVN リポジトリをチェックするか、開発ログを 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

Super for custom code embeds

Great tutorial tool

説明