説明
特別なショートコード [codepen_embed] を使用して、CodePen の Pens を埋め込めます。
CodePen についてはこちらを参照してください。このプラグインについてはこちらを参照してください。
基本的な使い方
[codepen_embed height=300 theme_id=1 slug_hash='jwGBh' user='arasdesign' default_tab='html' animations='run']
See the Pen <a href='https://codepen.io/arasdesign/pen/jwGBh'>Flat minion</a> by Amin Poursaied (<a href='https://codepen.io/arasdesign'>@arasdesign</a>) on <a href='https://codepen.io'>CodePen</a>
[/codepen_embed]
ポイント
-
ショートコードはビジュアルエディターで使用できます。CodePen の埋め込みコードは HTMLをコピー & ペーストするだけだと、ビジュアルモードでは機能しません。WordPress のビジュアルエディターを使用したことがある方なら、きっとこのプラグインを使いたくなることでしょう。
-
デフォルトテーマを使ってもいいですし、ショートコードの属性に記述してテーマを上書きすることもできます。
-
そうすることによって、このプラグインがより機能的になるといいのですが。たとえば、埋め込む Pen を意匠を凝らしたUIにして、HTML の出力を制御するなど。
スクリーンショット
埋め込まれた Pen 
設定ページ 
ショートコードを記述したエディター
インストール
“/wp-content/plugins/” ディレクトリに “codepen_embed” フォルダーをコピーします。そして管理画面のプラグインぺージで有効化します。あるいは、管理画面の「プラグイン 新規追加」ページで “CodePen Embed” を探します。
FAQ
-
What is CodePen?
-
CodePen は、HTML、CSS、JavaScript を使用して誰もが何かを構築できる Web アプリです。
-
Why is this useful?
-
ショートコードはクリーンです ! WordPressのページにCodePen のソースを埋め込むには JavaScript や iframe のコードをコピー & ペーストしてもいいのですが、テキストモードで記述する必要があります。ビジュアルモード（ デフォルト）で記述すると、埋め込んだコードは機能しません。ショートコードはどちらのモードで記述しても大丈夫です。
このプラグインで、埋め込みコードのデフォルトテーマをカスタマイズすることもできます。
貢献者と開発者
Plugin Name: CodePen Embedded Pens Shortcode はオープンソースソフトウェアです。以下の人々がこのプラグインに貢献しています。
貢献者
変更履歴
- 0.1 – ベータ
- 0.2 – “line_numbers” 属性を追加
- 0.3 – Default for
data_animationsis nowrun, as documented. - 0.4 – Added
previewattribute. Removed line numbers attribute. - 0.5 – Defaulting to v2 of Embeds by default
- 0.6 – Make sure
theme_id="light"andtheme_id="dark"work. - 0.7 – Making sure
data_edtiablesupport editable embeds.- 0.7.1 – Fixing naming thing
- 0.8 – Updating location of CodePen’s embed script