WordPress カスタムフィールドでHTML5スライダーを使えるようにしてみました。

advanced custom fields プラグインのアドオン機能を利用しています。下記は、カスタムフィールドをカスタマイズした管理画面のキャプチャー画像です。

inputタグの属性に、type="number" をつけると、フォーム右端に▲▼が表示されます。また、type="range" とすれば、マウスでドラッグして、割合を直感的に編集できます。

(add_meta_box 等を使えば、このプラグインを使わなくてもカスタムフィールドを自由自在にカスタマイズできるのですが、)advanced custom fields プラグインのアドオン機能と使うと、カスタムフィールドのカスタマイズが非常に楽になります。

本アドオンは、version 3.3.8 から標準搭載となりました。

advanced custom fields プラグインの日本語化は http://support.advancedcustomfields.com/discussion/2219/japanese-translation をごらんください。

advanced custom fields プラグインは、多くの開発者や翻訳者が参加して共有しているプラグインなので、WordCamp Tokyo 2012 で紹介できたらいいな、と考えています。

楽天で検索
【楽天ブックスならいつでも送料無料】HTML5＆CSS3ステップアップブック [ エ・ビスコム・テック・ラボ ]
2808円
ステップバイステップ形式でマスターできる エ・ビスコム・テック・ラボ ソシム発行年月：2012年05月 ページ数：287p サイズ：単行本 ISBN：97848
楽天ブックス
【楽天ブックスならいつでも送料無料】よくわかるHTML5＋CSS3の教科書第2版 [ 大藤幹 ]
3024円
大藤幹 マイナビ発行年月：2014年05月 ページ数：335p サイズ：単行本 ISBN：9784839952228 大藤幹（オオフジミキ）大学卒業後、複数のソ
楽天ブックス
　Dreamweaver＋HTML5　＆　CSS3レッスンブック　ステップバイステップ形式でマスターできる／エビスコム【後払いOK】【2500円以上送料無料】
2894円
著者エビスコム(著)出版社ソシム発行年月2012年07月ISBN9784883378272ページ数319P9784883378272内容紹介Dreamweave
オンライン書店boox
Supported by 楽天ウェブサービス