CodePen Embedded Pens Shortcode

説明

特別なショートコード [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]

ポイント

  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 を使用して誰もが何かを構築できる Web アプリです。

Why is this useful?

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

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

評価

2024年10月8日
Light theme does not work after the last compatibility update and the dev does not reply to anything in the support forum for this plugin. This means this plugin is not being supported, beyond rare and limited compatibility updates. It is much better to use a different code tool than CodePen, and there are many others, or just posting the CodePen embed directly.
6件のレビューをすべて表示

貢献者と開発者

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

貢献者

“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
  • 1.0.2 – Bug fixes
  • 1.0.3 – Bug fixes