[WordPress] 管理画面にカラーピッカー(wp_color_picker)を表示する
Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
カラーピッカー
管理画面でプラグインの設定などでカラーピッカーを表示したい場合、wp_color_pickerを使用します。
色をクリックするとテキストフィールドにカラーコードが入力されます。便利。
実装
まずは外部jsファイルを作成し、そのなかでwp_color_pickerの処理を記述します。
階層は [wp-content/plugins/プラグインの名前/js] の配下に。
ファイル名は[color-picker.js]としました。(プラグインで使用の場合)
color-picker.js
(function( $ ) { var options = { defaultColor: false, change: function(event, ui){}, clear: function() {}, hide: true, palettes: true }; $('.color-picker').wpColorPicker(options); })( jQuery );
オプションの設定は
- defaultColor — デフォルトのカラーです。デフォルト色を設定したい場合はカラーコードの文字列を記述します。
- change — カラー変更時のイベントです。
- clear — カラークリア時のイベントです。
- hide — 画面ロード時にカラーピッカーを隠すか否か。
- paletters — カラーパレットの表示方法です。
外部jsファイルの読み込み
add_action('admin_enqueue_scripts', 'admin_scripts'); function admin_scripts($hook) { wp_enqueue_script('colorpicker-script', plugins_url('js/color-picker.js', __FILE__), array( 'wp-color-picker' ), false, true); }
wp_enqueue_scriptでjsファイルを読み込みます。
テキストフィールドの記述
<input type="text" name="color" class="color-picker" value="" >
外部jsファイルに記述したクラス名を合わせます。
value値には入力済みのカラーコードを記述したりします。
まとめ
表示方法はとても簡単でした。
また、WordPress3.5からIris-Color-Pickerというプラグインが出たようですね。
(違いがよくわかりません…)
ad
関連記事
-
[Dreamweaver] 便利な検索&置換
Dreamweaverの検索&置換は、便利な機能が満載! サイトを制作する上で厄介になってくるのが
-
[CSS] clearfixの使い方を考える
現在のclearfix 以前は、IE6に対応させるためにソースがちょっと多かったですが、現在はかな
-
[jQuery] クリック時に波紋のような効果をつける
今回は、クリックした時に波紋のような効果をつけるjQueryプラグインの紹介です。 Ripple
-
[CSS] 紙の様にふわっとしたエフェクトが全くつかえない!
寒くなってきて動きが鈍い僕です。こんにちわ。 さて、タイトルの件なのですが、たまに見か
-
[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第1回]
現在、このブログはENJIさんが作られたSTINGER3という無料のテーマを利用させて頂いて
-
[WordPress] 管理画面にテーブル(WP_List_Table)を表示する
WP_List_Table 管理画面で標準テーブルを表示したい場合は、WP_List_Tableを
-
[Dreamweaver] コーディングを早くする5つの方法
コーディングは、早くなる! 普段、Dreamweaverを使っている人で、SassやZenコーディ
-
[CSS] animationを使ってみる!
色の変化をCSSのみで実装できる! CSS3のキーフレームアニメーションでは、JSで出来る、背景色
-
[Dreamweaver] テンプレートの入れ子
テンプレートは入れ子に出来る! Dreamweaverのテンプレートは、ベースを作り、さらにそのベ
-
[jQuery] Block Scrollプラグイン
今回は、ブロック毎にスクロールするjQueryプラグインのご紹介です。 Block Scroll