このプラグインは WordPress の最新3回のメジャーリリースに対してテストされていません。もうメンテナンスやサポートがされていないかもしれず、最新バージョンの WordPress で使用した場合は互換性の問題が発生する可能性があります。

WordPress Polymer Plugin

説明

This plugin allows to add Polymer elements to your posts and pages, the same components used in Android OS. You can use the HTML editor with the Polymer tags directly or the shortcode [polymer] for all the elements. The correct HTML libraries will be imported automatically but must be installed from the plugin option page.
For Polymer documentation please look at the official website: Polymer Project

This is a rewritten of my previous plugin Polymer for WordPress, now it allows to use the latest Polymer libraries.

機能

  • Polymer tags directly available in posts / pages with the HTML editor;
  • components installer (install, remove and update);
  • [polymer] shortcode to access all installed tags;
  • auto import the necessary HTML components;
  • force import components;
  • Javascript editor in posts / pages admin;
  • template override option;
  • autop option.

Shortcode

[polymer ELEMENT-TAG ELEMENT-OPTIONS]ELEMENT-TEXT[/polymer]

Tags: core-icon, paper-button, paper-checkbox, paper-slider, etc.

Options: style, id, class, etc.

Examples

[polymer paper-checkbox][/polymer]
[polymer paper-button raised id="btn1" style="color: green"]A green button[/polymer]
[polymer paper-item icon="home" label="Test link"]<a href="http://www.google.it" target="_blank"></a>[/polymer]

  • autop option: the autop() WordPress function adds p and br tags to the contents when a newline is found, but this can break the Polymer tags. This option allows to enable/disable autop() in posts / pages (plugin default: no autop)
  • template override option: if it is enabled the plugin will load a special template which provides only the required components to run a Polymer app. This is useful if you want a “fullscreen” Polymer app

スクリーンショット

  • Some Polymer elements in a post
  • A dialog example

インストール

  1. Install the plugin
  2. 有効化する
  3. Open Settings \ WP Polymer to install Polymer components
  4. Edit a post or a page and insert Polymer tags
  5. Optionally change the options in the editor meta box

FAQ

How can I do a specific thing with Polymer?

I’m not a Polymer expert, please look in the Polymer Project documentation on the official website or look for help in forums like StackOverflow.

How can I interact with the Polymer elements?

You can add your Javascript code for your page or post in the Javascript editor under the content editor – Polymer Components meta box.
Sample code to open a dialog from a button click:

window.addEventListener('polymer-ready', function(e) {
  document.querySelector('#btn_test').addEventListener('click', function(e) {
    document.querySelector('#my-dialog').toggle();
  });
});

評価

2016年11月7日
I felt in love with polymer and web components. And this is an awesome implementation inside Wordpress
1件のレビューをすべて表示

貢献者と開発者

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

貢献者

“WordPress Polymer Plugin” をあなたの言語に翻訳しましょう。

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

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

変更履歴

2.0.4

  • Small fix to shortcode, minor improvements

2.0.1

  • First release