Title: CodePen Embedded Pens Shortcode Author: Chris Coyier Published: 2014-01-06 Last modified: 2024-10-01 --- Szukaj wtyczek Wtyczka **nie została przetestowana z trzema ostatnimi głównymi wydaniami WordPressa**. Może nie być już utrzymywana lub obsługiwana, co może skutkować problemem ze zgodnością z nowszymi wersjami WordPressa. ![](https://s.w.org/plugins/geopattern-icon/codepen-embedded-pen-shortcode.svg) # CodePen Embedded Pens Shortcode Autor: [Chris Coyier](https://profiles.wordpress.org/chriscoyier/) [Pobierz](https://downloads.wordpress.org/plugin/codepen-embedded-pen-shortcode.zip) * [Szczegóły](https://pl.wordpress.org/plugins/codepen-embedded-pen-shortcode/#description) * [Recenzje](https://pl.wordpress.org/plugins/codepen-embedded-pen-shortcode/#reviews) * [Instalacja](https://pl.wordpress.org/plugins/codepen-embedded-pen-shortcode/#installation) * [Rozwój](https://pl.wordpress.org/plugins/codepen-embedded-pen-shortcode/#developers) [Wsparcie](https://wordpress.org/support/plugin/codepen-embedded-pen-shortcode/) ## Opis Allows the use of a special shortcode `[codepen_embed]` for embedding Pens from [CodePen](https://codepen.io). You can learn more about CodePen [here](http://codepen.io/hello) and about this plugin [here](https://blog.codepen.io/documentation/features/wordpress-plugin/). ### Basic Usage ``` [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] ``` ### The Point 1. You can use shortcodes in the „Visual” editor. CodePen Embeds are copy-and-paste HTML that don’t work when using the editor that way. If you ever use the Visual editor in WordPress, you’ll probably want to use this plugin. 2. You can set a default theme, or override any theme set via Shortcode attribute. 3. Hopefully eventually this plugin will have more functionality. Like have a fancy UI for picking Pens to embed and more control over the HTML output. ## Zrzuty ekranu [⌊An Embedded Pen⌉⌊An Embedded Pen⌉[ An Embedded Pen [⌊Settings Page⌉⌊Settings Page⌉[ Settings Page [⌊Editor with Shortcode⌉⌊Editor with Shortcode⌉[ Editor with Shortcode ## Instalacja For old school manual installation people: copy the folder „codepen_embed” into the /wp-content/plugins/ folder. Then go to the Plugins area of the Admin and activate. Otherwise, search for „CodePen Embed” from the admin area of your WordPress site in Plugins > Add New. ## Najczęściej zadawane pytania ### What is CodePen? [CodePen](https://codepen.io) is a web app that allows anyone to create things with HTML, CSS, and JavaScript. ### Why is this useful? Shortcodes are clean! You can already copy and paste JavaScript or iframe code to embed a Pen onto a WordPress page, but you need to make sure to be in the „HTML” tab of the writing area. If a user is in the „Visual” (default) tab, the embed code will not work. Short codes will work either way. You can also manage the default theme of the embeds with this plugin. ## Recenzje ![](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-08 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-04-05 👌 ![](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-09-03 light and it works. [ Przeczytaj 6 recenzji ](https://wordpress.org/support/plugin/codepen-embedded-pen-shortcode/reviews/) ## Kontrybutorzy i deweloperzy „CodePen Embedded Pens Shortcode” jest oprogramowaniem open source. Poniższe osoby miały wkład w rozwój wtyczki. Zaangażowani * [ Chris Coyier ](https://profiles.wordpress.org/chriscoyier/) [Przetłumacz wtyczkę “CodePen Embedded Pens Shortcode” na swój język.](https://translate.wordpress.org/projects/wp-plugins/codepen-embedded-pen-shortcode) ### Interesuje cię rozwój wtyczki? [Przeglądaj kod](https://plugins.trac.wordpress.org/browser/codepen-embedded-pen-shortcode/), sprawdź [repozytorium SVN](https://plugins.svn.wordpress.org/codepen-embedded-pen-shortcode/) lub czytaj [dziennik rozwoju](https://plugins.trac.wordpress.org/log/codepen-embedded-pen-shortcode/) przez [RSS](https://plugins.trac.wordpress.org/log/codepen-embedded-pen-shortcode/?limit=100&mode=stop_on_copy&format=rss). ## Rejestr zmian * 0.1 – Beta * 0.2 – Adding line_numbers attribute * 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 ## Meta * Wersja **1.0.3** * Ostatnia aktualizacja **2 lata temu** * Włączone instalacje **800+** * Wersja WordPressa ** 2.6 lub nowszej ** * Testowano do **6.6.5** * Język * [English (US)](https://wordpress.org/plugins/codepen-embedded-pen-shortcode/) * [Widok zaawansowany](https://pl.wordpress.org/plugins/codepen-embedded-pen-shortcode/advanced/) ## Oceny 4.3 na 5 gwiazdek. * [ 5 recenzji 5-gwiazdkowych ](https://wordpress.org/support/plugin/codepen-embedded-pen-shortcode/reviews/?filter=5) * [ 0 recenzji 4-gwiazdkowych ](https://wordpress.org/support/plugin/codepen-embedded-pen-shortcode/reviews/?filter=4) * [ 0 recenzji 3-gwiazdkowych ](https://wordpress.org/support/plugin/codepen-embedded-pen-shortcode/reviews/?filter=3) * [ 0 recenzji 2-gwiazdkowych ](https://wordpress.org/support/plugin/codepen-embedded-pen-shortcode/reviews/?filter=2) * [ 1 recenzja 1-gwiazdkowa ](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) [Zobacz wszystkierecenzje.](https://wordpress.org/support/plugin/codepen-embedded-pen-shortcode/reviews/) ## Zaangażowani * [ Chris Coyier ](https://profiles.wordpress.org/chriscoyier/) ## Wsparcie Masz coś do dodania? Potrzebujesz pomocy? [Zobacz forum wsparcia](https://wordpress.org/support/plugin/codepen-embedded-pen-shortcode/)