CodePen Embedded Pens Shortcode
·
ショートコード [codepen_embed] を使用して、CodePen のソースを埋め込むことができるようになります。
評価機能
バージョン
1.0.3
有効インストール数
900
最終更新日時
Oct 1, 2024
特別なショートコード [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 の出力を制御するなど。