[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
関連記事
-
[jQuery] Block Scrollプラグイン
今回は、ブロック毎にスクロールするjQueryプラグインのご紹介です。 Block Scroll
-
[jQuery] OSX風のスクロールバーにするプラグイン!
trackpad-scroll-emulator trackpad-scroll-emulator
-
[WordPress] 管理画面にテーブル(WP_List_Table)を表示する
WP_List_Table 管理画面で標準テーブルを表示したい場合は、WP_List_Tableを
-
[CSS] animationを使ってみる!
色の変化をCSSのみで実装できる! CSS3のキーフレームアニメーションでは、JSで出来る、背景色
-
[javascript] Google Maps javascript API v3の使い方(基本編)
Google Maps javaScript API v3とは Google Maps API V
-
[jQuery] クリックしたところから波紋が広がるプラグイン!
Rippler 以前にも波紋のプラグインを紹介しましたが、今回も新たなプラグインを紹介しま
-
[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第4回]
完全に放置してました、僕です。 別に忘れていた訳じゃないんですが、時間がありませんでした。
-
[CSS] CSSで作るリストのアイコン
CSSだけでも色々出来る! CSS3が現在の最新ブラウザでは大体対応されてきてますので、色々な表現
-
[jQuery] FlickerPlateを紹介します。
かっこいいプラグインで、フリックにも対応します。 Flickerplateは、シンプルでとても使い
-
[CSS] 今さらだけど、覚えておきたい疑似クラス・疑似要素
さて、前回は、CSSのセレクタをおさらいしました。 そして、属性セレクタを取り上げている記事も合わ