Title: CodePen Embedded Pens Shortcode Author: Chris Coyier Published: 2014年1月6日 Last modified: 2024年10月1日 --- プラグインを検索 このプラグインは **WordPress の最新3回のメジャーリリースに対してテストされていま せん**。もうメンテナンスやサポートがされていないかもしれず、最新バージョンの WordPress で使用した場合は互換性の問題が発生する可能性があります。 ![](https://s.w.org/plugins/geopattern-icon/codepen-embedded-pen-shortcode.svg) # CodePen Embedded Pens Shortcode 作者: [Chris Coyier](https://profiles.wordpress.org/chriscoyier/) [ダウンロード](https://downloads.wordpress.org/plugin/codepen-embedded-pen-shortcode.zip) * [詳細](https://ja.wordpress.org/plugins/codepen-embedded-pen-shortcode/#description) * [レビュー](https://ja.wordpress.org/plugins/codepen-embedded-pen-shortcode/#reviews) * [インストール](https://ja.wordpress.org/plugins/codepen-embedded-pen-shortcode/#installation) * [開発](https://ja.wordpress.org/plugins/codepen-embedded-pen-shortcode/#developers) [サポート](https://wordpress.org/support/plugin/codepen-embedded-pen-shortcode/) ## 説明 特別なショートコード `[codepen_embed]` を使用して、[CodePen](http://codepen.io) の Pens を埋め込めます。 CodePen については[こちら](http://codepen.io/hello)を参照してください。このプラグ インについては[こちら](http://blog.codepen.io/documentation/features/wordpress-plugin/) を参照してください。 ### 基本的な使い方 ``` [codepen_embed height=300 theme_id=1 slug_hash='jwGBh' user='arasdesign' default_tab='html' animations='run'] See the Pen Flat minion by Amin Poursaied (@arasdesign) on CodePen [/codepen_embed] ``` ### ポイント 1. ショートコードはビジュアルエディターで使用できます。CodePen の埋め込みコードは HTMLをコピー & ペーストするだけだと、ビジュアルモードでは機能しません。WordPress のビジュアルエディターを使用したことがある方なら、きっとこのプラグインを使いたく なることでしょう。 2. デフォルトテーマを使ってもいいですし、ショートコードの属性に記述してテーマを上書き することもできます。 3. そうすることによって、このプラグインがより機能的になるといいのですが。たとえば、 埋め込む Pen を意匠を凝らしたUIにして、HTML の出力を制御するなど。 ## スクリーンショット [⌊埋め込まれた Pen⌉⌊埋め込まれた Pen⌉[ 埋め込まれた Pen [⌊設定ページ⌉⌊設定ページ⌉[ 設定ページ [⌊ショートコードを記述したエディター⌉⌊ショートコードを記述したエディター⌉[ ショートコードを記述したエディター ## インストール “/wp-content/plugins/” ディレクトリに “codepen_embed” フォルダーをコピーします。 そして管理画面のプラグインぺージで有効化します。あるいは、管理画面の「プラグイン 新規追加」ページで “CodePen Embed” を探します。 ## FAQ ### What is CodePen? [CodePen](http://codepen.io) は、HTML、CSS、JavaScript を使用して誰もが何かを構築 できる Web アプリです。 ### Why is this useful? ショートコードはクリーンです ! WordPressのページにCodePen のソースを埋め込むには JavaScript や iframe のコードをコピー & ペーストしてもいいのですが、テキストモード で記述する必要があります。ビジュアルモード（ デフォルト）で記述すると、埋め込んだ コードは機能しません。ショートコードはどちらのモードで記述しても大丈夫です。 このプラグインで、埋め込みコードのデフォルトテーマをカスタマイズすることもできます。 ## 評価 ![](https://secure.gravatar.com/avatar/57a015498d8df17cb89d2fc8bb6bf18bfa7a71bead26d049b5031eb7c67cad79? s=60&d=retro&r=g) ### 󠀁[Buggy and Not Supported](https://wordpress.org/support/topic/buggy-and-note-supported/)󠁿 [DarkMG73](https://profiles.wordpress.org/darkmg73/) 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. ![](https://secure.gravatar.com/avatar/fc0812766316490436d3b236a0338b18d1c618004884f7f3f03acee15e2365da? s=60&d=retro&r=g) ### 󠀁[top notch](https://wordpress.org/support/topic/top-notch-63/)󠁿 [pixelmort](https://profiles.wordpress.org/pixelmort/) 2017年4月5日 👌 ![](https://secure.gravatar.com/avatar/50c4ee4b28d3a301382998d6303c95251b019670f5bac26ccbad32d14dea47ad? s=60&d=retro&r=g) ### 󠀁[its works](https://wordpress.org/support/topic/its-works-15/)󠁿 [admin625](https://profiles.wordpress.org/admin625/) 2016年9月3日 light and it works. [ 6件のレビューをすべて表示 ](https://wordpress.org/support/plugin/codepen-embedded-pen-shortcode/reviews/) ## 貢献者と開発者 CodePen Embedded Pens Shortcode はオープンソースソフトウェアです。以下の人々がこの プラグインに貢献しています。 貢献者 * [ Chris Coyier ](https://profiles.wordpress.org/chriscoyier/) [“CodePen Embedded Pens Shortcode” をあなたの言語に翻訳しましょう。](https://translate.wordpress.org/projects/wp-plugins/codepen-embedded-pen-shortcode) ### 開発に興味がありますか ? [コードを閲覧](https://plugins.trac.wordpress.org/browser/codepen-embedded-pen-shortcode/) するか、[SVN リポジトリ](https://plugins.svn.wordpress.org/codepen-embedded-pen-shortcode/) をチェックするか、[開発ログ](https://plugins.trac.wordpress.org/log/codepen-embedded-pen-shortcode/) を [RSS](https://plugins.trac.wordpress.org/log/codepen-embedded-pen-shortcode/?limit=100&mode=stop_on_copy&format=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 ## メタ * バージョン **1.0.3** * 最終更新日 **2年前** * 有効インストール数 **900+** * WordPress バージョン ** 2.6またはそれ以降 ** * 検証済み最新バージョン: **6.6.5** * 言語 * [English (US)](https://wordpress.org/plugins/codepen-embedded-pen-shortcode/) * [詳細を表示](https://ja.wordpress.org/plugins/codepen-embedded-pen-shortcode/advanced/) ## 評価 5つ星中4.3つ星 * [ 5 5-星レビュー ](https://wordpress.org/support/plugin/codepen-embedded-pen-shortcode/reviews/?filter=5) * [ 0 4-星レビュー ](https://wordpress.org/support/plugin/codepen-embedded-pen-shortcode/reviews/?filter=4) * [ 0 3-星レビュー ](https://wordpress.org/support/plugin/codepen-embedded-pen-shortcode/reviews/?filter=3) * [ 0 2-星レビュー ](https://wordpress.org/support/plugin/codepen-embedded-pen-shortcode/reviews/?filter=2) * [ 1 1-星レビュー ](https://wordpress.org/support/plugin/codepen-embedded-pen-shortcode/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/codepen-embedded-pen-shortcode/reviews/#new-post) [すべてのレビューを見る](https://wordpress.org/support/plugin/codepen-embedded-pen-shortcode/reviews/) ## 貢献者 * [ Chris Coyier ](https://profiles.wordpress.org/chriscoyier/) ## サポート 意見や質問がありますか ? [サポートフォーラムを表示](https://wordpress.org/support/plugin/codepen-embedded-pen-shortcode/)