Plugin Name: CodePen Embedded Pens Shortcode

説明

ショートコード [codepen_embed] を使用して、 CodePen のソースを埋め込むことができるようになります。

CodePen についてはこちらを参照してください。このプラグインについてはこちらを参照してください。

基本的な使い方

[codepen_embed height=300 theme_id=1 slug_hash='jwGBh' user='arasdesign' default_tab='html' animations='run']
  See the Pen <a href='http://codepen.io/arasdesign/pen/jwGBh'>Flat minion</a> by Amin Poursaied (<a href='http://codepen.io/arasdesign'>@arasdesign</a>) on <a href='http://codepen.io'>CodePen</a>
[/codepen_embed]

ポイント

  1. ショートコードはビジュアルエディターで使用できます。CodePen の埋め込みコードは HTMLをコピー & ペーストするだけだと、ビジュアルモードでは機能しません。WordPress のビジュアルエディターを使用したことがある方なら、きっとこのプラグインを使いたくなることでしょう。

  2. デフォルトテーマを使ってもいいですし、ショートコードの属性に記述してテーマを上書きすることもできます。

  3. そうすることによって、このプラグインがより機能的になるといいのですが。たとえば、埋め込む Pen を意匠を凝らしたUIにして、HTML の出力を制御するなど。

スクリーンショット

  • 埋め込まれた Pen
  • 設定ページ
  • ショートコードを記述したエディター

インストール

“/wp-content/plugins/” ディレクトリに “codepen_embed” フォルダーをコピーします。そして管理画面のプラグインぺージで有効化します。あるいは、管理画面の「プラグイン 新規追加」ページで “CodePen Embed” を探します。

FAQ

What is CodePen?

CodePen は HTML ・ CSS ・ JavaScript を用いて誰でも何かを構築することのできるウェブアプリです。

Why is this useful?

ショートコードはクリーンです ! WordPressのページにCodePen のソースを埋め込むには JavaScript や iframe のコードをコピー & ペーストしてもいいのですが、テキストモードで記述する必要があります。ビジュアルモード( デフォルト)で記述すると、埋め込んだコードは機能しません。ショートコードはどちらのモードで記述しても大丈夫です。

このプラグインで、埋め込みコードのデフォルトテーマをカスタマイズすることもできます。

貢献者と開発者

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

“Plugin Name: CodePen Embedded Pens Shortcode” をあなたの言語に翻訳しましょう。

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

コードを閲覧するか、SVN リポジトリをチェックするか、開発ログRSS で購読してみてください。

変更履歴

  • 0.1 – ベータ
  • 0.2 – “line_numbers” 属性を追加
  • 0.3 – Default for data_animations is now run, 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" and theme_id="dark" work.
  • 0.7 – Making sure data_edtiable support editable embeds.
    • 0.7.1 – Fixing naming thing