Plugin Name: CodePen Embedded Pens Shortcode

説明

Allows the use of a special shortcode [codepen_embed] for embedding Pens from CodePen.

You can learn more about CodePen here and about this plugin here.

基本的な使い方

[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]

ポイント

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

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

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

スクリーンショット

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

インストール

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

FAQ

What is CodePen?

CodePen is a web app that allows anyone to create things with HTML, CSS, and JavaScript.

Why is this useful?

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

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

評価

5件のレビューをすべて表示

貢献者と開発者

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
  • 0.8 – Updating location of CodePen’s embed script