説明
特別なショートコード [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 の出力を制御するなど。
インストール
“/wp-content/plugins/” ディレクトリに “codepen_embed” フォルダーをコピーします。そして管理画面のプラグインぺージで有効化します。あるいは、管理画面の「プラグイン 新規追加」ページで “CodePen Embed” を探します。
FAQ
-
What is CodePen?
-
CodePen は、HTML、CSS、JavaScript を使用して誰もが何かを構築できる Web アプリです。
-
Why is this useful?
-
ショートコードはクリーンです ! WordPressのページにCodePen のソースを埋め込むには JavaScript や iframe のコードをコピー & ペーストしてもいいのですが、テキストモードで記述する必要があります。ビジュアルモード( デフォルト)で記述すると、埋め込んだコードは機能しません。ショートコードはどちらのモードで記述しても大丈夫です。
このプラグインで、埋め込みコードのデフォルトテーマをカスタマイズすることもできます。
評価
貢献者と開発者
“CodePen Embedded Pens Shortcode” をあなたの言語に翻訳しましょう。
開発に興味がありますか ?
変更履歴
- 0.1 – ベータ
- 0.2 – “line_numbers” 属性を追加
- 0.3 – Default for
data_animations
is nowrun
, as documented. - 0.4 – Added
preview
attribute. 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_edtiable
support editable embeds.- 0.7.1 – Fixing naming thing
- 0.8 – Updating location of CodePen’s embed script
- 1.0.2 – Bug fixes
- 1.0.3 – Bug fixes